如何添加 CSS
规则写得再漂亮，如果浏览器根本没有加载它，页面也不会有任何变化。这一课我们讲怎样把 CSS 接入 HTML：常见的三种方式，以及哪一种应该成为你的默认选择。
怎样向 HTML 页面添加 CSS？
有三种方式：在 head 里用 link 引入的外部样式表，写在 head 里的内部 <style> 块，以及直接加在某个元素上的内联 style 属性。做真实网站或多页面项目时，建议从独立的 .css 文件开始。
三种方式一览
动手之前，先用这张表选好方式。后面每种方式都会配一个简短示例。
📊 添加 CSS 的方式
| 方式 | 写在哪里 | 能否跨页面复用 | 日常最佳用途 |
|---|---|---|---|
| 外部样式表 | 独立的 .css 文件，加上 head 里的 <link> |
很好 | 项目和本课程的默认选择 |
| 内部 CSS | HTML head 中的 <style> … </style> |
只限当前页面 | 快速演示、单文件练习 |
| 内联 CSS | 某个 HTML 元素上的 style="…" |
不能 | 临时的一次性小改动（尽量少用） |
外部样式表（推荐的默认方式）
把 HTML 和 CSS 分开放在两个文件里。在 head 中用 link 元素指向样式表，浏览器就会下载这个 CSS 文件并应用其中的规则。
引入外部样式表
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="hero">Styled from styles.css</h1>
</body>
</html>把规则写进与 HTML 文件放在一起的 styles.css（如果文件在子文件夹里，记得把 href 改成对应路径）：
外部 styles.css
css.hero {
color: #0f766e;
font-family: Georgia, serif;
}为什么真实项目更适合外部样式表
- 一个样式表可以同时管理很多 HTML 页面的外观
- 想改外观时，不用在一堆标签里翻找样式
- 浏览器可以缓存
.css文件，切换页面时不必重新下载 - 一定要写
rel="stylesheet"和正确的href。路径哪怕拼错一点，浏览器也不会报错，页面只会悄悄变成没有样式的样子
内部 CSS（head 中的 <style>）
只有一个练习页面时，可以把规则直接写在 head 里的 <style> 元素中。前面的“简介”和“语法”两课就是这样做的，这样 HTML 和 CSS 都在同一个文件里。
内部 style 块
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — Internal CSS</title>
<style>
.hero {
color: #1d4ed8;
}
</style>
</head>
<body>
<h1 class="hero">Styled from a style block</h1>
</body>
</html>什么时候用内部 CSS 就够了
演示，或是要求只交一个文件的作业，用内部 CSS 完全没问题。但项目一大就不够用了：把同一个 <style> 块复制到每个页面里，时间久了各份代码会渐渐不一致，改一处就得改很多处。只要页面超过一个，或者你想让代码结构更清晰，就换成外部文件。
内联 CSS（style 属性）
内联方式是把声明（declaration）直接写在元素的 style 属性里。这里没有选择器，也没有单独的文件，只有这一个元素会受影响。
内联 style 属性
html<h1 style="color: #b45309; font-size: 1.75rem;">Styled inline</h1>请少用
内联样式很适合临时快速试一下效果，但它把外观混进了 HTML 结构里，没法复用；等你遇到 cascade（层叠）和 specificity（优先级）的问题时，它还很难被覆盖。更好的做法是在样式表里用 class。关于 cascade 中冲突的处理规则，后面的课程会讲；现在只需记住：内联是例外，不是习惯。
到底该选哪一种？
- 做网站，或者做本课程的项目： 外部样式表
- 课堂上的一个简短演示文件： 内部
<style>可以接受 - 调试时想临时改一下某个元素： 内联样式能帮上忙，改完再把规则搬回样式表
三种方式可以混用。同一个属性在多个地方都设置了值，浏览器会按 cascade 规则决定用哪一个（后面会讲）。有个好习惯：长期使用的样式都放在外部文件里，不要把同一个属性分散写在三种方式中。
自己动手试试
- 在同一个文件夹里创建
howto.html和styles.css。 - 在
howto.html的 head 中加入<link rel="stylesheet" href="styles.css">，并在 body 中写一个标题：<h1 class="hero">How-to practice</h1>。 - 在
styles.css中写入：.hero { color: #0f766e; }，然后用浏览器打开这个 HTML 文件。 - 把颜色改成
#1d4ed8，保存 CSS 文件后刷新页面，标题颜色应该会变。 - 临时在
h1上加上style="color: #b45309;"，刷新查看效果，然后删掉这个属性，让颜色重新由样式表决定。
常见错误
- 习惯性地把
<link rel="stylesheet" …>放进 body。它应该放在 head 里，和文档的其他元信息放在一起 href拼写错误（比如把styles.css写成style.css），文件根本加载不到，页面就没有样式- 忘了在
link元素上写rel="stylesheet" - 把完整的
<style>块粘贴到每个页面，而不是共用一个外部文件 - 所有颜色和字体都靠内联
style来设置，结果 HTML 越来越乱，难以维护
小结
- 三种方式：外部样式表、内部
<style>、内联style属性 - 真实页面的默认做法是：在 head 中用
<link rel="stylesheet" href="…">引入外部文件 - 内部 CSS 适合单文件练习，内联样式只用于偶尔的一次性改动
- 路径写错或漏掉
rel，是样式“不起作用”的常见原因 - 练习方法：引入一个真实的
.css文件，改一个值，然后刷新页面
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部