CSS学习笔记（持续更新中）

最新推荐文章于 2024-07-23 14:51:29 发布

是00酱

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量55

点赞数

文章标签： css

本文链接：https://blog.csdn.net/m0_51343122/article/details/119395904

版权

最近在学习前端相关知识，已经学完了HTML和一点点CSS的小知识点，但是之前都没有记笔记（后续会补上），想通过记笔记来巩固所学和上机操作时方便查阅。如有错误，欢迎指正！

2.CSS基础选择器

2.4 类选择器

1.多类名的使用方式

<style>
        .red{
            color:red;
        }
        .font35{
            font-size:35px;
        }
    </style>
</head>
<body>
    <div class="red font35">小明</div>
</body>

（1）在标签class属性中写多个类名

（2）多个类名中必须！用空格分开

2.多类名的使用场景

类似于封装的概念

<style>
        .box{
            width: 15px;
            height: 100px;
            font-size: 30px;
        }
        .red{
            background-color:red;
        }
        .green{
            background-color:green;
        }
    </style>
</head>
<body>
    <div class="box red">红色</div>
    <div class="box green">红色</div>
    <div class="box red">红色</div>
</body>

抽取共有的代码段，从而节省CSS代码，统一修改也很方便。

是00酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（持续更新中）

最近在学习前端相关知识，已经学完了HTML和一点点CSS的小知识点，但是之前都没有记笔记（后续会补上），想通过记笔记来巩固所学和上机操作时方便查阅。如有错误，欢迎指正！2.CSS基础选择器2.4 类选择器1.多类名的使用方式<style> .red{ color:red; } .font35{ font-size:35px; } </style&gt.
复制链接

扫一扫