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元素。

列印頁面