HTML - 全局 class 属性

HTML class 属性是一个全局属性，用于指定当前元素或标签的类名。

类允许 CSS 和 JavaScript 通过类选择器或 DOM 方法“document.getElementsByClassName”等函数选择和访问特定元素。

语法


<element class = "class_Name" >

适用于

几乎所有的 HTML 标签都支持使用 class 属性。但是，有一些 HTML 标签不支持 class 属性，通常是因为它们是 void 元素或具有不涉及以通常方式设置样式或编写脚本的特定用途。例如<html>、<title>、<head>、<script>、<base>和<meta>不支持 class 属性。

HTML class 属性的示例

下面的示例将说明 HTML class 属性，我们应该在哪里以及如何使用此属性！

在 CSS 中使用定义的 class

在下面的示例中，我们将创建一个 HTML 文档并使用 class 属性来设置元素内容的样式，如下所示


<!DOCTYPE html>
<html>

<head>
	 <style>
			.brand {
				 font-size: 30px;
				 color: green;
			}

			.point {
				 font-size: 26px;
				 color: black;
			}

			.caption {
				 font-size: 20px;
				 font-style: italic;
			}
	 </style>
</head>

<body>
	 <p>
			This is example of class attribute
	 </p>
	 <h2 class="brand">
			Qikepu
				 <span class="point">
						.com
				 </span>
	 </h2>
	 <p class="caption">Easy to Learn!</p>
</body>

</html>

同一标签的多个 class

我们可以为 HTML 标签提供任意数量的 class ，每个类都应该以空格分隔。在这里，我们提供了三个 class 。


<!DOCTYPE html>
<html lang="en">
<head>
	 <meta charset="UTF-8">
	 <title>Multiple Classes Example</title>
	 <style>
			.class1 {
				 color: blue;
			}
			.class2 {
				 font-weight: bold;
			}
			.class3 {
				 background-color: yellow;
			}
	 </style>
</head>

<body>
	 <h2 class="class1 class2 class3">
			This is a heading with three classes for styling
	 </h2>
</body>

</html>

多个标签中的单个 class

我们可以为任意数量的标签使用 class 名。具有该类的所有标记都获得相同类型的样式


<!DOCTYPE html>
<html lang="en">

<head>
		<meta charset="UTF-8">
		<title>Same Class for Multiple Tags</title>
		<style>
				.shared-class {
						color: green;
						font-style: italic;
				}
		</style>
</head>

<body>
	 <h1 class="shared-class">
			This is a heading with a shared class
	 </h1>
	 <p class="shared-class">
			This is a paragraph with the same shared class
	 </p>
</body>

</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

打印本页