Html 简明教程
HTML - Classes
class 是 HTML 中的一个重要关键字。它是可应用于一个或多个元素的属性，用于根据共同特征或目的对元素进行样式化和分类。class 允许多个元素共享相同的样式规则。通过为多个元素分配相同的 class，您可以同时向所有元素应用 CSS 样式或 JavaScript 功能。这促进了设计和布局的一致性，使网站更易于管理和更新。
-
* HTML class attribute* * 在 HTML 代码中使用 class 关键词定义，并且样式在 CSS 中确定。这种内容和样式的分离是 Web 设计中的一个关键原则，它促进了视觉上吸引人且组织良好的网页的创建。
Syntax for Class
要在 CSS 中使用 class 属性为 HTML 元素创建 CSS 规则，请编写一个 (.) 后接 HTML 元素中提到的 class 名称，然后我们可以在大括号中使用键：值；定义 CSS prpeties 格式，例如 color：yellow；。
在此代码中，我们选择了一个名为“highlight”的 class，它会更改所应用元素的背景颜色、文本颜色和字体粗细。
-
In HTML: <element class="highlight">…</element>
-
* In CSS: /* 使用类属性选择器的 CSS */.highlight { background-color: yellow; color: black; font-weight: bold;}
-
In JavaScript: document.getElementsByClassName('highlight')
Using HTML Class Attribute
HTML class对于一致地设置和格式化网页元素至关重要。它们允许你将相同的样式应用于多个元素，而无需重复代码，从而促进可维护性和整体设计。class 属性可以用于任何* * HTML Elements* (除 head 元素中放置的元素以外)。以下是有效使用类并提供实际示例的方法。
Define a Class for Styling
在以下示例中，我们创建了两个元素，一个是 h1，另一个是 p，我们在它们上面也设置了 class“header”和“heightlight”，但在内部 CSS 中使用“heightlight”类来设置 p 元素的样式。你可以用类似的方式使用“header”类来为 h1 元素添加样式。
<!DOCTYPE html>
<html>
<head>
<style>
<!-- CSS class attribute Selector Used -->
.highlight {
background-color: yellow;
color: black;
padding: 5px;
}
</style>
</head>
<body>
<!-- Using class attribute in both Element-->
<h1 class="header">Tutorialspoint</h1>
<p class="highlight">Simply Easy Learning</p>
</body>
</html>Multiple classes
我们可以通过用空格分隔类名将多个类应用于单个元素。
在以下示例中，应用两个类“heading”和“content”于 <h1> 元素。这是通过在 class 属性中使用空格来分隔类名实现的。
可以将多个类应用到同一个元素中，以继承两个类的样式。在本例中，“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>
<!-- Defined two Classes in h1 Element -->
<h1 class="heading content">
Welcome to Tutorialspoint
</h1>
<p class="content">
We make Tutorials - Simply Easy Learning
</p>
<button class="button">Click Me</button>
</body>
</html>Same class on Multiple Elements
课堂上最重要的功能是它们的重复使用。您可以将相同的类应用于多个元素，以在整个网站中保持一致的外观。在以下示例中，我们创建了 2 个 p 元素（段落）。这两个段落都将具有相同的突出显示，因为它们共享“highlight”类。
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">
To create a class, you need to define it within
your HTML document or link to an external CSS
file that contains class definitions. Classes
are defined using the "class" attribute.
</p>
<p class="highlight">
HTML classes are essential for styling and formatting
web page elements consistently. They allow you to apply
the same styles to multiple elements without repeating
code, promoting maintainability and a cohesive design.
</p>
</body>
</html>Using class Attribute through JavaScript
HTML 类用途广泛，除了样式之外，还有各种用途。
类经常用于标识要用于 JavaScript 函数的元素。例如，您可以使用类来定位特定元素（如按钮），并通过 JavaScript 使它们具有交互性。在以下代码中，我们创建了一个按钮，它将触发一个函数，该函数将 p 元素的 display 属性从 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()">Click Me</button>
<p class="content" style="display: none;">
This content can be toggled by clicking the button.
</p>
</body>
</html>