CSS3学习笔记-01-引入方式与权重(优先级)

最新推荐文章于 2022-12-06 19:23:03 发布

优雅哥cc

最新推荐文章于 2022-12-06 19:23:03 发布

阅读量8.1k

点赞数 1

分类专栏： CSS3学习笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_43742708/article/details/106480263

版权

CSS3学习笔记专栏收录该内容

12 篇文章 12 订阅

订阅专栏

文章目录

一、link方式引用
二、导入样式
三、CSS优先级

一、link方式引用

这种标准方式
rel='stylesheet' 表示这是一个样式表文件’
tpye='text/css' 文档类型，不加默认也可以解析’

<link rel="stylesheet" href="style.css" type="text/css">

另外还有基本的嵌入式样式与行内样式，这里不做介绍。

二、导入样式

导入样式我们可以在外部样式表里边导入另外的样式表文件。
也可以在嵌入式样式也就是<head> </head>标签里边导入：

import文件：

a{
    color: green;
}

外部样式表导入语法：

@import url("import.css");
body{
    background-color: red;
}

嵌入式样式内导入语法：

<style>
    @import url('import.css');
    body{
        background-color: red;
    }
</style>

效果都是一样的。

三、CSS优先级

3.1 CSS选择器权重

在这里插入图片描述
!important > 行内样式 > ID选择器 > Class、属性、伪类选择器 > 类型和伪元素选择器

权重计算表达式：在这里插入图片描述
只需要判断最左边的数字，谁大样式就是谁。

如果权重相同，那么以定义顺序靠后的优先，或以!important标记优先。
详细讲解：两分钟掌握CSS优先级BiliBili

3.2 CSS权重实例

<style>
     /* 21 */
     body .text[class]{
         color: red;
     }
     /* 20 */
     .text[class]{
         color: teal;
     }

     /* 100 */
     #test-text{
         color: blue;
     }
 </style>
<body>
    <!-- style 的权重是1000 -->
    <div class="text" id="test-text" style="color: green;">测试文本</div>
</body>

效果：
在这里插入图片描述

3.3 属性继承权重为 null

注意：继承没有权重

<style>
    article{
        color: red;
    }
</style>
<body>
    <article>
        <div>测试文本</div>
    </article>
</body>

效果：
在这里插入图片描述

<style>
    /* 继承没有权重 */
    article{
        color: red;
    }
    /* 权重为 1 */
    div{
        color: royalblue;
    }
</style>
<body>
    <article>
        <div>测试文本</div>
    </article>
</body>

效果：
在这里插入图片描述

3.4 *号通配符的权重为0 0>null

通配符的权重大于继承

<style>
    *{
        color: blue;
    }
    article{
        color: red;
    }
</style>
<body>
    <article>
        <!-- 
            此处应用标签 article的样式  权重为 0001
         -->
         
        测试文本
        <h3>
            <!-- 
                此处继承article的样式 权重为 null
                此处还应用通配符 * 的样式  权重为 0
                根据规则: 0 > null 所以颜色为蓝色
             -->
            
            h3内部测试文本
        </h3>
    </article>
</body>