类（class）是 HTML 中的一个重要关键字。它是一种可应用于一个或多个元素的属性，用于根据常见特征或用途对元素进行样式设置和分类。类允许多个元素共享相同的样式规则。通过将同一个类分配给多个元素，您可以同时将 CSS 样式或 JavaScript 功能应用于所有元素。这促进了设计和布局的一致性，使管理和更新网站变得更加容易。
HTML 类属性 在 HTML 代码中使用“class”关键字定义，样式在 CSS 中确定。这种内容和风格的分离是网页设计的关键原则，有助于创建具有视觉吸引力和有组织的网页。
类的语法
要使用 CSS 中的 class 属性为 HTML 元素创建 CSS 规则，请写一个 （.） 后跟 HTML 元素中提到的类名，我们可以用大括号定义 CSS 程序，格式为 。key: value;color: yellow;
在此代码中，我们选择了一个名为“highlight”的类，该类更改了应用它的元素的背景颜色、文本颜色和字体粗细。
在 HTML 中：
<element class="highlight">...</element>
在 CSS 中：
/* 使用类属性选择器的CSS */
.highlight {
background-color: yellow;
color: black;
font-weight: bold;
}
在 JavaScript 中：
document.getElementsByClassName('highlight')
使用 HTML 类属性
HTML 类对于一致地设置网页元素的样式和格式至关重要。它们允许您将相同的样式应用于多个元素，而无需重复代码，从而促进可维护性和有凝聚力的设计。class 属性可用于任何 HTML 元素（放置在 head 元素中的元素除外）。以下是如何通过一个实际示例有效地使用类。
定义用于样式的类
在下面的例子中，我们创建了两个元素，一个是h1，另一个是p，我们也在它们上设置了类“header”和“heightlight”，但在内部CSS中使用“heightlight”类来设置p元素的样式。您可以以类似的方式使用“header”类来设置 h1 元素的样式。
<!DOCTYPE html>
<html>
<head>
<style>
<!-- 使用CSS类属性选择器 -->
.highlight {
background-color: yellow;
color: black;
padding: 5px;
}
</style>
</head>
<body>
<!-- 在两个元素中都使用class属性-->
<h1 class="header">五科普教程点</h1>
<p class="highlight">简单易用</p>
</body>
</html>
多类
我们可以通过用空格分隔类名来将多个类应用于单个元素。
在下面的示例中，<h1>元素应用了两个类“标题”和“内容”。这是使用空格分隔类属性中的类名来实现的。
可以将多个类应用于同一元素，以继承两个类的样式。在这种情况下，“heading”类提供较大的字体大小和中心对齐方式，而“content”类提供特定的文本颜色和行高。
<!DOCTYPE html>
<html>
<head>
<style>
.heading {
font-size: 24px;
color: #333;
text-align: center;
}
.content {
font-size: 16px;
color: #666;
line-height: 1.5;
}
.button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 在h1元素中定义了两个类 -->
<h1 class="heading content">
欢迎访问七科普教程
</h1>
<p class="content">
我们制作的七科普教程-简单易学
</p>
<button class="button">点击这里</button>
</body>
</html>
多个元素上的同一类
类最重要的特征是它们的可重用性。您可以将同一类应用于多个元素，以保持整个网站的外观一致。在下面的示例中，我们创建 2 个 p 元素（段落）。这两个段落将具有相同的突出显示，因为它们共享“突出显示”类。
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">
要创建一个类，您需要在中定义它
您的HTML文档或指向外部CSS的链接
包含类定义的文件。类别
使用“class”属性定义。
</p>
<p class="highlight">
HTML类对于样式和格式设置至关重要
网页元素一致。他们允许你申请
将相同的样式应用于多个元素而不重复
代码，促进可维护性和连贯性设计。
</p>
</body>
</html>
通过 JavaScript 使用 class 属性
HTML 类是通用的，除了样式之外，还有各种用途。
这些类经常用于标识 JavaScript 函数的元素。例如，您可以使用类来定位特定元素（如按钮），并通过 JavaScript 使它们具有交互性。在下面的代码中，我们创建了一个按钮，该按钮将触发一个函数，该函数将 p 元素的显示属性 none 更改为 block。你会看到一个段落。
<!DOCTYPE html>
<html>
<head>
<script>
function showContent() {
var element = document.getElementsByClassName('content')[0];
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
</script>
<style>
.interactive-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="interactive-button" onclick="showContent()">点击这里</button>
<p class="content" style="display: none;">
单击按钮可以切换此内容。
</p>
</body>
</html>
关于要记住的事情
- 可以在任何 HTML 元素上定义多个类。
- CSS 和 JavaScript 都使用类来选择元素。
- 该类区分大小写，因此在选择元素时要小心。
- 多个元素也可以具有相同的类。
- 在 CSS 中，我们使用 和 JavaScript 方法来选择类分配的 HTML 元素。.classNamegetElementsByClassName()
