2023在HTML中为一个元素使用多个CSS类

 所属分类:web前端开发

 浏览:194次-  评论: 0次-  更新时间:2023-09-19
描述:更多教程资料进入php教程获得。 为了更快地创建CSS,我们可&#2...
更多教程资料进入php教程获得。

在HTML中为一个元素使用多个CSS类

为了更快地创建CSS,我们可以给单个HTML元素赋予多个类,并分别为每个类设置样式。这种方法允许我们管理样式应用的冗余。我们可以将通用样式应用于许多类,而将特定类别的样式应用于特定类别。

语法

<tag_name class="class_1 class_2">

Example

在下面的示例中,我们使用class“Varma”的样式来应用于两个段落,而第二个段落应用了secondclass 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样式以及文本“大家好”与单个CSS样式的组合。

Example: Using javascript

In the following example we are adding two style to an single text by declaring the .bg-blue style and .text-white style.

<!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样式的文本输出:“欢迎来到教程点”。

积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!