将你的CSS样式表放在一个外部文件中，被认为是一种最佳做法。那么，你如何将这些CSS链接到你的HTML文件呢？
链接到外部CSS文件是任何HTML页面模板的一个重要部分。在这篇文章中，我们将学习如何做到这一点。
如何将一个CSS文件链接到一个HTML文件中
你可以通过在你的HTML文件的head 元素内添加一个link 元素来将你的CSS文件链接到你的HTML文件，就像这样：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" src="style.css">
</head>
<body>
</body>
</html>
link 元素有很多用途，指定正确的属性是很重要的，这样你就可以用它来导入一个外部的CSS样式表。我们现在就来看看一些重要的属性。
rel 属性
两个不可缺少的属性中的第一个是rel 属性。你将用这个属性来告诉浏览器与导入的文件是什么关系。
你要写rel="stylesheet" ，告诉浏览器你正在导入一个样式表。
src 属性
第二个不可缺少的属性是src 属性，它指定了要导入的文件。
一种常见的情况是，CSS文件和HTML文件在同一个文件夹中。在这种情况下，你可以写src="style.css" 。
如果CSS文件和HTML文件在不同的文件夹里，你需要写出需要从HTML文件到CSS文件的正确文件。
例如，一种常见的情况是，CSS文件在一个文件夹中，而这个文件夹是HTML文件的兄弟姐妹，像这样：
project --- index.html
css ---------- style.css
在这种情况下，你需要写一个路径，如"css/styles.css" 。
type 属性
<link rel="stylesheet" src="style.css" type="text/css">
你可以使用type 属性来定义你所链接的内容的类型。对于一个样式表，这将是text/css 。但由于css 是网络上唯一使用的样式表语言，它不仅是可选的，而且甚至是不包括它的最佳做法。
media 属性
<link rel="stylesheet" src="style.css" media="screen and (max-width: 600px)">
在这个例子中，媒体属性是看不到的。它是一个可选的属性，你可以用它来指定何时导入某个样式表。它的值必须是一个媒体类型/媒体查询。
这在你想把不同设备和屏幕尺寸的样式放在不同的文件中时很有用。你需要用自己的link 元素导入每个CSS文件。
你可以查看这些关于媒体查询的文章（或其他来源），了解更多关于你可以写成属性值的内容：
总结
在这篇文章中，你学会了如何使用link 元素和rel 、src 属性向你的网页添加外部样式表。
你还了解到，你可以导入多个样式表，并使用media 属性来确定每个样式表的应用时间。
祝你在创建网页时愉快!
