在 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 次浏览

开启你的事业

完成课程获得认证

开始
广告