CSS三大特性:层叠性、继承性、优先级

100人浏览 2024-09-20 08:48:25

CSS全称为“层叠样式表”，如果说html是网页界面的骨架，那么CSS就是骨架的衣服，通过选择器来给html文件中的元素“化妆”。CSS有三个非常重要的特性：层叠性、继承性与优先级。本篇文章介绍了这三个特性，以及开发者在使用CSS时关于这三个特性需要注意的地方。

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突样式。

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

层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*就近原则，后来居上，层叠red，显示blue*/
            div {
                color: red;
            }

            div {
                color: blue;
            }
        </style>
    </head>
    <body>
    	<div>青春不常在，抓紧谈恋爱</div>
    </body>
</html>

继承性

现简单的理解就是：子承父业。

恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性），降低CSS样式的复杂性。

继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞。

行高的继承性

行高可以跟单位，也可以不跟单位。
行高继承的优势在于子元素可以根据自己文字大小自动调整行高。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*p标签继承父标签div的red颜色*/
            div {
                color: red;
                /*font: 14px/14px 'Microsoft YaHei';*/
                /*以下写法表示：如果子元素p没有设置行高，则p行高=1.5 * p文字大小 */
                font: 14px/1.5 'Microsoft YaHei';
            }
        </style>
    </head>
    <body>
        <div>
            <p>青春不常在，抓紧谈恋爱</p>
        </div>
    </body>
</html>