CSS（层叠样式表，Cascading Style Sheets）是用于控制网页外观和格式的语言。它与HTML结构内容分离，使开发者可以更灵活地控制网页的展示方式。下面是CSS的核心原理系统介绍：

一、CSS 的基本作用

CSS的主要目标是控制网页中 HTML 元素的样式和布局，包括颜色、字体、大小、边距、位置、动画等。

二、CSS 工作原理概述

1. 选择器匹配

浏览器首先会根据 HTML 文档结构构建 DOM 树（文档对象模型），然后根据 CSS 构建 CSSOM（CSS 对象模型）。CSS 选择器用于匹配 DOM 树中的元素，比如：

1

h1 { color: red; }

这个选择器会把所有 <h1> 元素匹配出来。

2. 样式应用

浏览器将 DOM 和 CSSOM 合并，生成 渲染树（Render Tree），这棵树中包含了所有需要显示的元素和它们的样式信息。

3. 层叠（Cascading）

多个规则可能作用于同一个元素。CSS 通过“层叠规则”决定使用哪个样式。主要遵循以下原则：

• 优先级（specificity）：更具体的选择器优先级更高。
• 来源（author、user、browser）：作者样式通常高于用户代理样式。
• 重要性（important）：!important 的规则将覆盖普通规则。
• 顺序：相同优先级的规则按出现顺序后写的覆盖前写的。

4. 继承

某些属性（如字体、颜色）可以从父元素继承而来；而有些（如边框、宽度）不会自动继承。

5. 计算样式（Computed Style）

浏览器根据选择器和层叠规则，计算出每个元素的最终样式。

三、CSS 样式的表现形式

• 内联样式：<div style="color: red;">
• 内部样式表：在 HTML 文件的 <style> 标签中
• 外部样式表：通过 <link rel="stylesheet" href="style.css"> 引入外部 .css 文件

CSS 被解析为 CSSOM（CSS Object Model）树的过程，和 HTML 解析为 DOM 类似，都是自顶向下逐层处理的结构解析过程。下面是一个系统化的解释：

CSSOM（CSS Object Model）是浏览器将 CSS 样式规则解析后的对象表示形式。它以树状结构组织，描述了页面上所有 CSS 样式的规则和属性，供后续渲染和计算使用。

CSSOM 解析流程详解

CSSOM 的解析过程大致分为以下几个步骤：

1. 读取样式表

浏览器会收集所有的样式来源：

• <style> 标签中的内部样式
• <link> 引入的外部样式表
• HTML 元素上的 style 属性（虽然它不属于 CSSOM，但影响最终样式）
• 浏览器默认样式（user agent stylesheet）

2. 词法分析（Lexing）

将 CSS 文本拆解为一个个“词元（token）”，类似于：

1
2
3
4

h1 {
  color: red;
  font-size: 20px;
}

被分解为 token 流：

1

IDENT(h1), {, IDENT(color), :, IDENT(red), ;, IDENT(font-size), :, DIMENSION(20px), ;, }

这一步类似将句子分解为单词。

3. 语法分析（Parsing）

接下来，浏览器使用这些 token 构建一个结构化的数据结构（语法树），也称为规则树（Rule Tree）。这一步会生成对应的样式规则节点，如：

1
2
3
4
5
6
7

{
  selector: "h1",
  declarations: [
    { property: "color", value: "red" },
    { property: "font-size", value: "20px" }
  ]
}

这就是 CSSOM 树中的一个节点。

4. 构建 CSSOM 树

每个解析出的规则都会作为 CSSOM 树的一个节点，按照样式表结构组织。多个样式表合并后，浏览器形成完整的 CSSOM 树，用于后续样式计算。

CSSOM 树不会包含每个 HTML 元素，只表示样式规则和选择器。

CSSOM 示例结构（可视化）

1
2
3
4
5
6
7
8

/* style.css */
h1 {
  color: red;
  font-size: 24px;
}
p {
  color: blue;
}

解析后的 CSSOM 可以简化为如下结构（伪代码）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

[
  {
    "selector": "h1",
    "declarations": [
      {"property": "color", "value": "red"},
      {"property": "font-size", "value": "24px"}
    ]
  },
  {
    "selector": "p",
    "declarations": [
      {"property": "color", "value": "blue"}
    ]
  }
]

CSSOM 与 DOM 结合

CSSOM 不直接作用于页面，而是与 DOM 一起构成 渲染树（Render Tree）。浏览器通过选择器匹配规则，查找哪些 DOM 元素匹配哪些 CSSOM 规则，然后将样式附加到 DOM 元素上，生成渲染树用于布局和绘制。

总结 CSSOM 构建流程图（文字简版）

1

CSS 源码 → 词法分析（Tokens） → 语法分析（Rules） → CSSOM 树

CSS 被解析为 CSSOM（CSS Object Model）树的过程，和 HTML 解析为 DOM 类似，都是自顶向下逐层处理的结构解析过程。下面是一个系统化的解释：

四、CSS 常用特性分类

五、CSS 渲染流程总结图（文字版）

1. HTML -> 解析为 DOM 树
2. CSS -> 解析为 CSSOM 树
3. DOM + CSSOM -> 合并成 Render Tree
4. Render Tree -> 布局（Layout）
5. Layout -> 绘制（Paint）
6. Paint -> 显示在屏幕上（Composite）