层叠:浏览器对多个样式来源进行叠加.最终确定一个结果.

层叠是CSS的核心机制.

样式来源: 多大

其实 CSS 来源有5个,但是开发人员只能接触到3个.

1. 浏览器默认样式表:

不设置任何样式,那么显示在浏览器上. b 粗体 p 有纵向 margin h1 字号比p 大一倍… .这些就是浏览器默认样式, 浏览器默认样式级别最低,一旦别的地方设置乐样式标签.浏览器得样式就被冲掉. 各个浏览器 默认样式是不一样的. 我们在写CSS 时, 都会设置  *{maigin:0; padding:0;} 者就是因为浏览器兼容性问题. 干脆全部设成0 ,这样各个浏览器就统一了.

一直认为 浏览器本身认识各种 html标签. 根据规则设置 标签样子. 如: p 是 block ul 有 margin left h1 粗体…

以前认为这些和css 无关. 是浏览器自己干的. css 设置样式 是加载之后又渲染的…. 这种想法是错误的!

浏览器 加载html 之后 只 生成了一个 dom 树. 浏览器 把 html 变成 dom树结构 就完成了对html的结构化.

后面 对视图的 渲染 p block br 那是整合 css 之后的事情. 浏览器整合css 又是另外一个路线. 和解析html 是分开的. 这里的 css 就包含了浏览器的默认样式.

一句话,浏览器将载入的html变为dom树,但是此时没有任何显示样式。所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式。

2. 用户样式表

一些新闻/小说网站.
网页设置里面.可以看到 字体大小,背景颜色 设置

浏览器也有这样的设置. 比如chrome → settings → Font size 这里的设置.会 覆盖浏览器默认的样式

4. <style> 中编写的样式代码. head中

5. <a style=’’> 中编写的样式代码 body中.

只有后面三个 是网页开发者可以修改的

层叠的规则

由于样式有很多 来源, 浏览器在加载样式时,需要计算出最终的样式值.才能显示正确的界面效果. 浏览器会通过 叠加&覆盖 两种方式来生成最终的样式值

比如 第一个样式 设置了 font-weight 没设置 color 第二个样式 没设置 font-weight 设置了 color → 最终 会把各个零散的整合在一起. font-weight & color 都有.

如果 第一个样式设置了 color blue. 第二个样式设置了 color red. 那么 浏览器会让后加载的样式者覆盖前者. 但是有个特殊情况: !important 带有这个标记的权限最高. span {color:red !important;} 无论别的css来源怎么设置span的颜色. 始终是red.