HTML - 全局类属性

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

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

语法

<element class  = "class_Name" >

应用于

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

HTML class 属性示例

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

在 CSS 中使用定义的类

在下面的示例中，我们正在创建一个 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">
      tutorials 
         <span class="point">
            point
         </span>
   </h2>
   <p class="caption">Easy to Learn!</p>
</body>

</html>

同一标签的多个类

我们可以为一个 HTML 标签提供任意数量的类，每个类都用空格隔开。这里我们提供了三个类。

<!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>

多个标签中的单个类

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

<!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>

支持的浏览器

属性
class	是	是	是	是	是

html_attributes_reference.htm

打印页面