一、样式表是什么

CSS = Cascading Style Sheets = 层叠样式表。 三个词：

沿用 4.2 那个装修的类比：

二、一条规则长什么样

样式表的本体就是一条条规则，每条规则只有两段：

h1 {
  color: #333333;
  font-size: 24px;
}

┌───────── 选择器（管谁）
│    ┌──── 声明块（长什么样）
h1 {
  color: #333333;   ← 一条"声明"，由「属性: 值」组成
  font-size: 24px;  ← 每条声明以分号结尾
}

属性名基本都是英文的，很好猜：color（颜色）、font-size（字号）、background（背景）、margin（外边距）、padding（内边距）。

最容易犯的低级错误：忘了分号、忘了闭括号、属性名拼错（font-size 写成 fontsize）——CSS 不会报错给你，它只会默默忽略那一条（这一点和 4.2 讲的"浏览器容错"是同一种脾气）。

三、选择器：怎么"点中"那个元素

HTML 那边要配合挂"抓手"，CSS 这边才能点中它：

几条实战要点：

• HTML 里的 class 可以挂多个（空格分隔）：<p class="note big"> —— 这个段落同时享受 .note 和 .big 两套规矩
• class 是"共用款"，id 是"身份证"：同一个 class 可以挂在几十个元素上，同一个 id 一页只能出现一次。所以样式首选 class，id 主要用于"页面内的锚点跳转"和脚本定位
• 选择器写错，规则就静默失效——最常见的是"类名拼错"或"HTML 里忘了写 class"。这类问题的排查靠 F12（第九节）

四、三种写法：样式写在哪

引入外部样式表的那一行（写在每个页面的 head 里）：

<link rel="stylesheet" href="style.css">

五、层叠：打架了谁说了算

同一元素可能被好几条规则管着，这时按三层顺序依次比：

第 ③ 条正是 Cascading（层叠）这个词的字面意思：规则像一张张贴纸一层层叠上去，后面的盖住前面的。

顺带说清"继承"

有些属性会自动往下传给子元素，有些不会：

为什么这样分？ 因为文字的样式"设一次、全篇生效"是好事（所以 body { font-family: ... } 一设，整页字体统一）；而盒子的样式要是也继承，内外边距会一层层叠加，页面直接崩掉。

六、盒模型：CSS 里的一切都是盒子

这是 CSS 最该先建立的心智模型：每个元素都在一个矩形盒子里，这个盒子从里到外有四层。

（对应上面第二张图）

width: 200px;  padding: 20px;  border: 5px;

* { box-sizing: border-box; }

七、跟着 4.1 的两条线走一遍

① 每份 CSS 都是一次请求（收 4.1）

<link rel="stylesheet" href="style.css">

页面里有这一行，浏览器就要多下载一个文件——这就是 4.1 说的"一次打开网页 = 几十上百次请求"里的一项。

但这个费用是一次性的：CSS 文件不常变，浏览器会把它缓存起来（收 4.1 的缓存命中）。第二次访问同一个网站，这个文件不用再下——所以"结构表现分离"的真实账本是：第一次多花一次请求，之后每次都省下重画的功夫。

② 浏览器拿到 CSS 之后干了什么

第 2 步就是"被划掉的规则"的来源：如果一条规则被更高优先级的盖住了，浏览器不是删掉它，而是记录下来但不用它——所以 F12 里你能看见它带一条删除线（第九节亲手看）。

八、为什么值得这么麻烦：复用

（对应上面第一张图）

九、动手 Demo40：给 4.2 的网页穿上衣服

1. 在 mysite 里新建 style.css，抄进去：

body {
  font-family: sans-serif;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}
