在“CSS入门：第1部分”中，我们学习了如何使用标签选择器将层叠样式表（CSS）应用于HTML。通过外部样式表格式化信息，而非将所有代码嵌入HTML文档，我们只需更改样式表即可实现多次修改，从而专注于HTML结构，最终打造出既美观又对搜索引擎友好的网页。
本教程为“第2部分”，重点介绍CSS类选择器。回顾上一篇教程，我们直接将样式应用于h1、h2、ul和p等组织信息的HTML标签，并创建了悬停链接以增强交互性。但您可能会发现，每次创建h1标签时，它都会应用相同的样式。这并非理想情况，因为我们有时需要多个h1标签呈现不同外观，或在不同区域设置差异化的链接样式（如红色带下划线与灰色无下划线）。为此，我们需要一种新的样式声明方式。
类选择器与标签选择器的核心区别在于，它可以应用于几乎所有HTML标签。
CSS提供了类选择器来解决上述问题。与标签选择器不同，类选择器可应用于任意数量的HTML标签。通过在CSS样式表中定义样式类，我们可以在需要的地方灵活应用样式，且仅需修改样式表即可全局更新，极大提升了维护效率。
例如，若需在网页多处显示红色斜体文本，使用HTML字体标签会导致代码冗余且难以维护；而分配一个CSS类来实现该样式，则能在保持代码简洁的同时随时调整。
本教程将演示如何定义和应用CSS类到HTML标签。我们将先为h1标签声明样式，展示同一标签的多种格式；随后将样式应用到指定元素；最后，通过在不同页面区域应用悬停链接样式，提升用户交互体验。
指令
在上一个教程中，我们围绕信息重要性构建了HTML页面结构，并使用CSS标签选择器进行格式化，使页面更具吸引力。我们引入了关键概念：网页由内容数据与页面格式两部分组成。尽管这对许多设计师而言仍是新概念，但对构建SEO友好且用户体验优质的网站至关重要。
然而，标签选择器存在局限性：它会格式化页面上所有特定HTML标签实例。当同一标签需呈现不同样式时（如用h1强调不同章节标题），便无法实现差异化。考虑以下HTML页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Classes Example 1</title>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1">
</head>
<body>
<h1>About Our Company</h1>
<p>Our company is the world leader in whatever it is that we do. Our talented staff brings years of experience and proven results in whatever industry it is that we are in.</p>
<h1>Privacy Policy</h1>
<p>We respect your privacy and will not release your name, address, email, or any other personal information that is submitted to our website to any third party.</p>
<h1>Conditions of Use</h1>
<p>By using this website you agree to the following conditions of use. You will not participate in any illegal or unethical activities while using this website.</p>
</body>
</html>此结构虽利于SEO，但未提供引人入胜的用户体验。我们希望突出“关于我们”段落，同时弱化隐私政策和条款信息。若使用标签选择器，所有h1将统一格式化，无法达成目标。因此，我们将使用类选择器，并将其应用于需格式化的HTML标签。
首先，像上篇教程一样添加外部样式表链接。本次使用名为“stylesheet.css”的文件，确保其与HTML文件位于同一目录。在HTML文档的HEAD部分添加以下代码：
<link href="stylesheet.css" rel="stylesheet" type="text/css">现在打开样式表分配样式。上篇教程中，我们通过标签名称声明样式，例如：
h1 { font-size: 16px; font-weight: bold; }而声明样式类的语法略有不同：在CSS中，我们在样式声明前加点号（.）来定义类。这将其标识为类选择器，告诉浏览器将此样式应用于分配了该类的HTML标签。让我们先创建类声明，稍后再应用到HTML。首先，为“关于我们”标题创建一个带红色下划线的类：
.title { border-bottom: 1px solid #FF0000; }此类命名为“title”，便于记忆其用途。从样式声明可见，我们为文本添加了红色下划线。接下来，为需弱化的其他<h1>标签声明另一种样式：较小粗体文本。同时，这些标题下方段落的文本也应缩小字号以减少视觉焦点。为此，创建两个新类：
.subtitle { font-size: 12px; font-weight: bold; }
.subtext { font-size: 10px; }声明样式并链接样式表后，在浏览器中查看HTML页面可能无明显变化。与标签选择器不同，类选择器仅适用于特定HTML元素，因此需回到HTML文档指定应用样式的元素。此时HTML文档应如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Classes Example 1</title>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>About Our Company</h1>
<p>Our company is the world leader in whatever it is that we do. Our talented staff brings years of experience and proven results in whatever industry it is that we are in.</p>
<h1>Privacy Policy</h1>
<p>We respect your privacy and will not release your name, address, email, or any other personal information that is submitted to our website to any third party.</p>
<h1>Conditions of Use</h1>
<p>By using this website you agree to the following conditions of use. You will not participate in any illegal or unethical activities while using this website.</p>
</body>
</html>我们需要将“title”类应用到包含“关于我们”标题的<h1>标签。只需向标签添加class属性并赋值为“title”：
<h1 class="title">About Our Company</h1>注意：分配类时无需包含CSS中的句点。句点（.title）仅在样式表中用于声明类选择器；而在HTML的class属性中，直接使用类名作为值即可，因为属性名称已标识其为类。随着后续教程混合使用不同选择器，这一概念将更加清晰。
在浏览器中查看HTML文档，会发现“title”类样式已成功应用于“关于我们”标题。接下来为其他部分分配类：将“subtitle”类分配给“隐私政策”和“使用条款”标题，将“subtext”类分配给对应段落：
<h1 class="subtitle">Privacy Policy</h1>
<p class="subtext">We respect your privacy and will not release your name, address, email, or any other personal information that is submitted to our website to any third party.</p>
<h1 class="subtitle">Conditions of Use</h1>
<p class="subtext">By using this website you agree to the following conditions of use. You will not participate in any illegal or unethical activities while using this website.</p>这体现了CSS类的强大之处：可将类应用到任意数量标签上，且样式仅作用于指定元素，为网页格式化提供了全新工具。此时预览HTML文件，底部两部分显得低调，不会分散用户对第一部分的注意力。我们成功使用CSS格式化外观，同时未损害信息结构。
下一步是使用交互式链接丰富页面内容。回顾之前教程，我们通过以下标签选择器实现：
a:link, a:visited { color: #FF0000; text-decoration: none; }
a:hover { color: #666666; text-decoration: underline; }此样式应用于所有<a>标签，并通过特殊语法区分链接状态（:visited已访问、:hover悬停、:link默认）。但我们需要为不同区域创建差异化链接行为，这可通过CSS类实现。查看本教程最终HTML代码，每个段落均已添加链接：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS Classes Example 1</title>
<meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="title">About Our Company</h1>
<p>Our company is the world leader in whatever it is that we do. Our talented staff brings years of <a href="experience.html">experience</a> and proven results in whatever industry it is that we are in.</p>
<h1 class="subtitle">Privacy Policy</h1>
<p>We respect your <a href="privacy.html">privacy</a> and will not release your name, address, email, or any other personal information that is submitted to our website to any third party.</p>
<h1 class="subtitle">Conditions of Use</h1>
<p>By using this website you agree to the following conditions of use. You will not participate in any <a href="activities.html">illegal or unethical activities</a> while using this website.</p>
</body>
</html>预览此文件，所有链接均显示为蓝色带下划线（浏览器默认样式）。我们的目标是改变链接外观。首先，因第一段未应用样式，将上篇教程的悬停链接样式添加到样式表：
a:link, a:visited { color: #FF0000; text-decoration: none; }
a:hover { color: #666666; text-decoration: underline; }再次预览，所有链接变为红色，悬停时变灰并带下划线。但我们需要更进一步：使样式化段落中的链接呈灰色，悬停时显示红色效果。为降低这些段落的视觉吸引力以突出第一段，我们在样式表中声明以下样式：
.subtext a:link, .subtext a:visited { color: #666666; text-decoration: none; }
.subtext a:hover { color: #FF0000; text-decoration: none; }注意声明方式：从链接所在段落的类名（.subtext）开始，后接标签选择器。务必在逗号后重复类名，因为我们正为两个元素（a:link和a:visited）声明样式。本质上，这是告诉浏览器将此样式应用于subtext类内的每一个<a>标签实例。尽管初看复杂，但这是CSS的重要概念，允许我们为网页特定部分声明格式化规则。
再次预览HTML文件：第一段链接为红色，底部两段链接为灰色。我们成功在未破坏信息结构的情况下完成格式化。通过使用HTML标签的class属性，可选择性设置不同元素的样式；且因格式化工作在外部样式表中完成，只需更改样式声明即可更新所有链接页面的格式。
在“第3部分”中，我们将探讨CSS ID选择器，以及如何根据元素的id属性（而非class属性）将其应用于HTML标签。ID通常每页仅分配给一个元素，我们将借此展示更高级的CSS布局选项。