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

執行後，上述指令碼將生成結果。它是帶有兩個 CSS 樣式的文字“welcome to tutorialspoint”和帶有單個 css 的文字“hello everyone”。

示例：使用 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>

在執行時，指令碼會生成一個輸出文字“welcome to tutorialspoint”，並應用兩個 css。

更新於： 02-Sep-2022

148 次瀏覽

開啟你的職業生涯

完成課程，獲得認證

開始
廣告
© . All rights reserved.