A00 CSS 入门

本阶段目标：独立给一张 HTML 页面写出可读、可控、在窄屏上不出错的样式。

所属：frontend/css / A-入门 ｜ 上一篇：无 ｜ 下一篇：A01-认识CSS与引入方式 ｜ 返回：科目 README

路线图

十篇文档按「怎么写 → 选谁 → 长什么样 → 占多大 → 排在哪 → 实战」推进。

flowchart TD
    S1["A01 认识 CSS 与引入方式"] --> S2["A02 选择器与层叠基础"]
    S2 --> S3["A03 颜色与文字排版"]
    S3 --> S4["A04 盒模型"]
    S4 --> S5["A05 文档流与 display"]
    S5 --> S6["A06 Flex 布局"]
    S6 --> S7["A07 Grid 布局"]
    S7 --> S8["A08 响应式与媒体查询"]
    S8 --> S9["A09 实战给页面加样式"]

    subgraph P1["语法与外观（A01 ~ A03）"]
        S1
        S2
        S3
    end

    subgraph P2["布局（A04 ~ A08）"]
        S4
        S5
        S6
        S7
        S8
    end

    subgraph P3["收口（A09）"]
        S9
    end

图 1 阶段路线图：A01 ~ A03 建立语法与视觉基础，A04 ~ A08 逐层掌握布局，A09 把前八篇合成一张完整页面

能力对照

能力	对应篇目	自检方式
把样式正确接到 HTML 上	A01	三种引入方式各写一次，能说明优先级与适用场景
用选择器精准命中元素	A02	给同一份结构写三条不同选择器，均只命中目标元素
控制文字与颜色的可读性	A03	正文行高与字号搭配合理，正文对比度达到 4.5:1
计算元素的实际占位	A04	给定宽高与内边距，手算出元素最终宽度并与浏览器一致
判断元素在文档流中的位置	A05	说明块级与行内元素换行行为的差异
用 Flex 完成一维排列	A06	三行代码完成水平居中、两端对齐与均分
用 Grid 完成二维布局	A07	用 grid-template-areas 写出三栏布局
让页面在窄屏可用	A08	360 像素宽下无横向滚动，字号不小于 16 像素
独立完成一张页面的样式	A09	交付含页头、卡片列表、页脚的页面，两端对齐无错位

阅读顺序

顺序	篇目	建议时长	必读	说明
1	A01 认识 CSS 与引入方式	40 分钟	是	决定后续调试的基本方式
2	A02 选择器与层叠基础	50 分钟	是	样式不生效的首要原因
3	A03 颜色与文字排版	50 分钟	是	页面信息的载体
4	A04 盒模型	50 分钟	是	尺寸与间距的全部计算基础
5	A05 文档流与 display	40 分钟	是	布局的第一层规则
6	A06 Flex 布局	60 分钟	是	一维排列的首选
7	A07 Grid 布局	60 分钟	是	二维布局的首选
8	A08 响应式与媒体查询	50 分钟	是	移动端可用性的底线
9	A09 实战给页面加样式	90 分钟	是	阶段收口，产出可展示的页面

跳过建议

• 已有其它语言编程经验：A01 只做 3.2 节代码核对，直接进入 A02。
• 只做单页展示页：A08 可只读 3.1 节的断点写法，其余按需。
• 需要出打印稿：补读 C08 的表格部分，并在 @media print 中改用纯色替代渐变（B07 表 5-1）。

阶段出口

• 返回：科目 README
• 术语速查：Z01 术语表
• 下一篇：A01-认识CSS与引入方式