Web前端学习—基础篇(17)_CSS的三大特性是什么、特性都有什么内容
前端学习——基础篇
四、CSS学习
4.7、css三大特性
一、继承性
子元素继承父元素的样式
- 不是所有的属性都能被继承(width、height、background、padding、border、margin、text-decoration)
- 可以继承的属性(部分):
- 字体系列属性
- font-family属性 字体
- font-size属性 字号
- font-weight属性 加粗
- font-style属性 文字样式
- line-height属性 行高
- 文本系列属性
- text-align 属性 文本水平对齐方式
- text-indent属性 文本首行缩进
- text-transform属性 字母大小写转换
- letter-spacing属性 字间距
- word-spacing属性 词间距
- color属性 文字颜色
- list-style属性 列表符样式
- 字体系列属性
- 作用
定义公共样式;可以精简代码,降低代码复杂度
a标签自带文字颜色,不会继承父元素的文字颜色,因此要改变a标签的文字颜色必须设给a标签
二、优先级
样式引入方式优先级
- 行间样式优于内部和外部样式
- 内部样式和外部样式就近原则
选择器优先级
- 选择器优先级与权值相关
- 权值
- 基础选择器的权值:通配符选择器(0)、标签选择器(1)、class选择器(10)、id选择器(100)
- 复合选择器权值是所有单一选择器权值的累加
- 权值越大优先级越高;权值相同,后写的会覆盖先写的
- 继承样式没有权值,权值比0小,子元素设置样式会覆盖继承样式
- 行间样式权值(1000),优于id选择器
- !important优于行间样式,拥有最高优先级
width: 200px !important;
- 伪类选择器(10)、属性选择器(10)、伪元素选择器(1)
三、层叠性
样式冲突:
存在优先级问题,优先级高的显示;不存在优先级,后写的会覆盖先写的
样式不冲突:
样式叠加,并同时作用在内容上