Html 简明教程
HTML - Classes
class 是 HTML 中的一个重要关键字。它是可应用于一个或多个元素的属性，用于根据共同特征或目的对元素进行样式化和分类。class 允许多个元素共享相同的样式规则。通过为多个元素分配相同的 class，您可以同时向所有元素应用 CSS 样式或 JavaScript 功能。这促进了设计和布局的一致性，使网站更易于管理和更新。
The class is an important keyword in HTML. It is an attribute that can be applied to one or more elements and is used to style and categorize elements based on common characteristics or purpose. Classes allows multiple elements to share the same styling rules. By assigning the same class to multiple elements, you can apply CSS styles or JavaScript functionality to all of them simultaneously. This promotes consistency in design and layout, making it easier to manage and update a website.
-
* HTML class attribute* * 在 HTML 代码中使用 class 关键词定义，并且样式在 CSS 中确定。这种内容和样式的分离是 Web 设计中的一个关键原则，它促进了视觉上吸引人且组织良好的网页的创建。
HTML class attribute is defined in the HTML code using the "class" keyword, and the styling is determined in CSS. This separation of content and style is a key principle in web design, facilitating the creation of visually appealing and organized web pages.
Syntax for Class
要在 CSS 中使用 class 属性为 HTML 元素创建 CSS 规则，请编写一个 (.) 后接 HTML 元素中提到的 class 名称，然后我们可以在大括号中使用键：值；定义 CSS prpeties 格式，例如 color：yellow；。
To create a CSS rule for HTML elements using class attribute in CSS write a (.) followed by the class name mentioned in HTML element, the we can define the CSS prpeties with curly braces in key: value; format like color: yellow;.
在此代码中，我们选择了一个名为“highlight”的 class，它会更改所应用元素的背景颜色、文本颜色和字体粗细。
In this code, we’ve selected a class named "highlight" that changes the background color, text color, and font weight of the elements it’s applied to.
-
In HTML: <element class="highlight">…</element>
-
In CSS: /* CSS using class Attribute Selector */ .highlight { background-color: yellow; color: black; font-weight: bold; }
-
In JavaScript: document.getElementsByClassName('highlight')
Using HTML Class Attribute
HTML class对于一致地设置和格式化网页元素至关重要。它们允许你将相同的样式应用于多个元素，而无需重复代码，从而促进可维护性和整体设计。class 属性可以用于任何* * HTML Elements* (除 head 元素中放置的元素以外)。以下是有效使用类并提供实际示例的方法。
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. The class attribute can be used on any HTML Elements(Except elements placed in head element). Here’s how to use classes effectively with a practical example.
Define a Class for Styling
在以下示例中，我们创建了两个元素，一个是 h1，另一个是 p，我们在它们上面也设置了 class“header”和“heightlight”，但在内部 CSS 中使用“heightlight”类来设置 p 元素的样式。你可以用类似的方式使用“header”类来为 h1 元素添加样式。
In the following example, we have create two element one is h1 and other is p, and we set class on them as well "header" & "heightlight" but using the "heightlight" class in internal CSS to style our p element. You can use the "header" class in the similar way to style the h1 element.
<!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
我们可以通过用空格分隔类名将多个类应用于单个元素。
We can apply multiple classes to a single element by separating class names with a space.
在以下示例中，应用两个类“heading”和“content”于 <h1> 元素。这是通过在 class 属性中使用空格来分隔类名实现的。
In the following example, the <h1> element has two classes applied "heading" and "content." This is achieved using a space to separate the class names within the class attribute.
可以将多个类应用到同一个元素中，以继承两个类的样式。在本例中，“heading”类提供了大字体大小和居中对齐，而“content”类提供了特定的文本颜色和行高。
Multiple classes can be applied to the same element to inherit styling from both classes. In this case, "heading" class provides a large font size and center alignment, while the "content" class provides a specific text color and line-height.
<!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”类。
The most important feature of classes is their reusability. You can apply the same class to multiple elements to maintain a consistent look throughout your website. Here in the following example we create 2 p elements(paragraphs). Both of these paragraphs will have the same highlighting because they share the "highlight" class.
<!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 类用途广泛，除了样式之外，还有各种用途。
HTML classes are versatile and serve various purposes beyond styling.
类经常用于标识要用于 JavaScript 函数的元素。例如，您可以使用类来定位特定元素（如按钮），并通过 JavaScript 使它们具有交互性。在以下代码中，我们创建了一个按钮，它将触发一个函数，该函数将 p 元素的 display 属性从 none 更改为 block。您将看到一个段落。
The classes are frequently used to identify elements for JavaScript functions. For example, you can use a class to target specific elements, like buttons, and make them interactive through JavaScript. In the following code we have create a button which will trigger a function that will change the display property none to block of a p element. You will see a paragraph.
<!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>Things to Remember about Class
-
More than 1 class can be define on any HTML element.
-
Class are used by CSS and JavaScript both to select the element.
-
The class is case sensitive so be careful when you are using to select the element.
-
Multiple elements can have the same class as well.
-
In CSS we use .className and in JavaScript getElementsByClassName() method to select the class assigned HTML element.