CSS的三大特性

最新推荐文章于 2023-02-13 17:10:46 发布

bit..

最新推荐文章于 2023-02-13 17:10:46 发布

阅读量3.2k

点赞数 2

分类专栏： html和css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_68773927/article/details/128050835

版权

html和css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

🍓个人主页：bit..

🍒系列专栏：Linux(Ubuntu)入门必看 C语言刷题数据结构与算法 HTML和CSS3

1.1层叠性

1.2继承性

1.3优先级

CSS的三大特性：层叠性，继承性，优先级。

1.1层叠性

相同选择器给设置相同的样式，此时一个相同的样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突问题。

层叠性原则：

样式冲突遵循的原则就是究竟原则，那个样式离结构近，就执行那那个样式。
样式不冲突，不会叠加。

<!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>
        div {
            font-size: 18px;
        }
        
        div {
            color: pink;
        }
    </style>
</head>

<body>
    <div>C罗</div>
</body>

</html>

1.2继承性

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>Document</title>
    <style>
        div {
            color: pink;
            font-size: 18px;
        }
        /* div {
            color: pink;
        } */
    </style>
</head>

<body>
    <div>
        <p>C罗</p>
    </div>
</body>

</html>

恰当的使用继承可以简化代码，降低CSS的复杂性。
子元素可以继承父元素的样式（text-,font-,line- 这些元素开头的可以继承，以及color属性）
继承性的口诀：龙生龙，凤生凤，老鼠生的孩子会打洞。

行高的继承性：

<!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>
        /* div {
            color: pink;
            font-size: 18px;
        } */
        /* div {
            color: pink;
        } */
        
        body {
            font: 12px/1.5 Microsoft YaHei;
        }
    </style>
</head>

<body>
    <div>
        <p>C罗</p>
        <p>梅西输了</p>
    </div>
</body>

</html>

行高可以跟单位也可以不跟单位。
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前元素的文字大小*1.5
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

1.3优先级

当同一个元素指定多个选择器就会由优先级产生。
选择器相同，则执行层叠性。
选择器不同，则根据选择器权重执行

选择器权重：

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
Id选择器	0,1,0,0
行内选择器 style=" "	1,0,0,0
!important 重要性	无穷大