CSS学习：四种引入样式及其区别，基础选择器，高级选择器，CSS的层叠性和继承性

最新推荐文章于 2024-04-10 10:24:40 发布

RoxyL

最新推荐文章于 2024-04-10 10:24:40 发布

阅读量314

点赞数 1

分类专栏： CSS基础文章标签： css

本文链接：https://blog.csdn.net/qq_45799504/article/details/115302070

版权

CSS基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS学习：四种引入样式及其区别，基础选择器，高级选择器，CSS的层叠性和继承性

四种引入样式

行内式
内嵌式
外链式
导入式

行内式样式表

基本语法：（之前学习的就是：所有样式写在标签内部）

<div style="width:100px;height:100px;background-color:red;"></div>

引入为止：在标签的style属性中，等号后面的引号内属性CSS样式，多个属性使用分号分隔

内嵌式样式表

基本语法：书写在head标签的内部，title标签的下面，一对style标签中。

<!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>
    <!-- 内嵌式：head标签内部 title标签下面 一对style标签中-->
    <style>
        /* div选择器 */
        div{
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

CSS内嵌式样式表

外链式样式表

基本语法：书写在head标签的内部，title标签的下面，一个link内部去进行css文件引入。
link标签的作用就是引入外部文件，通过href属性，属性值是文件地址。
rel属性值如果是stylesheet，代表的就是引入样式表。

<!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>
    <link rel="stylesheet" href="css外链式/1.css">
</head>
<body>
    <div>文字</div>
</body>
</html>

css外链式/1.css中：
（通过引入css文件到html文件中，从而实现样式的加载）
注：css文件的内部不需要写任何的标签，直接属性css选择器和代码，因为css文件内部是不允许属性HTML骨架的。

div{
    color: blue;
    font-size: 20px;
}

CSS外链式样式表

导入式样式表（了解即可）

基本语法：书写在head标签的内部，title标签下面，一对style标签内，通过@import进行导入。
url内部是css文件的引入地址。
注：导入式必须写在style标签的最顶部。

<!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>
        @import url(css外链式/1.css);
    </style>
</head>
<body>
    <div>文字</div>
</body>
</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>
    <link rel="stylesheet" href="css外链式/1.css">
    <style>
        @import url(css外链式/2.css);
        p{
            color: blue;
        }
    </style>
</head>
<body>
    <p style="color: red;">文字</p>
</body>
</html>

css外链式/1.css中：

p{
    color:purple;
}

css外链式/2.css中：

p{
    color: yellow;
}

测试结果显示
CSS权重

四种样式表的区别和优缺点：
CSS样式权重

选择器

选择器分为两种，一种是基础选择器，一种高级选择器。

基础选择器：标签选择器、id选择器、类名选择器。
高级选择器；后代选择器、交集选择器、并集选择器。

基础选择器

标签选择器

选择方法：通过标签名称去选择器。
书写方法：标签名。
选择范围：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>
        p{
            color: red;
        }
        h3{
            color: blue;
        }
    </style>
</head>
<body>
    <p>
        段落标签
    </p>
    <div>
        <div>
            <div>
                <p>段落标签</p>
            </div>
        </div>
    </div>
    <h3>
        三级标题
    </h3>
    <h3>
        三级标题
    </h3>
</body>
</html>

标签选择器

id选择器

选择方法：通过标签上id属性进行选择。
书写方法：#id属性值（自定义）。
选择范围：只能选中一个标签。

优点：提高了确定唯一性，并且id属性权重高。id就相当于是标签的身份证号，具有唯一性。规定页面上不允许有同名id属性。（有的话也不会报错，浏览器依旧可以正常加载。）
缺点：只能实现单选。

<!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>
        #p1{
            color: blue;
        }
    </style>
</head>
<body>
    <p id="p1">第一段文字</p>
    <p>第二段文字</p>
    <p>第三段文字</p>
</body>
</html>

id选择器

类名选择器

选择方法：通过标签上的clas属性进行选择。
书写方法：通过.(点)匹配对应的class属性值。
选择范围：选择所有同名clss属性标签。

一个标签的class属性值可以有一个或者多个，多个class属性之间使用空格隔开。

<!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>
        .par{
            color: blue;
        }
        .cur{
            /* 如果cur在par上面 那么 第二个p标签还是会显示blue 蓝色 
            此处涉及到重叠性 以后再讲*/
            color: yellow;
        }
    </style>
</head>
<body>
    <p class="par">第一段文字</p>
    <p class="par cur">第二段文字</p>
    <p class="par">第三段文字</p>
</body>
</html>

类名选择器 注：id和class属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线。

通配符选择器

选择方法：*（单独一个符号即可）
书写方法：选择包含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>
        *{
            color:red;
        }
    </style>
</head>
<body>
    <span>文字</span>
    <p>p标签</p>
    <div>div</div>
    <h3>h3</h3>
</body>
</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>
        p{
            width: 100px;
            height: 100px;
            background: purple;
        }
    </style>
</head>
<body>
    <p>
        p标签
    </p>
</body>
</html>

通配符默认边距将上述代码在style处添加通配符选择器即可，操作如下：

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        p{
            width: 100px;
            height: 100px;
            background: purple;
        }
    </style>

