1.概述
在Web开发中，CSS（Cascading Style Sheets）样式表用于定义HTML文档的外观和布局。它们使得开发人员可以轻松地控制网站的外观和布局，而不必更改HTML代码。外部CSS文件是一种可以独立于HTML文档存在的文件，通过链接标签将其连接到HTML文档中。它们可以在多个页面上共享，并且可以在需要时轻松地进行更改。本文将介绍外部CSS文件的优点、如何将其添加到HTML文档中以及如何使用它们控制网站的外观。
2.创建和链接CSS文件
要创建外部CSS文件，可以使用任何编辑器，包括文本编辑器、代码编辑器或开发人员工具。在创建文件时，必须使用.css文件扩展名，例如styles.css。
要将CSS文件链接到HTML文档，必须在HTML文档的<head>标记中包含链接标记。以下是一个示例链接标记：
<link rel="stylesheet" href="styles.css">
链接标记包含以下属性：
rel属性定义与HTML文档之间的关系。在这种情况下，它是一个样式表。
href属性定义要链接的CSS文件的路径。
将链接标记添加到HTML文档的<head>标记中即可链接到外部CSS文件。
3.引用外部CSS文件的优点
3.1 可以集中控制样式
通过使用外部CSS文件，可以将网站的所有样式集中在一个地方。这使得更改样式变得容易，并确保所有页面都遵循相同的样式规则。如果要更改样式，只需更改样式表中的代码，而不必在每个HTML文件中进行更改。
3.2 提高网站性能
通过使用外部CSS文件，可以将HTML和CSS分开。这使得网页的加载速度更快，并减少了HTML文件的大小。这也有助于提高SEO（Search Engine Optimization），因为搜索引擎可以更轻松地读取和索引HTML文件。
3.3 可以重复使用样式
通过使用外部CSS文件，可以将网站的样式分解成可重复使用的块。这些块可以在网站的不同部分重复使用，从而减少了代码量，并使CSS更易于维护。
4.使用外部CSS文件控制网站样式
4.1 元素选择器
元素选择器用于选择某个HTML元素并为其应用样式。例如，以下代码将所有元素的字体颜色设置为红色：
p {
color: red;
}
此代码将应用于HTML文档中的所有元素。
4.2 类选择器
类选择器允许将样式应用于一个或多个指定类的HTML元素。例如，以下代码将包含class="my-class"的所有元素的文本颜色设置为蓝色：
.my-class {
color: blue;
}
要将类选择器应用于HTML元素，请在HTML元素中添加class属性，如下所示：
<p class="my-class">这是一个带有.my-class的段落。</p>
4.3 ID选择器
ID选择器用于为单个HTML元素应用样式。例如，以下代码将具有id="my-id"的HTML元素的背景颜色设置为粉色：
#my-id {
background-color: pink;
}
要将ID选择器应用于HTML元素，请在HTML元素中添加id属性，如下所示：
<p id="my-id">这是一个带有#my-id的段落。</p>
4.4 子元素选择器
子元素选择器用于选择某个父元素下的子元素，并为其应用样式。例如，以下代码将<div>元素下的所有元素的文本颜色设置为绿色：
div > p {
color: green;
}
此代码将只应用于<div>元素下的元素。
4.5 后代元素选择器
后代元素选择器与子元素选择器类似，但它选择不仅是直接子元素，而是所有子元素。例如，以下代码将<div>元素下的所有元素的文本颜色设置为紫色：
div p {
color: purple;
}
此代码将应用于<div>元素下的所有元素，不管它们是否是直接子元素。
5.总结
CSS样式表是一种非常有用的方式，可以控制Web页面的外观和布局，同时外部CSS文件也可以使CSS更具维护性。通过包含外部CSS文件，可以将网站的所有样式和布局集中在一起，并在需要时轻松地进行更改。此外，使用外部CSS文件可以提高网站的性能，并使样式更易于重用。