前言：为什么需要 CSS？
在早期，网页的“内容”和“样式”是混在一起的。想改 100 个标题的颜色，就得改 100 次 HTML 代码，简直是噩梦。
1996 年，CSS（层叠样式表） 诞生，彻底解决了这个问题。 如果把网页比作建房子：
- HTML 是“搭骨架”：决定哪里是墙、哪里是门（内容结构）。
- CSS 是“搞装修”：决定墙刷什么漆、地板铺什么砖（视觉外观）。
核心优势：结构与样式分离。样式写一次，全站复用，极大地提升了维护效率。
核心 1：怎么把 CSS 用到网页里？（3 种方式）
要让 CSS 生效，必须把它和 HTML 关联起来。按推荐程度排序：
| 方式 | 写法示例 | 适用场景 | 推荐指数 |
|---|---|---|---|
| 1. 外部样式表 | <link rel="stylesheet" href="style.css"> | 实际项目必备。一个 CSS 文件搞定全站样式，修改一次全网生效。 | ⭐⭐⭐⭐⭐ |
| 2. 内部样式表 | 在 HTML 的 <head> 里写 <style> p { color: red; } </style> | 单页面临时测试。不需要新建文件，但代码无法跨页面复用。 | ⭐⭐⭐ |
| 3. 内联样式 | <p style="color: green;">文字</p> | 极不推荐。样式和标签死死绑定，后期改起来让人崩溃。 | ⭐ |
实战演示
<!DOCTYPE html>
<html>
<head>
<!-- 1. 外部样式表：通过 link 标签引入外部的 style.css 文件 -->
<link rel="stylesheet" href="style.css">
<!-- 2. 内部样式表：直接写在 head 里的 style 标签中 -->
<style>
h1 { color: blue; }
</style>
</head>
<body>
<!-- 3. 内联样式：直接写在标签的 style 属性里 -->
<p style="color: green;">这是一段绿色的文字</p>
</body>
</html>
核心 2：CSS 语法公式 —— “选谁” + “怎么改”
CSS 的语法非常像下达指令，核心公式是：选择器 { 属性: 值; }
/* 这是一个 CSS 注释，浏览器会忽略它 */
p {
color: red; /* 声明：把文字颜色（属性）改成红色（值） */
font-size: 16px; /* 注意：必须用冒号分隔，分号结尾！ */
}
关键零件：选择器（我要改谁？）
最常用的 3 种基础选择器：
| 选择器类型 | 语法 | 作用 | 示例 |
|---|---|---|---|
| 元素选择器 | 标签名 | 选中所有同名标签 | p { color: red; } (所有段落变红) |
| 类选择器 | .类名 | 选中带有特定 class 的元素（最常用，可复用） | .box { background: yellow; } |
| ID 选择器 | #ID名 | 选中带有特定 id 的元素（全页唯一，不可复用） | #header { font-size: 20px; } |
实战演示：HTML 与 CSS 的配合
<!-- HTML 骨架 -->
<p>我是普通段落</p>
<p class="highlight">我是高亮段落（带 class）</p>
<div id="footer">我是底部区域（带 id）</div>
/* CSS 装修 */
p { color: #333; } /* 元素选择器：所有 p 标签变深灰 */
.highlight { background: yellow; } /* 类选择器：带 class="highlight" 的背景变黄 */
#footer { font-size: 14px; } /* ID选择器：带 id="footer" 的字号变小 */
核心 3：万物皆盒子 —— CSS 盒模型 (Box Model)
这是 CSS 最核心的概念：网页里的每一个元素（段落、图片、按钮），本质上都是一个矩形盒子。
从内到外，盒子分为 4 层：
- Content（内容区）：文字或图片本身占据的核心区域。
- Padding（内边距）：内容与边框之间的“缓冲带”（比如让文字不贴着边框）。
- Border（边框）：盒子的外壳（可以设置粗细、颜色、实线/虚线）。
- Margin（外边距）：盒子与其他盒子之间的距离（用来推开别人）。
💡 通俗理解：想象一个装在快递箱里的易碎品。 物品本身是 Content，包裹物品的防震气泡膜是 Padding，纸箱纸板是 Border，两个快递箱之间的距离是 Margin。
实用技巧：方向简写 (Shorthand)
设置 padding 或 margin 时，经常需要指定上下左右。CSS 提供了一行搞定的“顺时针简写法”（上 ➡️ 右 ➡️ 下 ➡️ 左）：
| 简写代码 | 实际含义 | 记忆口诀 |
|---|---|---|
padding: 10px; | 上下左右全是 10px | 1个值：全包圆 |
padding: 10px 20px; | 上下 10px，左右 20px | 2个值：上下、左右 |
padding: 10px 20px 30px; | 上 10px，左右 20px，下 30px | 3个值：上、左右、下 |
padding: 10px 20px 30px 40px; | 上、右、下、左（顺时针） | 4个值：顺时针转一圈 |
(注：margin: 0 auto; 是一个经典技巧，表示上下外边距为 0，左右自动平分，能让盒子水平居中。)
🚀 总结
今天你掌握了 CSS 的三大基石：
- 引入方式：知道该把 CSS 写在哪里（首选外部样式表）。
- 基础语法：学会用“选择器”精准定位元素，用“属性: 值;”修改样式。
- 盒模型：看透网页布局的本质，学会用 Margin 和 Padding 控制间距。
