前端入门学习笔记(十五)CSS基础(三)注释、CSS 样式的级联与继承

CSS 注释

虽然HTML与CSS会混合使用,但是CSS的注释为

/* */

与HTMl的注释相同,CSS的注释同样可以跨行。

/*


*/

CSS 级联

网页的最终外观是不同的样式结合的结果。
通过样式的三个主要来源形成一个级联,其优先顺序如下:
1.由页面的作者创建的样式表
2.用户自定义样式
3.浏览器的默认样式

然后是基于选择符和特殊性的规则排序:
1.内联样式表的优先级最高。
2.id选择符,当有多个id选择符时,具有id选择符多的规则胜出。
3.如果没有id选择符,或者数量相同,那么规则中有最多类或伪类的规则有较高优先级。
4.如果类(或是没有类),那么规则中有最多元素数量的,优先级较高。
5.如果id,class,和元素数量都相同,则最近声明的原则有最高优先级。

下面为大家演示一下

<html>
<head>
    <title>层叠特性</title>
    <style>
        p {
            color: green;
        }

        .red {
            color: red;
        }

        .purple {
            color: purple;
        }

        #line {
            color: blue;
        }
    </style>
</head>

<body>
    <p>这是第1行文本</p>
    <p class="red">这是第2行文本</p>
    <!--适用规则 3 -->
    <p id="line" class="red">这是第3行文本</p>
    <!--适用规则 2 -->
    <p style="color:orange;" id="line">这是第4行文本</p>
    <!--适用规则 1 -->
    <p class="purple red">这是第5行文本</p>
    <!--适用规则 5 purple 的声明距离此行代码更近-->
</body>
</html>

效果如下
在这里插入图片描述
可以简单的理解为,优先级(特殊性) sytle > id > class,并采取就近原则。


CSS 继承

除非另有定义,子元素通常会采用父元素的特征。

<html>
<head>
    <style>
        body {
            color: green;
            /* body 为父元素 */
        }
    </style>
</head>
<body>
<p>
    路人甲
    <!-- p 为子元素 -->
</p>
</body>
</html>

效果如下
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/TUTsmile/article/details/82987923