CSS3知识点总结

1、相邻兄弟选择器，通用兄弟选择器

相邻兄弟选择器：#d1+p{color:red} //紧挨着#d1后面的第一个且必须为p的标签，文字颜色变为red

通用兄弟选择器：#d1~p{color:red} //#d1后面所有为p的标签，文字颜色变为red

2、属性选择器，理解下面语句

①[id]{color:red;} ②div[id]{color:red;}

③p[id][class]{color:red;} ④input[type=text]{color:red;}

⑤div[class~=heavy]{color:red;} ⑥[class^=”col-”]{color:red;}

⑦[class*=”col-”]{color:red;} ⑧[class$=”col-”]{color:red;}

3、目标伪类target使用

html 点我跳转到div

字体颜色发生变化

css #dd:target{ color:red;}

4、元素状态伪类 ①enable ②disable ③checked

5、结构伪类 li:first-child{color: red;}与li{color: red;} 区别

                       li:last-child{color: red;}

                      li:nth-child(2){color: purple;}

6、否定伪类 li:not(:first-child){color:red;}

7、伪元素选择器 p:first-line

             p:first-letter

             p.article:first-letter{color: #FF0000;}

This is a paragraph in an article。

8、使用伪元素选择器实现内容生成

标签内容区域前插入文字：标签:before{content:“插入的内容”;}

标签内容区域前插入图片：标签:before{content:url(…);}

标签内容区域后插入文字：标签:after{content:“插入的内容”;}

标签内容区域后插入图片：标签:after{content:url(…);}

9、使用选择器插入项目编号

元素:before{content:counter(计数器);}

元素{counter-increment:content属性值中所指定的计数器名称}

使用计数器来计算编号，计数器可以任意命名，除了使用计数器还需要在元素的样式中追加对元素的(counter-increment)属性指定为content属性值中所指定的计数器名称。
p:before{content: "第"counter(number)“章、”;}

p{counter-increment: number;}

10、CSS Hack 针对不同浏览器编写不同的CSS文件

①CSS类内部hack：在样式属性名或值前后增加前后缀识别不同浏览器

用法 ：div{color:red\9\0;} div{-color:red;}

-:IE 6 +:IE 6,7 \0:IE 8,9,10 \9\0:IE 9,10

②头部引用Hack

③主流浏览器内核及属性前缀

  CSS3中的属性大多需要加这些前缀，否则无法出现效果，

11、webkit内核的Chrome和Safari使用CSS3属性大都需要加上-webkit-前缀，最好把其余前缀的都重写一遍

12、转换：改变元素在页面中的大小，位置，形状，角度的一种方式

①2D转换

移动 transform:translate(50px,50px);/translateX(),translateY()/

缩放 transform:scale(2); /scaleX(),scaleY()/

旋转 transform:rotate(45deg);

旋转原点transform-origin:left top; /也可以用百分比transform-origin:20% 40%;/

倾斜 transform:skew(45deg); /skewX(),skewY()/

多种效果同时实现transform:translate(100px,100px) scale(2) rotate(5deg) skewY(45deg);

            transform-origin:right top;

②3D转换

3D位移：包括translateZ()和translate3d()两个功能函数；
3D旋转：包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3D缩放：包括scaleZ()和scale3d()两个功能函数；

③利用3D转换制作一个正方体

12、过渡 过渡设置简写 transition:

property（要使用过渡效果的属性）

duration（过渡时长）

timing-function（过渡时间速率|ease慢快慢| linear匀速|ease-in-out慢快慢|ease-in慢快|ease-out快慢）

delay（过渡延时）

案例 HTML：

   CSS：

div{

   width: 200px;height: 200px;

   background-color: purple;

   transition: transform 3s;

  }

div:hover{ transform: translateX(400px) rotateY(90deg) rotate(360deg); }

13、动画

①声明

第一种声明：@keyframes 动画名称{

0%{动画开始时的样式} 50%{动画中间时的样式} 100%{动画结束时的样式}

}

0%时也可以用from，100%用to

第二种声明：@keyframes 动画名称{

from{动画开始时的样式} to{动画结束时的样式}

}

②调用（一般在hover中调用，如果想页面一运行就有，在元素的样式中调用）

animate:name(调用的动画的名称)

duration(动画完成一个周期的时间)

timing-function（过渡时间速率|ease慢快慢| linear匀速|ease-in-out慢快慢）

play-state(规定动画是播放还是暂停，paused暂停，running播放)

iteration-count(规定播放次数n infinite一直循环播放)

14、CSS代码优化

①提前定义统一样式，利用CSS的继承性

②尽量缩小样式文件（简写属性，空格回车少些）

③避免样式重写

④代码压缩（使用代码压缩软件）

⑤避免空的src和href，即使是空的，还会请求服务器，#不会