CSS修饰<div>盒子

涉及属性：background-color :颜色 color :颜色字体颜色

属性作用
background-color修改背景颜色
color修改字体颜色
<style>
 .red {
     width: 100px;
     height: 100px;
     background-color: red;
 }
 .green {
     width: 100px;
     height: 100px;
     background-color: green;
 }
</style>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

3.4类选择器-多类名

设计属性

font-size改变字体大小

我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字

①多类名使用方式

<style>
 .box {
     width: 100px
     height: 100px
} 

 .red {
     background-color: red;
 }

 .green {
     background-color: green;
 }

</style>
<body>
    <div class="red box"></div>
    <div class="green box"></div>
    <div class="red box"></div>
</body>

其中一个div标签用了多个类(red和box)

  1. 在标签class属性中写 多个类名
  2. 多个类名中间必须用空格分开
  3. 这个标签可以分别具有这些类名的样式

其中div标签具有背景颜色设置为红色与字体大小为20两种样式

③为什么要分开使用多类名的方式，而不写在一起呢？

多类名开发中使用场景：

  1. 可以把一些标签元素相同的样式（共同部分）放到一个类里面
  2. 这些标签都可以调用这个公共的类，然后再调用直接独有的类
  3. 从而节省CSS代码，统一修改也非常方便

最后修改：2022 年 03 月 21 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