引用CSS文件
在HTML中，我们可以用CSS（Cascading Style Sheets）来对文档进行样式化。与单独使用style属性为单个元素指定样式不同，我们可以把样式存储在一个CSS文件中，然后在HTML文档中通过链接到该文件来引用。这样做可以使得我们的代码更加的有结构性、清晰可读，也方便了我们对多个页面进行多处调整。
在HTML文件中引用CSS的方式
要在HTML中引用CSS文件，需要使用<link>元素。这个元素没有结束标记，而是直接在头部（<head>）部分中进行引用。通常会放在HTML文件的最前面，这样它就可以在文档的其余部分之前加载，确保在所有内容渲染之前，CSS文件已经加载完了。
这是一个基本的引用CSS样式表的语法：
<head>
<link rel="stylesheet" type="text/css" href="yourfilename.css">
</head>
其中，我们用<link>元素来引用CSS文件。这个元素中有三个属性需要注意：
rel 指定关系，它的值必须是 "stylesheet"。表示该链接是一个样式表文件。
type 指定文件类型，默认值是 "text/css"。
href 指定文件的路径和文件名。注意，这里的路径是相对于HTML文件的。如果CSS文件和HTML文件在同一目录下，那么只需要写文件名即可。如果CSS文件在不同目录下，需要在文件名前加上相对路径。
一个完整的实例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>引用CSS文件</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
在CSS文件中编写样式
引用了CSS样式表文件之后，就可以在样式表中进行定义样式了。样式表的规则分为两个部分，一个是选择器（Selector），另一个是声明（Declaration）。
选择器是指用来选定需要应用样式的HTML元素的方式。声明是指用来定义选定元素的样式的一系列属性和值的集合。通常我们使用大括号将选择器和声明括在一起。
这是一个简单的样式规则的格式：
selector {
property: value;
}
其中，<selector>是CSS中的选择器，<property>是CSS中的属性，<value>是属性的值。
比如，我们可以给网页中的所有段落添加红色的字体，这样写：
.myParagraph {
color: red;
}
其中，".myParagraph"是一个类选择器，它的作用是选中所有HTML文档中带有class="myParagraph"属性的元素，并将它们的文本颜色改为红色。
CSS中的选择器有很多种，常用的有标签选择器、类选择器、ID选择器、属性选择器等。在下文中，我们将讨论这些选择器的具体用法。
标签选择器
标签选择器（Tag Selector）是用来选定HTML元素的类型的。比如，我们可以通过以下的CSS代码将所有的段落文本颜色设置为绿色：
p {
color: green;
}
这里的 "p" 指的是HTML中的p标签，表示选中所有的p标签元素，然后将它们的文本颜色设置为绿色。如果我们需要修改所有的a标签的样式，可以这么写：
a {
text-decoration: none;
color: blue;
}
上述代码中，我们给所有a标签设置了无下划线的蓝色字体。如果你想要给不同标签添加不同的样式，可以使用多个标签选择器：
p {
font-size: 18px;
color: gray;
}
h1 {
font-size: 24px;
color: red;
}
上面的代码将所有p元素的文字颜色设为灰色，字体大小设为18px；将所有h1元素的文字颜色设为红色，字体大小设为24px。
类选择器
我们也可以使用类选择器（Class Selector）来选定需要应用样式的HTML元素。类选择器是有一个 "." 开头，后面跟着类名。CSS为类定义了属性，当在HTML中设置该类时，元素将获取该属性。比如：
.greenText {
color: green;
}
上述代码中，".greenText" 是一个类选择器，它会选取所有带有 "class=greenText" 的元素，并将它们的文本颜色设置为绿色。我们可以在HTML中的任意标签中通过添加 "class" 属性来应用这个样式：
<p class="greenText">一些文本</p>上述代码中，我们应用了 "greenText" 类的样式。现在，这个段落中的文本将会以绿色显示。
我们还可以针对不同的类编写不同的样式：
.greenText {
color: green;
}
.blueText {
color: blue;
}
上面的代码分别定义了 "greenText" 和 "blueText" 两个类。我们可以在HTML中的不同标记上应用它们：
<p class="greenText">一些文本</p><a class="blueText" href="https://www.google.com">一个链接</a>
<label class="greenText">一段标签</label>
这样，包含 "class=greenText" 的元素将文本颜色设置为绿色，包含 "class=blueText" 的元素文本颜色设置为蓝色。
ID选择器
ID选择器（ID Selector）使用 "# "加上此ID的名称来选择一个唯一的HTML元素。与类选择器相比，ID选择器可以帮助我们更准确地选择页面中的某个元素。
#example {
color: orange;
}
上述代码中，我们通过 "#example" 这个ID选择器选中某个元素，并将其字体颜色设置为橙色。在HTML文档中，我们可以使用 "id" 属性来设置元素的ID：
<p id="example">任意文本。</p>上面的代码中，我们为一个段落添加了 "example" 这个ID。它的样式将会被CSS文件中的 "#example" ID选择器所应用。
ID选择器的规则是，一个页面中只应该有一个拥有某个ID的元素。如果一个页面的多个元素有相同的ID，这会导致HTML文件不符合规范，并且可能会引起无法预知的错误。因此，ID必须唯一。
属性选择器
属性选择器（Attribute Selector）是根据元素的属性值来选择HTML元素的CSS选择器。这一选择器返回一个具有给定属性值的元素。属性选择器由"[]"包围，可选属性值必须包含在引号内或不包含。
以下是它的语法：
a[target] {
color: red;
}
a[href="https://example.org"] {
color: green;
}
上述代码中，第一个选择器会选取带有 "target" 属性的a标签，并将文本颜色设置为红色。第二个选择器选择一个具有 "https://example.org" 属性的a标记，并将文本颜色设置为绿色。
我们还可以组合使用多个属性选择器，来实现更准确的选择。
总结
通过本文的介绍，我们了解了如何在HTML中引用CSS文件，以及CSS中常用的几种选择器：标签选择器、类选择器、ID选择器以及属性选择器。这些选择器可以帮助我们更好地控制HTML元素的样式，并使得我们代码更加优秀，易于维护。