HTML CSS
你已经用 style 属性和颜色值做过小范围外观调整。真实网站很少把每条设计规则都写在每个标签上。CSS（Cascading Style Sheets）是描述外观与感受的语言。本课聚焦 HTML 如何用三种常见方式加载 CSS——还不是搭建完整设计系统。当你知道规则放在哪里、浏览器如何找到它们时，再学字体、间距和布局就会轻松得多，也不会把页面结构与视觉混在一起。把本课想成 CSS 的“插座”：能量（规则）只有在连接正确时才会到达。
CSS 在这里做什么？
HTML 负责内容结构。CSS 描述呈现：颜色、间距、字体，以及你稍后会深入的布局思路。HTML 页面可以在一个元素上携带少量 CSS 声明，在文档内放一小段样式表，或指向单独的 .css 文件。选对位置能让演示更快，也让真实项目更易维护。若没有有意识的选择，你要么把同一个 style="..." 复制几十次，要么发现页面“丢了样式”——其实只是文件路径错了。现在掌握加载方式，能在规则变多时少花许多排查时间。
直接回答
用元素上的 style="..." 做行内 CSS，适合快速试验。用通常放在 <head> 里的内部 <style>...</style> 块，适合单页练习。当许多页面应共享同一外观时，用 <link rel="stylesheet" href="styles.css"> 链接外部 .css 文件。一旦你在意复用和干净的 HTML，就优先用外部 CSS。课堂演示里行内和内部都很好；多页面站点里在每个文件重复相同规则，会使维护变慢且不一致。本课目标是自信地接好三种方式，而不是背一整本 CSS 属性目录。
三种方式一览
📊 添加 CSS 的三种方式
| 方法 | 位置 | 最适合 |
|---|---|---|
| 行内 | 标签上的 style 属性 | 很小的一次性测试 |
| 内部 | head 中的 style 元素 | 单页演示 |
| 外部 | .css 文件 + link | 整站共享样式 |
行内 CSS（提醒）
行内 CSS 活在一个元素上。它很适合三十秒的实验，却不适合整个网站，因为每个重复的外观都要再复制一遍。你在样式与颜色课里已经见过这个思路：立刻看到效果很方便，但同一色调或尺寸出现在十处时就难更新。把行内当成实验室，而不是架构。规则稳定后，把它移到内部块或外部文件，让 HTML 描述内容而不是设计。
行内 CSS 提醒
html<p style="color: teal;">一个元素上的行内 CSS</p>行内何时仍然有用
- 快速检查一种颜色或尺寸
- 讲授此前课程中的 property:value 思路
- 学习时的临时覆盖——然后把规则移到样式表
不要只用行内属性搭建整个多页面品牌。那条路很难更新：每次品牌调整都要四处寻找分散的属性。在团队里，行内还会掩盖站点的“真实”外观，因为.css与 HTML 中的规则可能在没有明显警告的情况下互相矛盾。
head 中的内部 CSS
内部样式表是一个 <style> 元素，保存当前 HTML 文件的 CSS 规则。初学者通常把它放在 <head>，以便在 body 内容之前声明样式。这样浏览器更早找到规则，文档也更清晰：结构在 body，外观在 head 声明。内部 CSS 适合在同一页练习多条规则、还不想管理单独文件时——但它仍被锁在这一个 HTML 里。
head 中的内部 CSS
html<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
p { color: navy; }
</style>
</head>
<body>
<p>This paragraph uses the style block.</p>
</body>
</html>阅读内部示例
style元素装的是 CSS，不是页面结构的 HTML 标签p { color: navy; }表示“本文档中所有p元素获得藏青色文字”- 一条规则可以给许多段落加样式，而无需在每个标签上重复
style="..." - 内部 CSS 仍被锁在这一个 HTML 文件里——除非你复制该块，其他页面看不到它
还要注意属性style（标签上的行内）与元素<style>（规则块）的差别。名字相似，角色不同。无意混用会让初学者读代码更吃力。
用 link 的外部 CSS
外部 CSS 把规则放在诸如 styles.css 的文件里。HTML 用 link 元素连接到该文件。这是共享站点样式的常见模式。一个文件可以服务首页、联系页和博客——改一次标题颜色，所有已链接页面都会跟上。要让它生效，rel 与 href 必须正确；HTML 不会自己“猜”样式表在哪里。
外部样式表链接
html<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>外部 CSS 生效必须满足什么
link需要rel="stylesheet"，浏览器才知道这是样式关系href必须用正确路径指向真实的 CSS 文件（参见文件路径一课）- 在
styles.css里写诸如p { color: navy; }和h1 { color: darkgreen; }的规则 - 若路径错误，HTML 仍会打开——但看起来没有样式
第一次练习把 CSS 文件放在 HTML 旁边；等路径感觉扎实后再试子文件夹。典型错误是：在正确文件夹创建了styles.css，却在href里写了略有不同的名字——大小写、少了连字符或文件夹不对。看起来像“CSS 坏了”，其实是连接问题，不是规则语法问题。
选择方法
问一问样式需要“走”多远：
- 在一个元素上做快速实验 → 行内
- 一个练习页、几条规则 →
head里的内部<style> - 许多页面、同一共享外观 → 外部
.css+link
以后进入完整 CSS 课程时，外部样式表会成为真实项目的默认选择。本 HTML 课确保你能正确接好它们。不必“永远只选一种方法”：可以在演示里从内部开始，等页面变成站点时再把相同规则移到外部文件。规则语法（p { color: navy; }）不变；变的只是存放位置以及 HTML 如何加载它们。
在编辑器中练习
- 创建带有一个标题和两段文字的
page.html。 - 创建
styles.css：一条规则给h1上色，另一条给p加样式。 - 在 HTML 的
head中加入<link rel="stylesheet" href="styles.css">。 - 打开页面。若没有样式，检查路径和
rel。 - 临时重命名或移动
styles.css，刷新，看到失败，再修好href。 - 可选：把一条规则移到内部
<style>块中并对比。
故意弄断链接，比只读文字更快学会路径错误。还要确认你刷新的是浏览器里打开的同一个page.html——改一个文件却刷新另一个，是经典失误：磁盘上的 CSS 是对的，页面却仍显得“没有样式”。
导致页面无样式的失误
- 在
link上忘记rel="stylesheet" - 把
styles.css放在别的文件夹，却按它在 HTML 旁边来链接 - 用行内
style填满每个标签，而不是共享一份样式表 - 习惯把巨大的
<style>块丢在body末尾，而对初学者来说head更清晰 - 编辑了 CSS 文件，却刷新了与你链接的不同的 HTML 文件
这些错误的视觉症状相同：页面能打开、文字可见，但没有预期外观。重写规则之前先检查连接——往往规则是对的，坏在加载。
小结
- CSS 为 HTML 加样式；HTML 可用行内、内部或外部方式加载 CSS
- 行内
style适合小测试，不适合整个站点 head中的内部<style>适合单文件练习- 外部
.css加上link rel="stylesheet"是常见的共享做法 - 正确的文件路径与 CSS 规则本身同样重要
- 优先选择与样式复用范围相匹配的方法
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部