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

百变鹏仔 3个月前 (09-21) #HTML

文章标签多个

为了更快地创建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样式的文本输出：“欢迎来到教程点”。

立即学习“前端免费学习笔记（深入）”；

文章推荐

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

语法

Example

执行上述脚本后将生成结果。它是文本“欢迎来到tutorialspoint”与两个CSS样式以及文本“大家好”与单个CSS样式的组合。

Example: Using javascript

在执行时，脚本生成一个应用了两个CSS样式的文本输出：“欢迎来到教程点”。

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8