通配符边距对比

高级选择器

后代选择器

书写方法：使用空格连续连接多级选择器。
作用：通过标签之间的后代关系去决定选择某个范围内的元素，具有精确匹配性。

注：后代关系不一定是父子关系（即直接嵌套关系）。

<!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>
        .box ul li{
            /* 如果只是设置 ul li{}或者li{} 那么box2里的也会变成红色*/
            color: red;
        }
            /* 后代关系不一定是父子关系 直接设置 .box li{}也是可以的 */
        .box2 ul li{
            color: green;
        }
    </style>
</head>
<body>
    <!-- 输入div.box 即创建一个盒子-->
    <div class="box">
        <ul>
            <li>box里面的li</li>
            <li>box里面的li</li>
            <li>box里面的li</li>
            <li>box里面的li</li>
        </ul>
    </div>
    <div class="box2">
        <ul>
            <li>box2里面的li</li>
            <li>box2里面的li</li>
            <li>box2里面的li</li>
            <li>box2里面的li</li>
        </ul>
    </div>
</body>
</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>
        p{
            color: red;
        }
        p.par{
            /* 这样使得div标签就算也有类名属性par 但是不受影响 */
            /* 如果单纯是 par{} 那么div标签的颜色也会被改变 */
            color: blue;
        }
    </style>
</head>
<body>
    <p>文字</p>
    <p class="par">文字</p>
    <div class="par">文字</div>
</body>
</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>
        p,div{
        /* div和p标签设置的属性是一样，这个时候我们可以通过并集选择器设置同样的属性值 */
            color: red;
        }
    </style>
</head>
<body>
    <p>文字</p>
    <div>文字</div>
</body>
</html>

注：并集选择器非常灵活，可以结合多种选择器使用，就是利用逗号进行分割从而区分属性。

        /* 下面代码指的是 #par里面的.par里面的li和p标签的文字颜色为蓝色 */
        #par .par li,p{
            color: blue;
        }

CSS的层叠性和继承性

继承性

特征：只需要给祖先元素设置文字属性，后代元素就能加载这个属性。
注：css可以继承的属性都是关于文字的，比如color，font-size，font-family。

<!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>
        .box{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>文字</li>
        </ul>
    </div>
</body>
</html>

继承性

层叠性

HTML骨架：

    <p class="par" id="par">
        文字
    </p>

CSS样式：

    <style>
        p{
            color: red;
        }
        .par{
            font-size: 20px;
        }
        #par{
            /* 给文字添加下划线 */
            text-decoration: underline;
        }
    </style>

层叠性1 如果多个选择器设置了同一属性，就会体现出CSS的层叠性（即部分被杠掉了）：

    <style>
        p{
            color: red;
        }
        .par{
            color: blue;
        }
        #par{
            color: purple;
        }
    </style>

层叠性2

选择器的权重

id选择器>class类名选择器>标签选择器

即如果被多个选择器同时选中，首先看id的，如果没有id的，看class的，如果没有class的，看标签的。

<!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>
        .box1 div.box2 #box3 p{
            color: red;
        }   
        #box1 #box2 div.box3 p{
            color: blue;
        }
        #box1 div.box2 .box3 p{
            color: pink;
        }
    </style>
</head>
<body>
    <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>文字</p>
            </div>
        </div>
    </div>
</body>
</html>

选择器权重
如果遇到复杂的选择器，不要慌，要学会数选择器。

数选择器方法：

首先将所有的选择器罗列出来，从id选择器比较，如果id选择能比出大小，则数量多的获胜。
如果id选择器数量相同或者没有，则比较类名选择器，数量多的获胜。
如果类名选择器数量相同或者没有，则比较标签选择器，数量多的获胜。
如果所有选择器数量相同，后写的覆盖先写的。

上述是所有选择器都选择同一个元素p，所以需要数权重数量，现在如果都没有选中：

如果都没有选择中对应标签，就看谁离得近，离得近的就是被选中的（即就近原则），如果选择的都是同一个元素中，再去数权重。

    <style>
        /* 没选中同一个 */
        #box1 #box2 {
           color: blue;
       }
       .box1 .box2 .box3 {
           color: purple;
       }
    </style>

就近原则
遇到了复杂的选择器：

首先看是否同时选中的一个元素，如果都选择的是同一个元素，则数权重。
如果层级不同，比如有的是父亲级别，有的是爷爷级别，使用就近原则，谁离得近听谁的。
如果所有的权重一样，选择位置也一样，后书写的覆盖先写的。

RoxyL

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习：四种引入样式及其区别，基础选择器，高级选择器，CSS的层叠性和继承性

CSS学习：四种引入样式及其区别文章目录CSS学习：四种引入样式及其区别引入样式行内式样式表内嵌式样式表外链式样式表导入式样式表（了解即可）样式表的区别引入样式行内式内嵌式外链式导入式行内式样式表基本语法：（之前学习的就是：所有样式写在标签内部）<div style="width:100px;height:100px;background-color:red;"></div>引入为止：在标签的style属性中，等号后面的引号内属性CSS样式，多个属性使用分号
复制链接

扫一扫