在 HTML 中為元素使用多個 CSS 類

為了更快速地建立 CSS，我們可以給單個 HTML 元素指定多種類，並分別為每個類設定樣式。此方法允許我們管理樣式應用冗餘。我們可以將通用樣式應用到多個類和特定類特定的樣式。

語法

<tag_name class="class_1 class_2">

示例

在以下示例中，我們對兩個段落都使用類“Varma”的樣式，而第二類 varma1 的樣式則應用於第二個段落。

<!DOCTYPE html>
<html>
   <style>
      .varma {
         font-size: larger;
         margin-bottom: 35px;
         background-color: lightgreen;
      }
      .varma1 {
         color: red;
      }
   </style>
<body>
   <p class="varma">
      Hello Everyone.
   </p>
   <p class="varma varma1">
      Welcome to Turorialspoint.
   </p>
</body>
</html>

在執行時，以上指令碼將生成結果。這是文字“歡迎來到 tutorialspoint”，它與兩種 CSS 樣式和帶有 singke css 的文字“大家好”相結合。

示例：使用 JavaScript

在以下示例中，我們透過宣告 .bg-blue 樣式和 .text-white 樣式將兩種樣式新增到單個文字。

<!DOCTYPE html>
<html>
   <style>
      .bg-blue {
         background-color: lightgreen;
      }
      .text-white {
         color: red;
      }
   </style>
<body>
   <div id="varma">Welcome To Tutorialspoint</div>
   <script>
      const box = document.getElementById('varma');
      box.classList.add('bg-blue', 'text-white');
   </script>
</body>
</html>

在執行時，指令碼生成一個使用兩種 css 的文字“歡迎來到 tutorialspoint”的輸出。

更新日期： 02-Sep-2022

149 次瀏覽

開啟你的事業

完成課程獲得認證

開始
廣告