HTML - 类

类是HTML中一个重要的关键字。它是一个可以应用于一个或多个元素的属性，用于根据共同特征或用途对元素进行样式设置和分类。类允许多个元素共享相同的样式规则。通过为多个元素分配相同的类，您可以同时将CSS样式或JavaScript功能应用于所有这些元素。这提高了设计的连贯性和布局，使网站更容易管理和更新。

HTML 类属性 在HTML代码中使用“class”关键字定义，样式在CSS中确定。内容和样式的分离是网页设计的一个关键原则，有助于创建视觉上吸引人且组织良好的网页。

类的语法

要在CSS中使用类属性为HTML元素创建CSS规则，请编写一个 (.)，后面跟着HTML元素中提到的类名，然后我们可以使用花括号以key: value;格式定义CSS属性，例如color: yellow;。

在此代码中，我们选择了一个名为“highlight”的类，它更改了应用它的元素的背景颜色、文本颜色和字体粗细。

在HTML中

<element class="highlight">...</element>

在CSS中

/* CSS using class Attribute Selector */
.highlight {
   background-color: yellow;
   color: black;
   font-weight: bold;
}

在JavaScript中

document.getElementsByClassName('highlight')

使用HTML类属性

HTML类对于一致地设置网页元素的样式和格式至关重要。它们允许您将相同的样式应用于多个元素而无需重复代码，从而提高可维护性和设计的一致性。类属性可以用于任何HTML 元素（除了放置在头部元素中的元素）。以下是如何有效使用类以及一个实际示例。

定义用于样式设置的类

在下面的示例中，我们创建了两个元素，一个是h1，另一个是p，我们也为它们设置了类“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>

多个类

我们可以通过空格分隔类名将多个类应用于单个元素。

在下面的示例中，<h1>元素应用了两个类“heading”和“content”。这是通过在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>

在多个元素上使用相同的类

类的最重要特性是其可重用性。您可以将相同的类应用于多个元素，以保持整个网站的一致外观。在下面的示例中，我们创建了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>

通过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>

关于类的注意事项

可以在任何HTML元素上定义多个类。
CSS和JavaScript都使用类来选择元素。
类区分大小写，因此在使用它选择元素时要小心。
多个元素也可以具有相同的类。
在CSS中，我们使用.className，在JavaScript中使用getElementsByClassName()方法来选择已分配类的HTML元素。

打印页面