什么是外部样式表
在编写CSS时，样式表可以写在HTML文件的<head>标签中的<style>标签中，也可以写在CSS文件中。当样式表写在CSS文件中时，这个CSS文件被称为外部样式表。
外部样式表的优点：
可以让HTML文件更简洁，易于阅读和维护
可以让样式表在多个HTML页面中共享
浏览器会缓存已导入的外部样式表，从而提高网站的加载速度
可以让多个开发者同时工作在同一网站的CSS文件中
如何在CSS中导入外部样式表
要在CSS中导入外部样式表文件，需要使用@import规则。
语法：
@import url("style.css");
其中，url()中的地址指向CSS文件的位置。
注意事项
必须将@import规则写在样式表文件的最顶部。
要避免重复导入同一个CSS文件。
在使用@import规则导入外部CSS文件时，要确保外部CSS文件的路径正确。
示例：导入外部样式表文件
下面通过一个简单的示例来演示如何在CSS中导入外部样式表文件。
1. 创建外部CSS文件
首先，我们需要创建一个外部CSS文件，例如style.css文件。在该文件中，我们可以写一些样式规则，例如：
/* style.css */
p {
color: red;
font-size: 20px;
font-family: Arial, sans-serif;
}
2. 在HTML文件中引入CSS文件
接下来，在HTML文件中，我们需要通过<link>元素引入这个外部CSS文件。例如，我们在HTML文件的<head>标签中添加以下代码：
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<link rel="stylesheet" href="style.css">
</head>
3. 浏览HTML文件
最后，我们可以在浏览器中打开这个HTML文件，看看样式是否生效。
例如，以下HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
在浏览器中打开后，就会看到这个段落被设置为红色、20px大小，并使用Arial字体。
使用多个外部样式表文件
一个网站可能有多个外部CSS文件，例如，每个网页有不同的样式，或者是为了更好的组织CSS文件。
此时，可以在HTML文件中引入多个外部CSS文件。例如：
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">
</head>
此时，浏览器会按照链接顺序，依次导入这两个CSS文件，最终的样式规则是两个CSS文件中的规则的合并。
使用CDN链接导入CSS文件
CDN全称是Content Delivery Network，即内容分发网络。通过使用CDN链接，可以将CSS文件存储在网络上，从而加快下载速度。
例如，以下代码可以导入Bootstrap库的CSS文件：
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
</head>
这样，在浏览器访问页面时，就会从Bootstrap的CDN上下载CSS文件，加快网页打开速度。
总结
在CSS中导入外部样式表是一种组织CSS文件的方式，它可以让HTML文件更简洁，易于阅读和维护。通过@import规则，我们可以将外部CSS文件导入到CSS文件中。同时，还可以使用多个外部CSS文件和CDN链接来组织CSS文件，从而使网站更快的加载。