CSS三大特性——继承性

小波

1年前更新

170

文章目录[隐藏]

继承
行高继承

字标签会继承父标签的样式——子承父业。

继承

<head>
   <style>
        div{
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙凤生凤，老鼠的孩子会打洞</p>
    </div>
</body>

这个时候p标签并没有设置为红色，但是我们吧div设置为了红色，然后字标签继承父标签的红色。

但是继承并不是继承所有的样式，一般都是继承文字元素的样式——text-、font-、line-这些开头的一级color属性，这些都会继承。

<body>
    <p>造梦空间论坛</p>
    <p>龙生龙凤生凤，老鼠的孩子会打洞</p>
</body>

如果我们需要把这里面的字体颜色改成微软雅黑，字体大小12px，白色，css可以写为：

body{
            color: #fff;
            font: 12px 'Microsrft YrHei';
        }

行高继承

如果我们需要把上面连个加个24px行高可以直接把css改为：

body{
            color: #fff;
            font: 12px/24px 'Microsrft YrHei';
        }

行高可以跟单位，也能不跟单位。

跟了就是直接继承，如果不带px，直接写个1.5，那么行高就是当前文字大小的1.5倍，如果当前文字没有设置大小将会继承父级的文字大小。

评分

欢迎为Ta评分

赞赏