原文： External CSS Stylesheets – How to Link CSS to HTML and Import into Head

将你的 CSS 样式表放在一个外部文件中，被认为是一种最佳做法。那么，你如何将这些 CSS 链接到你的 HTML 文件呢？

链接到外部 CSS 文件是任何基本 HTML5 模板的一个重要部分。在这篇文章中，我们将学习如何做到这一点。

如何将一个 CSS 文件链接到一个 HTML 文件中

你可以通过在你的 HTML 文件的 head 元素中添加一个 link 元素，将你的 CSS 文件链接到你的 HTML 文件，就像这样：

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
    
    </body>
</html>

link 元素有很多用途，指定正确的属性很重要，这样你就可以用它来导入外部 CSS 样式表。我们现在就来看看一些重要的属性。

rel 属性

两个不可缺少的属性中的第一个是 rel 属性。你将用这个属性来告诉浏览器与导入的文件是什么关系。

你要写 rel="stylesheet"，告诉浏览器你正在导入一个样式表。

href 属性

第二个不可缺少的属性是 href 属性，它指定了要导入的文件。

一种常见的情况是，CSS 文件和 HTML 文件在同一个文件夹中。在这种情况下，你可以写 href="style.css"。

如果 CSS 文件和 HTML 文件在不同的文件夹里，你需要写出需要从 HTML 文件到 CSS 文件的正确路径。

例如，一种常见的情况是，CSS 文件在一个文件夹中，该文件夹与 HTML 文件同级，像这样：

project --- index.html
            css ---------- style.css

在这种情况下，你需要写一个类似 "css/styles.css" 的路径。

type 属性

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

你使用 type 属性来定义你所链接的内容的类型。对于一个样式表，这将是 text/css。但由于 css 是 Web 上的唯一的样式表语言，它不仅是可选的，而且甚至最佳做法是不包括它。

media 属性

<link rel="stylesheet" href="style.css" media="screen and (max-width: 600px)">

在这个例子中，media 属性是不可见的。这是一个可选的属性，你可以用它来指定何时导入某个样式表。它的值必须是一个媒体类型/媒体查询。

这在你想把不同设备和屏幕尺寸的样式放在不同的文件中时很有用。你需要用它自己的 link 元素来导入每个 CSS 文件。

你可以查看这些关于媒体查询的文章（或其他资料），了解更多相关内容：

总结

在这篇文章中，你学习了如何使用 link 元素和 href 及 src 属性将一个外部样式表添加到你的网页中。

你还了解到，你可以导入多个样式表，并使用 media 属性来决定每个样式表何时被应用。

开始创建你的网页吧！