CSS 教程 / 内联、内部与外部 CSS：应用方法和路径排错

您可以通过元素的 style 属性、HTML 文档中的 style 元素，或链接的外部样式表来应用 CSS。外部样式表通常更容易在多个页面之间维护，而其他方法适用于较小的特定用途。

比较三种应用 CSS 的方法

三种方法都应用 CSS。普通的内部和外部规则根据层叠规则竞争，包括它们的选择器和来源顺序；外部文件本身并不天然较弱。内联声明通常优先于普通作者样式表声明，但像 !important 这样的条件会改变这种比较。有关更多详细信息，请参见 CSS 继承、选择器优先级与层叠。

编写内联和内部样式

在内联样式中，你将声明写在要装饰的元素的style属性中。不包括选择器或外部大括号。下面的代码只为一段提示文字指定了颜色和背景。

<p style="color: #087f5b; background-color: #e9f7ef;">
  We open at 9 a.m. every day.
</p>

在内部样式表中，包括选择器和大括号的规则写在head中的style元素中。具有相同类名的多个元素可以用一个规则进行装饰。在下面的示例中，HTML类值是notice，CSS选择器是.notice。

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>

这两个示例都是 HTML 片段，用于比较它们的书写位置。在此练习中更改方法时，请移除之前方法中设置的相同属性声明。同时保留多种方法会使区分连接失败和规则冲突变得困难。

链接外部样式表

创建一个空的 garden 文件夹，并保存以下三个文件：CSS 文件只包含 CSS，不包括 <style> 标签。两个 HTML 文件都链接同一文件夹中的 style.css。

garden/
├─ index.html
├─ visit.html
└─ style.css

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <a href="visit.html">View visitor information</a>
</body>
</html>

visit.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visitor Information</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Visitor Information</h1>
  <p class="notice">Bring a water bottle and comfortable shoes.</p>
  <a href="index.html">Return to the garden introduction</a>
</body>
</html>

style.css

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet" 表示连接的文件是一个样式表，href="style.css" 是要读取的文件的位置。在 HTML5 文档中，在常规 CSS 连接中无需单独写 type="text/css"。这个直接打开本地文件的练习，不需要服务器或额外的库。

当你在浏览器中打开 index.html 时，你会看到一个绿色的标题和一个浅色的信息框。点击 View visitor information（查看访客信息）即可进入 visit.html，虽然内容不同，但标题颜色和信息框的样式相同。如果将 style.css 的标题颜色改为 #1d4ed8，然后重新加载两个页面，两个标题都会变为蓝色。这就是使用公共文件的优势。

为文件夹结构选择一个路径

下面的路径是根据 HTML 文档的位置来读取的。如示例所示，前提是一个普通文档，其基础 URL 尚未被 base 元素替换。如果你移动 CSS 文件，你必须不仅更改文件名，还要更改 href。

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

对于最后一个文件夹的排列，在 pages/index.html 中编写 <link rel="stylesheet" href="../css/style.css">。../ 路径片段表示向上一级目录。网页路径使用正斜杠。像 /css/style.css 这样的前导斜杠从站点根目录解析，并且与此本地文件的相对路径含义不同。参见 MDN：开始使用 CSS。

诊断加载、匹配和级联问题

1. 首先，检查文件连接。检查扩展名是否未保存为 .css.txt，并确保 href 与实际文件夹位置匹配。部署到服务器时，路径中的文件名还可能区分大小写，应与实际文件保持一致。如果页面在 Web 服务器上打开，可以在开发者工具的 Network（网络）面板中检查 CSS 请求和响应。本地文件可能不会显示相同的 HTTP 状态码。
2. 验证目标元素是否正确。在 HTML 中是 class="notice"，但如果在 CSS 中写为 .notcie，即使文件正常读取，提示文字的样式也不会改变。在开发者工具的 Elements（元素）面板中查看实际类名，再到 Styles（样式）面板确认匹配的规则。
3. 检查规则是否被覆盖。如果之后另一个颜色声明生效，原始声明可能会在 Styles 中显示删除线。请单独检查最终应用的规则，而不要与缺失的 CSS 文件问题混淆。

要检查样式表是否加载，请暂时在其末尾添加 body { background-color: #fff4cc; } 并刷新页面。黄色页面表示文件已连接。然后检查提示文字的选择器是否匹配，以及是否有其他声明生效。之后请删除临时规则。!important 无法修复缺失的文件或拼写错误的选择器。更多详情，请参见 使用开发者工具检查 CSS：Styles 与 Computed。