一、CSS3概念知识点
1、概念
CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。
2、优点
CSS3将完全向后兼容,之前的CSS2语法依旧能使用,无需修改之前的代码,
而是增添了新的选择器和属性,可以实现一些新的效果,也能够让之前的一些比较复杂的效果有一个更简单的书写方式。
3、渐进增强和优雅降级
渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级 graceful degradation
一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容
区别:
优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看,同时保证其根基处于安全地带
二、CSS3选择器
*1、层级选择器
(1)E F 包含选择器 选中E下边所有层级中的F
(2)E>F 子选择器 选中E下边第一层的F
(3)E+F 相邻兄弟选择器 E后边第一个兄弟,如果是F,则选中
(4)E~F 通用选择器 选中E后边所有的同级F
2、属性选择器(常用于表单)
*(1)E[attr] 选中E中拥有属性attr的标签
*(2)E[attr='value'] 选中E中属性名为attr,属性值为value的标签
*(3)E[attr~='value'] 选中E中属性名为attr,属性值为多个或一个,其中一个为value的标签
补充:
(4)E[attr^='value'] 选中E中属性名为attr,属性值以value开头的元素
(5)E[attr$='value'] 选中E中属性名为attr,属性值以value结尾的元素
(6)E[attr*='value'] 选中E中属性名为attr,属性值包含value关键字的元素
(7)E[attr|='value'] 选中E中属性名为attr,属性值为value或者value-开头的元素
3、结构伪类选择器
*(1)E F:first-child E下边第一个子元素,如果是F则选中
*(2)E F:last-child E下边最后一个子元素,如果是F则选中
*(3)E F:nth-child(n) E下边的第n子元素,如果是F则被选中
——even 偶数
——odd 奇数
——2n+1 奇数
——2n 偶数
——2n-1 奇数
补充:
(4)E F:only-child E下边仅有一个子元素,而且是F时被选中
(5)E:root 匹配文档的根元素,根元素永远是HTML
(6)E:empty 匹配为空的E(有空格和换行都不算为空)
4、目标伪类选择器(用于锚记效果)
E:target 当E元素处于超链接锚记选中状态下被选中
*5、否定伪类选择器
E:not(F) 选中所有的E,除了满足条件F的
6、用户行为选择器
E:focus 当表单元素获取到焦点时被选中(多用于表单)
7、动态伪类选择器(当元素处于某种状态时被选中)
E:link 超链接初始状态被选中
E:visited 超链接访问后被选中
E:hover 元素划过时被选中
E:active 超链接激活时被选中
注意:超链接需要按照以下顺序书写四种状态才能都生效link-visited-hover-active lvha(驴哈)
8、UI状态伪类选择器(多用于表单)
E:enabled 选中表单元素E中可用的标签
E:disabled 选中表单元素E中不可用的标签
E:checked 选中表单元素E中,被勾选的标签
9、UI状态为元素选择器
E::selection 修饰E中处于高亮状态的部分
三、CSS3新增属性
1、文字阴影属性 text-shadow
text-shadow:水平阴影偏移量 垂直阴影偏移量 模糊距离 阴影颜色;
参数1 水平阴影偏移量 正数向右,负数向左
参数2 垂直阴影偏移量 正数向下,负数向上
参数3 模糊距离 只支持正数,需要带单位px
参数4 阴影颜色
文字阴影的多阴影写法
text-shadow:第一组参数,第二组参数,第三组参数....;
2、盒子阴影属性 box-shadow
box-shadow:水平阴影偏移量 垂直阴影偏移量 模糊距离 阴影大小(可以省略) 阴影颜色 内外阴影(可以省略);
参数1 水平阴影偏移量 正数向右,负数向左
参数2 垂直阴影偏移量 正数向下,负数向上
参数3 模糊距离 只支持正数,需要带单位px
参数4 阴影大小(可以省略) 正数,上下左右都增大;负数,上下所有都缩小
参数5 阴影颜色
参数6 内外阴影(默认为外阴影,也可以省略) inset为内阴影
3、边框圆角 border-radius
属性值为圆角半径,每个圆角都是有两个半径形成的。
在正方形中,由于宽度和高度一样,即正方形宽度一半/高度一半,那么我们可以得到一个圆形
在长方形中,由于宽高不一致,我们在写50%时,/前后的数值不一致,例如50px/100px,我们能够得到一个椭圆形
在长方形中,如果我们让/前后数值一致,例如50px/50px,则能得到一个胶囊形状。
总结:
需要圆形则写一个正方形,然后border-radius:50%;
需要椭圆形则写一个长方形,然后border-radius:50%;
需要胶囊型则写一个长方形,然后border-radius:宽度的一半或者高度的一半;
补充:边框的多参数写法(从左上角,顺时针给参数)
一个参数 4个方向圆角
两个参数 左上右下、右上左下
三个参数 左上、右上左下、右下
四个参数 左上、右上、右下、左下