CSS层叠样式简介，基础选择器

发呆少女

已于 2022-04-03 21:41:05 修改

阅读量670

点赞数

分类专栏： CSS学习文章标签： html5

于 2022-04-02 22:37:16 首次发布

本文链接：https://blog.csdn.net/qq_43632490/article/details/123922324

版权

CSS学习专栏收录该内容

33 篇文章 1 订阅

订阅专栏

1、作用：

CSS（Cascading Style Sheets）层叠样式表，级联样式表，与HTML相同，也是一种标记语言。
用于美化网页，布局页面。

2、CSS语法规则：

选择器+声明
在这里插入图片描述
选择器用于指定给哪个标签添加样式，花括号内为具体要设置的样式。
属性与属性值以“键值对”的形式出现。
属性与属性值之间有“：”分开。
多个“键值对”之间有“；”分开。

<!DOCTYPE html>
<html lang="zh-CN">
<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>css语法规范</title>
    <style>
        p {
            color: blueviolet;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>幸得识卿桃花面，从此阡陌多暖春！</p>
</body>
</html>

在这里插入图片描述

3、选择器：

选择器：根据不同的需求，把不同的标签挑选出来添加样式。

分类：
1、基础选择器：由单个选择器组成。
包含：标签选择器，类选择器，id选择器，通配符选择器。
2、复合选择器。

3.1 基础选择器: 标签选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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>css选择器</title>
    <style>
        /* 
            标签选择器：用HTML标签作为选择器，为页面中的某一类标签指定css样式。
            优点：快速为页面中的同类型标签增加统一样式。
            缺点：不能差异化设置，只能选择全部的标签。
        */
        p {
            color: blueviolet;
            font-size: 20px;
        }

        div {
            color: brown;
        }
    </style>
</head>
<body>
    <p>幸得识卿桃花面，从此阡陌多暖春！</p>
    <p>都 是勇敢的</p>
    <p>你额头的伤口 你的 不同 你犯的错</p>

    <div>都 不必隐藏</div>
    <div>你破旧的玩偶 你的 面具 你的自我</div>
    <div>他们说 要带着光 驯服每一头怪兽</div>
</body>
</html>

在这里插入图片描述
3.2 基础选择器: 类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        /* 类选择器：
           差异化选择不同的标签，可以单独选择一个或者某几个标签 
        */
        .color-red {
            color: red;
        }
        
        .color-blue {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="color-red">孤勇者</div>
    <ul>
        <li class="color-red">都 是勇敢的</li>

        <li class="color-blue">你额头的伤口 你的 不同 你犯的错</li>

        <li class="color-red">都 不必隐藏</li>

        <li class="color-blue">你破旧的玩偶 你的 面具 你的自我</li>
    </ul>
</body>
</html>

在这里插入图片描述
类选择器常用命名（摘自百度文库）：

https://wenku.baidu.com/view/b03bcaf725fff705cc1755270722192e4536586e.html
在这里插入图片描述

案例：用类选择器画盒子

<!DOCTYPE html>
<html lang="zh-CN">
<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>
       .pink-box {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .purple-box {
            width: 100px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <!--案例-->
    <div class="pink-box"></div>
    <div class="purple-box"></div>
    <div class="pink-box"></div>
</body>
</html>

在这里插入图片描述
一个标签可以同时使用多个类名：

标签使用多类名的场景：
可以把一些标签的相同样式放到一个类里；
标签都可以调用一个公共的类，然后再调用自己独有的类；
节省代码量；
方便对样式的统一修改。

还是举上述的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<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-size {
            width: 100px;
            height: 100px;
            font-size: 20px;
        }

        .bg-pink {
            background-color: pink;
        }

        .bg-purple {
            background-color: purple;
        }
    </style>
</head>
<body>
    <!--多类名的使用-->
    <div class="box-size bg-pink">哈喽</div>
    <div class="box-size bg-purple">哈喽</div>
    <div class="box-size bg-pink">哈喽</div>
</body>
</html>

在这里插入图片描述
3.3 基础选择器: id选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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>id选择器</title>
    <style>
        /* 
            id选择器：只能被调用一次，具有唯一性。
            （类选择器无唯一性，可供多个标签使用）

            类选择器在修改样式中使用最多，而id选择器主要注重其唯一性，经常和js搭配使用，也供后端使用。
        */
        #title-style {
            color: brown;
        }
    </style>
</head>
<body>
    <p id="title-style">2022北京冬奥会</p>
</body>
</html>

在这里插入图片描述
3.4 基础选择器: 通配符选择器

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        /* 
            通配符选择器：使用*来定义，作用对象是页面中的所有标签，
            通配符选择器不需要去调用，会自动给所有的元素使用样式，
            一般是用来消除掉所有标签的margin和padding值。
        */
        * {
            color: red;
        }
    </style>
</head>
<body>
    <div>哈哈哈哈哈</div>
    <ul>
        <li>吼吼吼</li>
    </ul>
    噜噜噜噜
</body>
</html>