WEB前端之CSS的三大特性

CSS的三大特性

一.层叠性

    层叠性主要解决的是样式冲突的问题。

    层叠性原则：1.样式冲突，哪个样式离结构近，就执行哪个样式。（就近原则）

　　　　　　    2.样式不冲突，则不会重叠。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: red;
            font-size: 50px;
        }
        div{
            color: pink;
        }
    </style>
</head>
<body>
    <div>精神小伙</div>
</body>
</html>

上例为样式冲突，执行结果如下：

 二.继承性

    1.子标签会继承父标签的某些样式，如文本颜色和字号（text-，font-，line-，color等这些元素开头的可以继承）。

    2.行高的继承  font：字体大小/行高  字体；

    font：12px/1.5 Microsoft YaHei；

  •         此时子元素的行高为当子元素文字大小的1.5倍。
  •         若子元素没有指定文字大小，则继承父元素的文字大小，则行高为父元素文字大小的1.5倍。

  • 　　 设置body行高为1.5，最大的优势就是里面子元素可以根据自己的文字大小自动调整行高。        

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: red;
            font-size: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <p>帅气小伙</p>
    </div>
</body>
</html>

上例为为<p>标签继承<div>的样式，执行结果如下：

 

三.优先级

        当同一个元素指定多个选择器，就会有优先级的产生。

　　 1.选择器相同，则执行层叠性。

        2.选择器不同，则根据选择器权重执行。

选择器 选择器权重
继承或者* 0，0，0，0
元素选择器 0，0，0，1
类选择器，伪类选择器 0，0，1，0
ID选择器 0，1，0，0
行内样式style=“” 1，0，0，0
！important 无穷大

        3.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0.

        4.权重的叠加：如果是复合选择器，则会有权重叠加。

          例如：div ul li的权重为0，0，0，3；

　　　　　   .nav ul li的权重为0，0，1，2；

　　　　　　a：hover的权重为0，0，1，1；

　　　　　  .nav a的权重为0，0，1，1；

　　权重相同，采取就近原则。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div ul li{
            color: red;
            font-size: 50px;
            text-align: center;
        }
        .nav ul li{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>洒脱的个性</li>
        </ul>
    </div>
</body>
</html>

权重大的执行，执行结果如下：

 

 

posted @ 2020-04-14 12:33  依斐  阅读(130)  评论(0)    收藏  举报