外部样式表

Created: November-22, 2018

通过在每个 HTML 文档中放置 <link> 元素，可以将外部 CSS 样式表应用于任意数量的 HTML 文档。

<link> 标签的属性 rel 必须设置为 stylesheet，href 属性设置为样式表的相对或绝对路径。虽然使用相对 URL 路径通常被认为是良好的做法，但也可以使用绝对路径。在 HTML5 中，可以省略 type 属性。

建议将 <link> 标记放在 HTML 文件的 <head> 标记中，以便在样式元素之前加载样式。否则，用户将看到一些无格式的内容。

例

你好，world.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>

style.css 文件

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}

确保在 href 中包含 CSS 文件的正确路径。如果 CSS 文件与 HTML 文件位于同一文件夹中，则不需要路径（如上例所示），但如果将其保存在文件夹中，则将其指定为 href="foldername/style.css"。

<link rel="stylesheet" type="text/css" href="foldername/style.css">

外部样式表被认为是处理 CSS 的最佳方式。这有一个非常简单的原因：当你管理一个 100 页的网站时，所有网站都由一个样式表控制，并且你希望将链接颜色从蓝色更改为绿色，这样可以更容易地进行更改在你的 CSS 文件中，让所有 100 个页面中的更改级联，而不是进入 100 个单独的页面并进行相同的更改 100 次。同样，如果你想彻底改变网站的外观，你只需要更新这个文件。

你可以根据需要在 HTML 页面中加载任意数量的 CSS 文件。

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">

CSS 规则适用于一些基本规则，顺序很重要。例如，如果你有一个 main.css 文件，其中包含一些代码：

p.green { color: #00FF00; }

所有带有 green 类的段落都将以浅绿色写入，但你可以使用另一个 .css 文件覆盖它，只需将其包含在 main.css 之后即可。你可以使用以下代码的 override.css 跟随 main.css，例如：

p.green { color: #006600; }

现在所有带有绿色类的段落都将以深绿色而不是浅绿色写入。

其他原则适用，例如’！important’规则，特异性和继承。

当有人第一次访问你的网站时，他们的浏览器会下载当前页面的 HTML 以及链接的 CSS 文件。然后当他们导航到另一个页面时，他们的浏览器只需要下载该页面的 HTML; CSS 文件已缓存，因此无需再次下载。由于浏览器缓存外部样式表，因此页面加载速度更快。