4.css三大特性

最新推荐文章于 2022-11-26 14:17:10 发布

121689Stone

最新推荐文章于 2022-11-26 14:17:10 发布

阅读量228

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_37993288/article/details/77409547

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.层叠性

定义：当多个样式给同一个（同一类）标签时，样式发生冲突时，按照浏览器解析顺序从上到下决定，总是执行后边代码（后边代码层叠前面代码）。

<head>
    <style type="text/css">
        .box2{
            font-size:200px;
            color:blue;
        }
        .box{
            font-size:60px;
            color:red;                           显示结果
    </style>
</head>
<body>
    <div class="box box2">指南</div>
</body>

2.继承性

※特点：继承性发生的前提是有包含（嵌套关系）

文字颜色可以继承；
文字大小可以继承；
字体可以继承；
字体粗细可以继承；
文字风格（斜体，正常）可以继承；
行高可以继承；

总结：文字的所有属性都可继承。
特殊情况：

h系列不能继承文字大小（h1实际大小为文字大小的2倍，h2继承的为1.5倍）
a标签不能继承颜色。

<head>
    <style type="text/css">
        .father{
            font-size:200px;
            color:blue;
        }                  
    </style>
</head>
<body>
    <div class="father"><p>指南</p></div>
</body>

3.优先级

权重顺序：默认样式 0 < 标签选择器 1 < 类选择器 10 < id选择器 100 < 行内样式 1000

<head>
    <style type="text/css">
        #con{
            font-size:100px;
            color:pink;
        }
        .box{
            font-size:60px;
            color:green;   
        }
        div{
            font-size:80px !important;
            color:red !important;   
        }               
    </style>
</head>
<body>
    <div class="box" id="con" style="font-size:12px; color:yellow;">指南</div>
</body>

优先级特点：
（1）继承的权重为0（当标签自身赋予了样式时，则不继承父级元素样式。）

<head>
    <style type="text/css">
        .father{
            font-size:60px;
            color:red;
        } 
        p{
            font-size:20px;
            color:blue;
        }
        #box{
                font-size:500px;
            color:green;
        }                         
    </style>
</head>
<body>
    <div class="father" id="box"><p>指南</p></div>
</body>

（2）权重会叠加

<head>
    <style type="text/css">
        p.son{
            font-size:120px;
            color:red;
        } 
        p{
            font-size:20px;
            color:blue;
        }
        .father #baby{ 权重最重，为显示结果
                font-size:12px;
            color:orange;
        }       
        .father .son{
                font-size:80px;
            color:pink;
        }       
        .son{
                font-size:500px;
            color:green;
        }                         
    </style>
</head>
<body>
    <div class="father">
        <p class="son" id="baby">指南</p>
    </div>
</body>

121689Stone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.css三大特性

1.层叠性定义：当多个样式给同一个（同一类）标签时，样式发生冲突时，按照浏览器解析顺序从上到下决定，总是执行后边代码（后边代码层叠前面代码）。<head> <style type="text/css"> .box2{ font-size:200px; color:blue; } .box{
复制链接

扫一扫

专栏目录