B00 CSS 进阶

本阶段目标：让样式表在多人协作与长期维护下仍然可控——改一处只影响一处，加一段不破坏一段。

所属：frontend/css / B-进阶 ｜ 上一篇：A09-实战给页面加样式 ｜ 下一篇：B01-层叠继承与优先级 ｜ 返回：科目 README

路线图

八篇沿「规则怎么算 → 数值怎么选 → 元素怎么叠 → 状态怎么选 → 动效怎么做 → 变量怎么管 → 背景怎么画 → 字体怎么加载」推进。

flowchart TD
    B1["B01 层叠继承与优先级"] --> B2["B02 单位与数学函数"]
    B2 --> B3["B03 定位与层叠上下文"]
    B3 --> B4["B04 伪类与伪元素"]
    B4 --> B5["B05 变换过渡与动画"]
    B5 --> B6["B06 自定义属性与主题"]
    B6 --> B7["B07 背景渐变与滤镜"]
    B7 --> B8["B08 字体与网络字体加载"]

    subgraph P1["规则与数值（B01 ~ B03）"]
        B1
        B2
        B3
    end

    subgraph P2["选择与表现（B04 ~ B06）"]
        B4
        B5
        B6
    end

    subgraph P3["视觉资源（B07 ~ B08）"]
        B7
        B8
    end

图 1 进阶阶段路线图：B01 ~ B03 解决规则计算与层叠，B04 ~ B06 解决状态选择、动效与主题化，B07 ~ B08 解决背景与字体两类视觉资源

能力对照

能力	对应篇目	自检方式
预测一条声明最终取值	B01	给定三层规则，能说出哪条生效及原因
按场景选择单位	B02	字号用 rem、间距用 rem、横幅用 clamp()
控制元素叠放顺序	B03	不使用 z-index: 9999 也能让弹层在导航之上
用状态选择器替代类名堆叠	B04	表单错误态由 :invalid 驱动，无额外类名
做出不卡顿的过渡与动画	B05	只动 transform 与 opacity，无布局抖动
用变量管理主题	B06	切换 data-theme 后全站配色变化，组件样式不变
用多层背景与渐变完成遮罩与分区	B07	一张卡片只用一层 background-image 完成遮罩 + 图案
让毛玻璃在不被支持时自动降级	B07	不支持 backdrop-filter 时切换为不透明背景
控制网络字体的加载与跳动	B08	限速下可见回退字体先行，替换时布局偏移可控

阅读顺序

顺序	篇目	建议时长	必读	说明
1	B01 层叠继承与优先级	60 分钟	是	覆盖失效的根因集中在这里
2	B02 单位与数学函数	50 分钟	是	决定响应式是否平滑
3	B03 定位与层叠上下文	60 分钟	是	弹层与吸顶的实现基础
4	B04 伪类与伪元素	50 分钟	是	减少类名与额外标签
5	B05 变换过渡与动画	60 分钟	是	动效质量与性能
6	B06 自定义属性与主题	50 分钟	是	主题化的唯一可控方式
7	B07 背景渐变与滤镜	55 分钟	是	遮罩、条纹与毛玻璃
8	B08 字体与网络字体加载	50 分钟	是	首屏空白与布局跳动

跳过建议

• 只做单页静态页面：B03 可只读 3.1 节，其余按需。
• 不需要动效：B05 可后置，但 prefers-reduced-motion 一节必须读。
• 只用系统字体：B08 可只读 3.1 节与表 3-1。

阶段出口

• 返回：科目 README
• 术语速查：Z01 术语表
• 下一篇：B01-层叠继承与优先级