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

列印頁面