CSS究竟是怎么工作的
- 浏览器载入HTML文件
- 将HTML文件转换成一个DOM(Document Object Model),DOM是文件在计算机内存中的表现形式
- 接下来,浏览器会拉取该HTML相关的大部分资源,比如嵌入到页面的图片、视频和CSS样式
- 浏览器拉取到CSS之后会进行解析,根据选择器的不同类型(比如element、class、id等等)把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器,将不同的规则(基于选择器的规则,如元素选择器、类选择器、id选择器等)应用在对应的DOM节点中,并添加节点依赖的样式(这个中间步骤称为渲染树)
- 上述的规则应用于渲染树之后,渲染树会依照应该出现的结构进行布局
- 网页展示在屏幕上(着色)
关于DOM
- 一个DOM有一个树形结构,标记语言中的每一个元素、属性以及每一段文字都对应着结构树的一个节点
- DOM案例:
<p>
Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>
在这个DOM中,
元素对应了父节点,它的子节点是一个text节点和三个对应了元素的节点,SPAN节点同时也是他们中的Text节点的父节点。
P
├─ “Let’s use:”
├─ SPAN
| └─ “Cascading”
├─ SPAN
| └─ “Style”
└─ SPAN
└─ “Sheets”
上图就是浏览器怎么解析之前那个HTML片段——它生成上图的DOM树形结构并将它按照如下输出到浏览器:
Let's use: Cascading Style Sheets