A09 实战给页面加样式

摘要：把前八篇的规则合成一份可交付的样式表，是入门阶段的收口动作。本文以 HTML 科目的个人主页为对象，按「设计令牌 → 排版 → 布局 → 组件 → 响应式」五步加样式，产出单文件 CSS，并给出八项验收与五项取舍记录。
关键词：样式表结构，设计令牌，布局，组件样式，验收

所属：frontend/css / A-入门 ｜ 上一篇：A08-响应式与媒体查询 ｜ 下一篇：B00-总结 ｜ 返回：A00-总结

1 引言

零散地给元素加样式，一周后没人能说清哪条规则起效。可维护的样式表需要固定顺序：变量在前、基础排版其次、布局再次、组件最后、响应式收尾。

本文按这个顺序给一张页面加样式。范围见表 1-1。

项	本文覆盖	本文不覆盖
结构	CSS 文件的五段组织	构建与压缩（C05）
内容	排版、布局、卡片、导航、页脚	动画与主题切换（B05、D03）
质量	响应式、对比度、无横向滚动	打印样式

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
素材	HTML 科目的 index.html（含 header/main/footer）	可直接复用
前置	A01 ~ A08	八篇均需读过
文件	css-practice/styles/main.css	编码 UTF-8

3 原理与实现

3.1 五段结构

样式表按依赖顺序分段，后段可以引用前段的变量，如图 3-1 所示。

flowchart LR
    A["1 变量<br/>:root"] --> B["2 基础排版<br/>body / h1 / p / a"]
    B --> C["3 布局<br/>header / main / footer"]
    C --> D["4 组件<br/>卡片 / 标签 / 导航"]
    D --> E["5 响应式<br/>@media"]

图 3-1 样式表的五段结构

图上可见：变量必须最先声明，组件样式依赖变量；响应式放最后，覆盖前面的布局值。

3.2 完整样式表

/* 运行环境：Chrome 130+；css-practice/styles/main.css */

/* 1 变量 */
:root {
  --ink: #0f172a;
  --ink-muted: #475569;
  --surface: #ffffff;
  --surface-alt: #f1f5f9;
  --brand: #1d4ed8;
  --radius: 0.75rem;
  --space: 1rem;
}

/* 2 基础排版 */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--surface);
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.3; margin-block: 1.5rem 0.5rem; }
h2 { font-size: 1.35rem; margin-block: 2rem 0.75rem; }
p { margin-block: 0 1rem; max-width: 42em; color: var(--ink-muted); }
a { color: var(--brand); }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* 3 布局 */
.container { max-width: 68rem; margin-inline: auto; padding-inline: var(--space); }
header { border-block-end: 1px solid #e2e8f0; }
header nav ul { display: flex; gap: var(--space); list-style: none; padding: 0; margin: 0; }
footer { border-block-start: 1px solid #e2e8f0; margin-block-start: 3rem; padding-block: 1.5rem; color: var(--ink-muted); font-size: 0.875rem; }

/* 4 组件 */
.card {
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.cards { display: grid; grid-template-columns: 1fr; gap: var(--space); }

.tag { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-size: 0.8125rem; }

/* 5 响应式 */
@media (min-width: 40rem) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .container { padding-inline: 2rem; }
}

五段的职责与常见错误见表 3-1。

段	职责	常见错误
变量	颜色、圆角、间距的统一出口	组件里写死颜色值
基础排版	全局字号、行高、默认间距	在组件里重复设置字体
布局	容器宽度、页头页脚结构	用固定宽度写死容器
组件	卡片、标签、按钮	组件样式依赖页面层级
响应式	断点覆盖	断点写在前面导致被覆盖

4 验证与讨论

1. 把 index.html 的 link 指向 styles/main.css，刷新，确认页面排版生效。
2. 在设备工具栏从 360 拖到 1440，确认卡片列数 1 → 2 → 3。
3. 检查 360 像素宽下无横向滚动，图片不撑破卡片。
4. 用取色器核对正文与背景对比度不低于 4.5:1。

序号	验收项	判定标准	依据
1	排版	正文 16 像素、行高 1.7	A03
2	盒模型	卡片加内边距后宽度不变	A04
3	布局	页头导航水平排列、卡片网格对齐	A06、A07
4	响应式	三档列数	A08
5	无横向滚动	360 像素宽下无滚动条	A08
6	图片	最大宽度 100%，带圆角	A08
7	对比度	正文 ≥ 4.5:1	A03
8	变量复用	全文件颜色仅出现在 :root	3.2 节

项目实施中的五项取舍见表 4-1。

决策点	采用方案	备选方案	不选的理由
样式组织	单文件五段	按组件拆多个文件	页面少时单文件更易核对
单位	rem 为主	全用 px	相对单位更适配用户字号设置
间距	CSS 变量 --space	各处手写数值	统一改动点，避免拼凑
布局	Grid 卡片 + Flex 导航	全用 Flex	二维网格用 Grid 代码更短
断点	40rem 与 60rem 两档	按机型写四档	两档覆盖主流宽度，维护成本低

讨论与局限。 单文件在页面超过五个后难以定位，届时应按 B06 的自定义属性与 C02 的分层方案拆分。另本样式表未处理打印与深色模式，这两项分别在 C04 与 D03 展开。

5 常见问题

现象	原因	处理
页面无样式	link 路径错误	按 Network 面板核对
卡片宽度不一致	未用 minmax(0, 1fr)	改轨道定义
窄屏仍三列	媒体查询写在基础样式前	移动优先，断点放最后
颜色改动要改多处	组件内写死颜色	全部收进 :root
图片下方有缝隙	图片默认行内，基线留空	display: block

6 结论

序号	结论	依据
1	样式表按变量 → 排版 → 布局 → 组件 → 响应式组织	图 3-1
2	颜色只出现在变量段	表 3-1
3	网格与 flex 各负责一个维度	表 4-1
4	验收按清单逐项执行，不靠目测	表 4-1（验收）

• 上一篇：A08-响应式与媒体查询
• 下一篇：B00-总结
• 返回：A00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · 组织 CSS，https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing（访问于 2026-10-31）
[2] CSS Custom Properties for Cascading Variables，W3C，https://www.w3.org/TR/css-variables-1/（访问于 2026-10-31）