第 5 周：什么是样式？

重点：样式与结构分离——HTML 管"是什么"，CSS 管"长什么样"。本周沿三条主线走：CSS 是以字符为最小单元的排印系统（是什么）；靠选择器加规则的解析模式兑现，规则是面向对象风格的（浏览器怎么实现）；如今已长成可编程的样式语言（现代重构）。 边界：定位与布局归第 6 周；本周只做文本流内的排版。 课前工具：devtools 基础——本周起请养成"改了就看、看了再改"的习惯，Elements 面板就是样式的试验台。

全章地图：三条主线

• 主线一 排印模式（是什么）：CSS 的基因是印刷排版，最小样式单位是字符。排版属性为何随继承传递（正文是连续的字符流）、em 的参照物为何是字号、图片画布为何只能部分控制（内容不是字符），都从这一条生长出来；第 6 周的行框与内联排版，是它的运行时形态
• 主线二 选择器+规则的解析模式（怎么兑现）：规则是面向对象风格的——一条规则像给一批元素的外观定义，选择器像对象查询，级联是指令冲突的裁决协议。浏览器把 CSS 解析成 CSSOM，从选择器最右端逐元素匹配，沿裁决链取值
• 主线三 可编程 CSS（现代重构）：变量、函数、派生配色进了原生标准，值是算出来的；SCSS 完成历史使命转为方言

出场次序上主线二打头：排印篇要先会读写规则与选择器，解析模式是它们的先修。任何一条 CSS 代码的解剖刀是"三问"（选中谁、下什么指令、谁说了算），完整展开在 CSS基础 一篇。

概念

1. CSS基础 — 主线二骨架：样式与结构分离、规则语法与面向对象风格、浏览器解析（CSSOM 与匹配方向）、裁决链与 normalize
2. 伪类、伪元素与内容生成 — 主线二续篇：设计时与运行时——静态的类/元素/内容由作者写定，动态三样（伪类、伪元素、内容生成）由浏览器运行时算出或造出；:has() 反查
3. 字体 — 主线一：字形是字符的物质形态，渲染发生在客户机——回退机制、@font-face、可变字体与图标字体
4. 排印 — 主线一本体：印刷术类比、度量单位（px/em/rem/vw）、行高字距与段落
5. 现代CSS语法 — 主线三：值是算出来的——变量、函数、派生配色、SCSS 的历史角色
6. 设计规范 — 尾声：DESIGN.md（Google Stitch 提出的开放规范）——把样式决策落成 AI 常驻读的文件，令牌给值、规则给用法；与 UI 术语手册的词汇表/词典分工

习题

• 习题
• 测验（在线自测，提交即见答案与解析）

作业

• 个人项目接入样式：建一个样式表，把主题色、间距收进 :root 变量，并实现深浅主题切换