CSS第四天

发表于2023-08-23更新于2023-09-01

C3新增选择器

1.属性选择器

1
2
3
4
5
6
E[att]                        选择有att属性的e元素
E[att=val]                   选择att属性且值为val的e元素
e[att^=val]                  选择att属性且值为val开头的e元素
e[att$=val]                  选择att属性且值为val结尾的e元素       权重为10
e[att*=val]                  选择att属性且值含有val的e元素

2.结构伪类选择器

1
2
3
4
5
6
7
8
9
10
e：first-child                                     父元素中第一个子元素e
e：last-child                                     父元素中第最后一个子元素e
e：nth-child（n）           匹配父元素中第n个子元素e（n还可以为even偶数）（odd奇数）
n 还可以为公式   2n     2n+1  5n    n+5    -n+5     n从零开始累加
e：first-of-type                              指定类型e的第一个元素
e：last-of-type                             指定类型e的最后一个元素
e：nth-of-type（n）                            指定类型e的第n个元素

nth-child                          对父元素先排序再判断是否匹配e
nth-of-type                 对父元素指定元素进行排序选择再找

3.伪元素选择器

1
2
3
::before                                  再元素前面插入内容
::after                                   再元素后面插入内容    行内元素  权重为一
必须要有content  可写内容

4. 权重表优先级别

image-20230819164337529

网站favicon图标

1
2
3
4
5
6
选中ps中切图切出png格式然后到网站比特虫  http://www.bitbug.net/
然后将图片保存到根目录下面   最后界面引入  （必须在head之间引入代码）
<link rel="shortcut icon" href=" favicon.ico" />
SEO  提高搜索  自然排名
title   网站名称尽量不过30字
<meta name="description" content="对网站介绍网站说明">

LOGO SEO优化

image-20230819164549688

2d/3d转化以及动画

1. 2d转化(translate )

1
2
3
4
5
6
7
8
9
transform:translate (x ,y)             //移动(不会影响其他盒子位置)行内标签无用
transform:translatex(n)                   里面用百分数是移动本身盒子的百分数
transform:translateY(n)                       可用来将盒子垂直居中
transform：rotate（deg单位）                  //旋转
transform-origin：x y                      //转换旋转中心点（默认中心点）
transform：scale（x，y）（宽，高）          //缩放（不会影响其他盒子和设置缩放中心点）
（ 里面写数字 不限单位 就是倍数的意思）一个数字就是两个都变化 小于一就是缩放

transform：translate (x ,y)   rotate（deg单位）scale（x，y）   //复合写法 记得先写移动最前

2. 动画(animation)

1.先定义动画

方法一:(这个可以从0到100%)

1
2
3
4
5
6
7
8
@keyframes 动画姓名{                           
0%{
初始状态                                             
}                                                         
100%{                             
结束状态
}
}

方法二:(这种只有两种状态)

1
2
3
4
5
6
from{ 
         background-position: 0 0;
     }
 to{
        background-position: 1680px 0;
    }

2.调用动画 给用用动画的加上

1
2
3
4
5
6
animation-name:动画名称;
 animation-duration: 时间;
复合属性
animation：名称  持续时间  运动曲线 何时开始   播放次数 是否反方向 动画起始或结束状态
animation-timing-function:steps（分几步） ;              //运动曲线步长
元素可以加多个动画用逗号隔开

3.动画常用属性

使用方法参考地址

image-20230819165737810

3. 3d转化(translate3d)

1
2
3
4
5
6
7
8
9
transform：translate3d（x，y，z）                       //3d位移（z后面单位一般为px）
（z值为正向外走负则向里走）xyz不能省略没有就写零   z值越大看到的物体越大
perspective： 500 （单位px）                           //透视 （写在被观察元素父盒子上）
transform：rotate3d （x,y,z,deg）                       //3d旋转

rotateX rotateY (左手准则 大拇指指向正值四根手指弯曲方向是正值)
rotateZ    和2d基本类似
transform-style：（flat  子元素不开启立体默认（preserve-3d  子元素开启立体） //3d呈现
代码写给父级，但是影响子盒子