HTML - 类（class）_HTML 菜鸟教程

类（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()

<< HTML - 短语标签 HTML - ID （标识网页元素唯一的属性） >>