CSS 教程
CSS 是「层叠样式表」（Cascading Style Sheets）的缩写，负责网页的「皮肤」：颜色、字体、间距、布局，都靠它来定义。
如果说 HTML 是网页的骨架，那 CSS 就是给骨架穿上好看的衣服。学完 HTML 和 JavaScript 之后补上 CSS，前端三件套就集齐了。
学习目标
学完本章，你将能够：
- 理解 CSS 的作用，学会三种引入方式
- 熟练使用 CSS 选择器选中页面元素
- 掌握颜色、字体、文本的常用写法
- 理解盒模型，算得清元素的宽高与间距
- 用 display 与定位控制元素的排布
- 掌握 Flex 弹性布局，搞定大多数页面布局
- 了解 Grid 网格布局，做二维排版
- 完成综合练习，给个人主页穿上 CSS
学习路线
| 章节 | 核心内容 |
|---|---|
| 1. CSS 是什么 | CSS 简介、三种引入方式 |
| 2. 选择器与优先级 | 基本选择器、复合选择器、优先级 |
| 3. 颜色与文本样式 | 颜色表示法、字体、对齐排版 |
| 4. 盒模型 | content、padding、border、margin |
| 5. 布局：display 与定位 | 块/行内元素、文档流、position |
| 6. Flex 弹性布局 | 主轴对齐、弹性伸缩、常见套路 |
| 7. Grid 网格布局 | 行列划分、网格区域、二维排版 |
| 8. 综合练习：个人主页美化 | 给 HTML 教程的主页穿上 CSS |
学习建议
- 边写边看：CSS 的效果直接反映在页面上，每写一条规则都刷新看看
- 一次只改一处：定位问题最快的办法是逐条增删规则，观察变化
- 背下盒模型：margin / border / padding / content 的关系贯穿全教程
准备好了吗？从 第 1 章：CSS 是什么 开始吧！