h1 { color: #333333; }
.note {
  background: #f5f5f0;
  border-left: 4px solid #999;
  padding: 12px;
}
a:hover { color: red; }

2. 在 index.html 的 <head> 里加上那一行（放在 <title> 下面）：

<link rel="stylesheet" href="style.css">

3. 刷新页面——立刻变了样：内容居中、有了留白、标题颜色变深。 到 F12 → 网络（Network） 面板刷新一次：多了一条 style.css 的请求（这就是 4.1 说的那笔账，亲眼看一遍）。

4. 看"谁赢了"（本节第五节的可视化） F12 → 元素（Elements） 面板 → 点中 <h1> → 右侧 Styles 区会列出所有管着它的规则。 - 带删除线的 = 被更高优先级覆盖的规则（第五节第 ② ③ 条） - 从上往下读，最上面那条生效的就是赢家

5. 现场改，别改文件 在 Styles 面板里直接改颜色值 → 页面立刻变，但硬盘上的 style.css 一个字没变（刷新就还原）。 （这和 4.2 里"在元素面板改文字"是同一个道理：你在改浏览器内存里的那份结果，不是文件。）

6. 体验"复用" 在 index.html 的 body 里再加一段：<p class="note">这是一段提示文字。</p> 刷新——背景和左边框自动就有了。再回 style.css 把 .note 的背景色改一下，两处同时变。 这就是本节图一画的"一份样式表管多个页面"的最小版本。

7. 30 秒实验：亲手制造一场"打架" 在 style.css 里按顺序写下三条（.note 的要在后面）：

p { color: red; }
.note { color: blue; }

现在给 <p class="note"> —— 蓝色赢（类 > 元素）。 再给那个 <p> 加上行内式 style="color: green;" —— 绿色赢（行内 > 全部）。 最后把 CSS 里的 .note 挪到 p 前面，行内式删掉 —— 红色赢（同权重，后写的赢）。

十、常见误区

1. ❌ "CSS 也是编程语言" → 它是声明式的样式描述：没有逻辑控制、不"执行"、不"算"，只是列清单（现代 CSS 有变量与少量计算，但本质仍是"描述长什么样"）
2. ❌ "class 和 id 随便用哪个都行" → class 是共用款（可挂多个元素、可挂多个类），id 是身份证（一页只能一个）。样式首选 class，id 留给锚点和脚本
3. ❌ "行内样式优先级高，所以最方便" → 它无法复用：200 个元素各写一遍，改色时得一个个翻（4.2 的老坑）。首选永远是外部样式表
4. ❌ "样式没生效 = 我写错了" → 先查两件事：是不是被更高优先级盖住了（F12 里带删除线）、选择器有没有命中（类名拼错 / HTML 里忘写 class）
5. ❌ "设了 width: 200px 就是 200px 宽" → 默认只算 content，还要加上 padding 与 border；用 box-sizing: border-box 一劳永逸
6. ❌ "所有样式都会往下继承" → 只有文字类属性继承（颜色、字号、字体），边框、内外边距、背景不继承
7. ❌ "CSS 分得越细越多文件越专业" → 每个文件都是一次请求（收 4.1）；拆分要在"可维护"和"请求数"之间权衡
8. ❌ "改了 CSS 刷新却没变" → 又是浏览器缓存（收 4.1 / 4.2），Ctrl + F5 强制刷新

十一、动手自测

十二、下一步学什么

• ☑ Web网站的地址（URL） —— 本节把“外观”那一层讲完了（选择器 / 层叠 / 盒模型）。下一站：把地址这一层讲透——URL 的六段怎么拆、每段归谁管，以及那个最容易吃暗亏的点："你写的和真正发出去的不是同一串字符"（百分号编码）。

相关笔记

• 制作Web网页（HTML） —— 上一节：HTML 只管内容与结构，"表现"交给谁？本节来接手
• Web网站是如何构建的（Web网站） —— "网页四件"里 CSS 那一格的展开；本节也印证了"每个文件都是一次请求"的账
• 用TCP对数据进行分割处理（序列号、ACK号） —— 一个 CSS 文件在网络里同样要被切段、传输、拼回
• 通信过程中所使用的语言（网络架构） —— 应用层对话的实物：HTTP 传 HTML，也传 CSS
• 网络的电话簿（域名解析、主机名、DNS） —— 缓存老账：改了 CSS 刷新没变，先怀疑缓存而不是自己的代码
• 运行和管理服务器（服务器、云服务、内部部署） —— 门房每次把 CSS 也当成一个普通文件发出去，它并不"懂"样式