为何要进行属性值的计算
CSS 用于描述元素的外观
思考一下,在不同的时间段内,元素的外观会不会不同?
会,而且是一定的
但是在同一个时间段内的外观呢,不能不同吧!
也可以这样说:当前的外观,是唯一的
那么便要就要问了,这个唯一的外观是什么模样?
放在 CSS 里说:这个元素的样式如何确定?
答案是:依靠属性值的计算
需要注意的是:每一个元素都附加着全部的属性,其中的每一个属性都要有值
属性值的计算过程
分为四个步骤
- 使用唯一值
- 使用层叠值
- 使用继承值
- 使用默认值
使用唯一值时要考虑到所有的样式表
使用层叠值是为了解决有冲突的样式
使用层叠值
- 使用这条在更高来源优先权的 样式表 中带有 重要 描述字眼的样式
- 使用这条在更高来源优先权的 样式表 中描述的 常规样式
- 使用这条 内联样式
- 使用这条在更高优先权的 级联层 中带有 重要 描述字眼的样式
- 使用这条在更高优先权的 嵌套级联层 中带有 重要 描述字眼的样式
- 使用这条在更高优先权的 级联层 中描述的常规样式
- 使用这条在更高优先权的 嵌套级联层 中描述的常规样式
- 使用这条在更加具体的 规则集 中描述的样式
- 使用这条在 源代码 中,位置是否更加靠后的样式
样式表的来源,其优先权高至低的排序结果
重要样式
- 用户代理样式表中的重要样式先于
- 用户样式表中的重要样式先于
- 作者样式表中的重要样式
常规样式
- 作者样式表中的常规样式先于
- 用户样式表中的常规样式先于
- 用户代理样式表中的常规样式
级联层优先权从高到低排序的结果
重要样式
- 先建级联层中的重要样式先于
- 后建级联层中的重要样式
- 未分层样式层中的重要样式
常规样式
- 未分层样式层中的常规样式先于
- 后建级联层中的常规样式先于
- 先建级联层中的常规样式
嵌套级联层优先权从高到低排序的结果
重要样式
- 先建嵌套级联层中的重要样式先于
- 后建嵌套级联层中的重要样式先于
- 未分层嵌套样式层中的重要样式
常规样式
- 未分层嵌套样式层中的常规样式先于
- 后建嵌套级联层中的常规样式先于
- 先建嵌套级联层中的常规样式
级联层的创建方式
一次性创建 多个 具名级联层
创建 单个 具名级联层
创建单个匿名级联层
不在级联层中的样式会集中到 未分层样式层 中,另外
级联层一旦创建,其优先权便会确定
创建 具名级联层 时如果它已存在,不会重复创建
如果之后带有样式,会添加到这个具名级联层中
而匿名级联层因为没有名字,每次创建都是一个新的匿名级联层,另外
嵌套级联层使用点连接来表示
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。