类选择器——多类名

最新推荐文章于 2024-06-06 11:59:30 发布

爱吃火锅的小boy

最新推荐文章于 2024-06-06 11:59:30 发布

阅读量745

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_42900834/article/details/122736061

版权

1.一个标签中有多个名字

2.写法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名的使用</title>

    <style>
            .red{
                color: red;
            }

            .font{
                 font-size: 35px;
            }
    </style>

</head>

<body>
         <!-- red和font之间有空格 -->
         <div class="red font">数学</div>      
</body>

</html>

3.运行效果：

red和font之间有空格

4.写法二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名的使用</title>

    <style>
            
            .box{
                width:  100px;
                height: 100px;
                font-size: 30px;
            }

            .red{
               background-color: red;
            }

            .green{
                background-color: green;
            }
    </style>

</head>

<body>
         <!-- red和box之间有空格 -->
        <div class="box red"> 红色 </div>
        <div class="box green"> 绿色 </div>
        <div class="box red"> 红色 </div>
</body>

</html>

red和box之间有空格

运行效果：

爱吃火锅的小boy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
类选择器——多类名

1.一个标签中有多个名字2.写法一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
复制链接

扫一扫