01-认识css3
什么是css3?
CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性,弥补了CSS2的众多不足之处,使得 Web开发变得更为高效和便捷
css3现状
浏览器支持程度差,需要添加私有前缀
移动端支持优于PC端
不断改进中
应用相对广泛
如何对待css3兼容问题?
渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
02-属性选择器
li[style]:li标签中有style属性既满足条件
li[class=red]:li标签中class属性的值必须是red
li[class*=red]:li标签中只要包含red
li[class^=blue]:li标签中以blue开头的
li[class$=blue]:li标签中以blue结尾的
03-兄弟选择器
.first + li:.first下面相邻的li元素,如果不是li元素就不起作用
.first ~ li:.first下面所有的li元素会起作用
04-伪类选择器
li:first-child:li的父元素的第一个子元素,如果第一个子元素的类型为li起作用,如果不是li,不起作用
li:last-child:li的父元素的最后一个子元素,如果最后一个子元素的类型为li起作用,如果不是li,不起作用
li:first-of-type:li的父元素的第一个子元素,如果第一个子元素不是li,自动跳过,继续查找,一直查找到第一个li元素
li:last-of-type:li的父元素的最后一个子元素,如果最后一个子元素不是li,自动跳过,继续查找,一直查找到最后一个li元素
li:nth-child(5):查找到索引为5的(索引从1开始),如果类型不是li,索引也会计算
li:nth-child(even):查找到索引为偶数的,如果类型不是li,索引也会计算
li:nth-child(odd):查找到索引为奇数的,如果类型不是li,索引也会计算
li:nth-of-type(even):产找到索引为偶数的,如果类型不是li,索引不会计算
li:nth-of-type(odd):产找到索引为奇数的,如果类型不是li,索引不会计算
li:nth-of-type(n):n取值0~子元素的长度,表达式最后的结果如果小于=0 无效的
li:empty:代表li的父元素的子元素下面没有任何内容的元素,连空格都没有
05-伪元素
普通的所有标签都会有before、after,input、img单标签是没有的
::before:默认在普通标签的左面
::after:默认在普通标签的右面
content:放置内容的,并且必须是有的
默认是行内元素,想设置宽高,转化为块元素,display:block;float、position
06-其他伪元素
::first-letter:设置首字母
::first-line:设置文本第一行的样式
::selection:设置当前选中的内容的样式
07-文本阴影的使用
text-shadow:2px 1px 1px red;
第一个值:设置文本阴影横向的偏移
第二个值:设置文本阴影纵向的偏移
第三个值:设置文本阴影虚化程度
第四个值:设置文本阴影的颜色
文本阴影是可以设置多层的,用逗号隔开即可
08-盒模型
我们在给元素设置宽和高的时候,默认,宽高是内容的宽高
box-sizing:border-box
宽高是设置盒子的实际的宽高,不会被padding、border给撑开,并且内容,会变小,因为padding和border向里撑开
box-sizing:content-box
设置内容的宽高,会被padding、border给撑开,content-box也是默认状态
09-边框圆角
border-radius:10px;这样是设置四个角都有效果
border-radius:10px 20px;
第一个值:左上、右下
第二个值:右上、左下
border-radius:10px 20px 30px;
第一个值:左上
第二个值:右上、左下
第三个值:右下
border-radius:10px 20px 30px;
第一个值:左上
第二个值:右上
第三个值:右下
第四个值:左下
圆:设置圆角的宽高的一般
半圆:高度设置一半,圆角设置,左上和右上即可