module 02 · css 基础 · 第 9–16 课
目标一句话：从「能看」到「好看」，掌握样式系统与盒模型，建立可维护的设计感。
// module 02
// 模块二 · 第 09 课
选择器 { 属性: 值; } · 注释写法给第 8 课的个人页挂上外部样式表 style.css，完成前 5 条样式：背景色、字体、字号、行高、内容区最大宽度并居中。
验收：页面无内联样式；样式表路径正确；改一行 CSS 刷新后页面有变化。
// 模块二 · 第 10 课
p.hl（连写）· 并集 h1, h2（逗号·也叫分组）· 后代 nav a（空格）· 子代 nav > a为第 8 课页面里的导航、卡片、按钮添加类名并写样式，要求类名可读、能看懂它管什么。
验收：不使用 id 写样式；类名用英文小写 + 短横线；同一元素上复用类（如 btn btn-primary）。
// 模块二 · 第 11 课
:hover :focus :active :first-child :nth-child(even)::before ::after 与 content!important 为什么是危险动作① 5 道优先级判断题（给代码问最终颜色）；② 给按钮加 hover 效果和 ::before 小图标装饰。
验收：能口述算出权重；伪元素有 content；不使用 !important。
这节课的目标是一句话：让学生能自己回答「为什么我的样式没生效」。
// 模块二 · 第 12 课
--color-primary 与 var()为页面定义 8 个 CSS 变量（主色、文字三档、背景、边框等）与一套字号阶梯（14 / 16 / 18 / 24 / 32 / 48），并在页面中全部引用变量。
验收：样式表里不出现硬编码颜色；改一个变量，全站生效。
// 模块二 · 第 13 课
text-align / decoration / transform / indentline-height 与可读性（正文 1.5–1.8）· letter-spacing / word-spacingwhite-space 与换行控制-webkit-line-clamp完成一段图文排版：正文字号 16px、行高 1.7；做一处单行溢出省略（长标题）与一处两行溢出省略（简介）。
验收：省略号成功出现；调整窗口宽度时截断位置正确。
单行省略三件套：overflow: hidden + white-space: nowrap + text-overflow: ellipsis，少一个都不生效。
// 模块二 · 第 14 课
box-sizing: border-box 为什么是行业默认选择margin: 0 auto 居中用盒模型复原一个按钮和一个卡片；分别用 content-box 与 border-box 各做一次，写下两次的实际尺寸差异。
验收：能算出 width:100px + padding:20px 在两种模式下的真实宽度。
经典坑：宽度写 100% 再加 padding 导致横向溢出 —— 根因就是没设 border-box。
// 模块二 · 第 15 课
background：color / image / repeat / position / size / 多重背景border-radius 圆角与胶囊按钮box-shadow 多层阴影营造层次 · text-shadowlinear-gradient / radial-gradient · background-clip: text做 3 个不同风格的卡片（例如：极简白、渐变霓虹、深色悬浮），用圆角、阴影、渐变各组合一次。
验收：阴影有三层以上参数（偏移 + 模糊 + 透明色）；渐变方向正确；卡片视觉上"有层次"。
// 模块二 · 第 16 课 · 阶段实战
// module 02 · summary
style.css —— 外部样式表，页面无内联样式关键要求是「结构不动、只改样式」——让学生亲身体会结构与表现是分开的，同一个骨架换一套 CSS 就是另一种风格。