所属分类:web前端开发
为了更快地创建CSS,我们可以给单个HTML元素赋予多个类,并分别为每个类设置样式。这种方法允许我们管理样式应用的冗余。我们可以将通用样式应用于许多类,而将特定类别的样式应用于特定类别。
<tag_name class="class_1 class_2">
在下面的示例中,我们使用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>
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>