将你的 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 属性来决定每个样式表何时被应用。
开始创建你的网页吧！