web前端学习67-68（使用类选择器画盒子，类选择器-多类名的使用）

最新推荐文章于 2023-03-26 11:41:59 发布

香甜的甲基橙

最新推荐文章于 2023-03-26 11:41:59 发布

阅读量767

点赞数 1

分类专栏： css web前端基础学习笔记文章标签：前端 css3

本文链接：https://blog.csdn.net/weixin_51249285/article/details/121308694

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

css

22 篇文章 5 订阅

订阅专栏

文章目录

2. CSS基础选择器

2. CSS基础选择器

案例：使用类选择器画盒子

练习：

类选择器的使用
div就是一个盒子，用来装网页内容的（验证了div就是一个盒子）

在这里插入图片描述

eg：

04-利用类画三个颜色的盒子.html

<!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 {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>
</body>
</html>

网页显示：

在这里插入图片描述

2.4 类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签.

简单理解就是一个标签有多个名字.

2.4.1 多类名使用方式

<div class="red font20">亚瑟</div>

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

eg：

05-类选择器多类名的使用.html

<!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>Document</title>
    <style>
        .liu {
            color: red;
        }
        .dehua {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div class="dehua liu">刘德华</div>
</body>
</html>

网页显示：

在这里插入图片描述

2.4.2 多类名开发中使用场景

可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
这些标签都可以调用这个公共的类,然后再调用自己独有的类.
从而节省CSS代码,统一修改也非常方便.

<div class="pink fontweight font20">亚瑟</ div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

各个类名中间用空格隔开
简单理解∶就是给某个标签添加了多个类，或者这个标签有多个名字
这个标签就可以分别具有这些类名的样式
节省CSS代码，同意修改也非常方便

eg：将之前案例：使用类选择器画盒子做一个小更改

06-多类名的使用场景.html

<!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;
        }
        .red {
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red box">红色</div>
    <div class="green box">绿色</div>
    <div class="red box">红色</div>
</body>
</html>

网页显示效果跟之前的显示相同

香甜的甲基橙

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
web前端学习67-68（使用类选择器画盒子，类选择器-多类名的使用）

文章目录2. CSS基础选择器案例：使用类选择器画盒子2.4 类选择器-多类名2.4.1 多类名使用方式2.4.2 多类名开发中使用场景2. CSS基础选择器案例：使用类选择器画盒子练习：类选择器的使用div就是一个盒子，用来装网页内容的（验证了div就是一个盒子）eg：04-利用类画三个颜色的盒子.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