从"标签能看就行"到"样式精准可控"
很多学习者在掌握了 HTML 基础后，发现对 CSS 的理解停留在表面。这门课程专门解决这个缺口：它不仅教你 CSS 的语法，更帮你建立"选择器思维"和"样式优先级"的底层逻辑。 课程从 CSS 简介切入，但很快深入到核心难点。比如 font-size 设置中 em 与 px 的区别，这是实际项目中极易踩坑的地方——em 相对基准值的计算逻辑如果不清晰，后续响应式开发会非常痛苦。接着讲解 font-family 的字体栈写法，以及文本行高、宽度高度等基础属性。这些看似简单，却是构建任何排版的基础。 特别值得注意的是选择器部分。课程覆盖了通用选择器、内联样式优先级等实战内容。很多初学者写 CSS 时经常遇到"样式没生效"的问题，根源往往是对选择器优先级和覆盖规则理解不透彻。通过练习，你能学会如何精确控制哪些元素受样式影响，而不是依赖浏览器默认行为。 这门课程适合已经掌握基本 HTML 结构、准备转向样式美化的学习者。如果你正在备考前端相关认证，或从其他技术栈转岗，这里补齐的是最关键的样式控制能力。 建议先看前三节了解 CSS 是什么、怎么引入外部样式文件，然后重点攻克第二模块的选择器部分。这是从"能用"到"会用"的分水岭。课程配有 practice.css 文件和练习素材，务必跟着视频动手操作，不要只看。特别是优先级练习题，只有自己写出来、调试过，才能真正掌握选择器的权重计算。 学完这套内容后，你应该能独立做什么？首先，能熟练通过 CSS 控制文本样式（字体、大小、颜色、行高等），而不是每次都要查文档。其次，能使用多种选择器精准定位页面元素，理解样式冲突时的覆盖规则。最后，能搭建简单的外部样式表结构，为后续学习 Flexbox、Grid 等布局技术打下坚实基础。 配套资料中有完整的示例文件和练习题，建议把视频中的代码逐行敲一遍，修改参数观察效果变化。CSS 是一门实践性极强的语言，看懂和写对是两回事，只有亲手调过样式，才能在面试和实际工作中快速定位问题。学习顺序与资料用法
课程分为两个主要模块： 1. **CSS 简介**： - 1-1 [css简介] 样式 font color size 字体大小 字体颜色 (20:13) - 1-2 [css简介] 字号 font-size 设置字体大小 em px (45:11) - 1-3 [css简介] 字体 font-family 粗体 斜体 字体 shorthand (28:09) - 1-4 [css简介] 文本 行高 border 高度 宽度 width (17:24) - 1-5 [css简介] 原文 css21 外挂 xml css文件 (24:50) - 1-6 [css简介] style6 历史 css 禅意花园 zengarden (30:26) 2. **CSS 选择器**： - 2-1 [css选择器] style7 选择器上 universal selector (27:00) - 2-2 [css选择器] style8 选择器练习 style css 内联 优先级 (35:08) 建议先从 1-1 开始，了解 CSS 的基本概念和引入方式。然后跳转到 2-1 和 2-2，深入学习选择器和优先级，这是实际应用中最重要的部分。最后，回归 1-6，理解 CSS 的演变及经典案例。 配套资料包括： - **示例文件**：用于练习的 CSS 文件和 HTML 结构文件。 - **练习题**：针对选择器优先级的实战练习，帮助你巩固所学。 务必边学边练，不要只是观看视频。通过实际操作，你才能真正掌握 CSS 的精髓。课程目录
1-1 [css简介] 样式 font color size 字体大小 字体颜色 (20:13) 1-2 [css简介] 字号 font-size 设置字体大小 em px (45:11) 1-3 [css简介] 字体 font-family 粗体 斜体 字体 shorthand (28:09) 1-4 [css简介] 文本 行高 border 高度 宽度 width (17:24) 1-5 [css简介] 原文 css21 外挂 xml css文件 (24:50) 1-6 [css简介] style6 历史 css 禅意花园 zengarden (30:26) 2-1 [css选择器] style7 选择器上 universal selector (27:00) 2-2 [css选择器] style8 选择器练习 style css 内联 优先级 (35:08) 2-3 [css选择器] 9级联 cascading cascade css style important import 优先级 (31:38) 3-1 [property] 10 盒子模型 box model margin padding border (29:27) 3-2 [property] 11 盒子间距 margin padding 行内元素 (21:09) 3-3 [property] 12位置 position static relative absolute fixed (22:41) 3-4 [property] style13洛书 乾坤 天地 阴阳 定位 数字幻方 紫禁 (35:55) 3-5 [property] 14普通流 text-align vertical-align 文本对齐 垂直对齐 (18:43) 3-6 [property] 15浮动 float 左浮动 有浮动 清除 clear 坍塌 首字下沉 (32:04) 3-7 [property] 16画廊 领奖台 凹凸曼浮动的练习 六道轮回 (35:00) 3-8 [property] 17案例-构建实例 比例 像素 fix 很固定定位 浮动定位 (35:28) 3-9 [property] 18河图 很定位 固定定位 成比例 河图 木火土金水 (23:24) 3-10 [property] 19区别 display position float 显示 很 相 (30:12) 3-11 [property] 20 z-index z序 z轴 坐标 覆盖 叠放 关系 (15:57) 3-12 [property] 21空杯 容器 containing block 容纳 div (38:23) 3-13 [property] 23行高 line-height 垂直对齐 vertical align 行内 (31:45) 3-14 [property] 22计算 width colapse 塌陷 宽度计算 margin border (14:01) 3-15 [property] 24宽度 width max-width min-width 最大宽 (21:27) 3-16 [property] 25视觉 visibility clip 裁切 可见性 隐藏 overflow 溢出 (31:57) 3-17 [property] 26 添加内容 after before 伪类 content 添加内容 (17:11) 3-18 [property] 27 列表 list listitem 列表项 ol ul counter 计数器 (17:00) 3-19 [property] 28 背景 background 重复 attachment position (24:53) 3-20 [property] 29 文本 首行缩进 text indent 文本原样显示 字符间距 (34:32) 3-21 [property] 30 文本的练习 段落间距 版式设计 设计构成 (38:33) 3-22 [property] 31表格 table td tr tbody thead tfoot (40:19) 3-23 [property] 32界面 color 系统颜色 鼠标 cursor outline 外轮廓 (23:09)
