1. 引入外部CSS样式表
CSS样式表可以在HTML文档中嵌入，也可以作为外部文件引入。使用外部CSS样式表可以使CSS代码更加清晰、易于维护，同时也可以在多个页面中共享同一份样式。
2. 创建CSS文件
要创建一个外部CSS文件，需要在文本编辑器中创建一个新文件，然后将CSS规则写在其中。可以使用任何文本编辑器来创建CSS文件。在创建文件时，确保文件扩展名是.css。
示例代码：
/* 外部CSS文件 */
body {
background-color: #f2f2f2;
}
h1 {
color: blue;
font-size: 36px;
}
p {
color: black;
font-size: 18px;
}
在这个示例中，我们定义了一个背景颜色为淡灰色（#f2f2f2）的body元素，一个蓝色的h1元素和一个黑色、字号为18像素的p元素。
3. 将CSS文件引入HTML文档
有两种方法将外部CSS文件引入HTML文档：使用<link>标签或@import指令。
3.1 使用<link>标签
使用<link>标签将外部CSS文件引入HTML文档是最常用的方法。在<head>标签中添加一个<link>元素，指向外部CSS文件的路径即可。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网页</h1>
这是我的第一个网页。
</body>
</html>
在这个示例中，我们在<head>标签中添加了一个<link>元素，指向名为styles.css的外部CSS文件。href属性中的路径可以是相对路径或绝对路径。
3.2 使用@import指令
除了使用<link>标签，还可以使用@import指令将外部CSS文件引入HTML文档。@import指令应该在样式表的顶部，放在其他样式规则之前。
示例代码：
/* 外部CSS文件 */
@import url("print.css") print;
@import url("screen.css") screen;
在这个示例中，我们使用@import指令将两个外部CSS文件分别应用于打印和屏幕显示。
4. 如何编写CSS文件
在编写CSS文件时，应该注意以下几点：
4.1 CSS语法
CSS规则由两个主要部分组成：选择器和声明块。选择器指定要应用规则的HTML元素，声明块中定义了一组CSS属性及其值。
示例代码：
/* 选择器 */
p {
/* 声明块 */
color: red;
font-size: 16px;
}
在这个示例中，选择器为p元素，声明块中定义了两个属性：颜色为红色，字号为16像素。
4.2 CSS单位
CSS属性值可以使用不同的单位，像素单位在Web设计中是最常用的单位之一。其他常见单位包括em、rem、百分比等。
示例代码：
/* 属性值中使用像素单位 */
h1 {
font-size: 36px;
}
/* 属性值中使用em单位 */
p {
font-size: 1.2em;
}
/* 属性值中使用百分比单位 */
img {
max-width: 100%;
}
在这个示例中，h1元素的字号为36像素，p元素的字号为其父元素字号的1.2倍，而img元素的宽度最大为其父元素宽度的百分之百。
4.3 CSS选择器
CSS选择器用于选择要应用CSS规则的HTML元素。选择器可以基于标签名、类、ID和属性等元素特征。
示例代码：
/* 选择标记名 */
h1 {
font-size: 36px;
}
/* 选择类 */
.highlight {
background-color: yellow;
}
/* 选择ID */
#logo {
width: 200px;
}
/* 选择属性 */
input[type="submit"] {
font-weight: bold;
}
在这个示例中，选择器根据不同的标记名、类、ID和属性来选择不同的元素，并应用相应的CSS规则。
5. 总结
在本篇文章中，我们详细介绍了如何引入外部CSS样式表。需要注意的是，使用外部CSS文件可以使CSS代码更加清晰、易于维护，同时也可以在多个页面中共享同一份样式。在编写CSS代码时，应该注意CSS语法、单位和选择器等方面。