CSS三大特性-层叠性、继承性、优先级及权重注意点

最新推荐文章于 2024-06-07 15:12:35 发布

WangZhang_521

最新推荐文章于 2024-06-07 15:12:35 发布

阅读量239

点赞数 1

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/WangZhang_521/article/details/122177198

版权

CSS 专栏收录该内容

85 篇文章 1 订阅

订阅专栏

01-层叠性

<!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>CSS层叠性</title>
    <style>
        div {
            color: brown;
            /* 样式不冲突，不会层叠 */
            font-size: 30px;
        }
        /* 层叠性原则:样式冲突，遵循的原则是就近原则，哪个样式距离结构近，就执行哪个样式 */
        
        div {
            color: pink;
        }
    </style>
</head>

<body>
    <div>长江前浪推后浪，前浪死在沙滩上</div>
</body>

</html>

效果展示

在这里插入图片描述

02-继承性

<!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>CSS继承性</title>
    <!-- 子标签会继承父标签的某些样式 -->
    <style>
        div {
            color: purple;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙，凤生凤，老鼠的孩子会打洞</p>
    </div>
</body>

</html>

效果展示

在这里插入图片描述

02-继承性之行高的继承性

<!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>
        body {
            color: red;
            /* 行高可以带单位也可以不带 */
            font: 20px/1.5 'Microsoft YaHei';
        }
        
        div {
            /* 子元素继承了父元素的行高1.5 */
            /* 这个1.5就是当前元素文字大小 font-size的1.5倍,即14*1.5=21px*/
            font-size: 14px;
        }
        
        p {
            /* 当前行高1.5*16=24 */
            font-size: 16px;
            /* li没有手动指定文字大小,则会继承父亲的文字大小 body 12px */
            /* 当前li 的行高就是12*1.5 */
        }
    </style>
</head>

<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

</html>

效果展示

在这里插入图片描述

03-优先级（哪个优先级高，则优先执行哪个）

<!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>CSS优先级</title>
    <style>
        /* 标签选择器  级别最低 后面如果加了!important则优先级无穷大,则优先执行 .选择器优先级表在手写笔记里*/
        
        div {
            color: red !important;
        }
        /* 类选择器 */
        
        .text {
            color: royalblue;
        }
        
        #demo {
            color: seagreen;
        }
    </style>
</head>

<body>
    <div class="text" id="demo" style="color: violet;">你笑起来真好看</div>
</body>

</html>

04-CSS权重注意点

<!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>CSS权重注意点</title>
    <style>
        /* id选择器 父亲的权重是100  */
        
        #father {
            color: darkred;
        }
        /* p继承的权重是0,所以p的权重是本身的1 */
        /* 所以以后看标签到底执行哪个样式,就先看这个样式有没有被直接选出来,如果直接选出来则优先执行选出来的样式 */
        
        p {
            color: darkturquoise;
        }
        
        body {
            color: fuchsia;
        }
        /* a链接浏览器默认制定了一个样式 蓝色的 有下划线 相当于单独执行了 a {color"blue"} ,所以body的样式是无效的*/
        /* 如果想要改变a的样式,则需要单独制定,以下是例子 */
        
        a {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="father">
        <p>你还是很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>

</html>

效果展示

在这里插入图片描述

WangZhang_521

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS三大特性-层叠性、继承性、优先级及权重注意点

01-层叠性<!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"> <titl
复制链接

扫一扫