CSS实战手册-第四章

最新推荐文章于 2021-08-03 21:14:19 发布

JackFruitxx

最新推荐文章于 2021-08-03 21:14:19 发布

阅读量149

点赞数

分类专栏： CSS实战手册文章标签： css3

本文链接：https://blog.csdn.net/qq_42651398/article/details/115164689

版权

CSS实战手册专栏收录该内容

2 篇文章 0 订阅

订阅专栏

继承样式节省时间

什么是继承

继承是指,应用在某个标签上的css属性传给了内部嵌套的标签

    <body style="color:red">
        <p>
            <em></em>
        </p>
    </body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z4EADEfc-1616553026279)(images\4\隔代继承.jpg)]

在上述例子中

body属性中color样式会被嵌套在其中的标签所继承,即被所有子代所继承
隔代继承,即em标签也会继承body标签的样式

继承不仅适用于标签样式,任何类型的样式都能继承

id选择器后代选择器和其他类型的选择器都能继承

继承如何简化继承表

使用继承可以简化样式表,例如如果想整个网页都应用相同的字体,则可以:

    body{
        font-family:Arial,Helvetica,sans-serif
    }

网页中所有的标签都会继承这个样式

使用继承还可以把样式属性应用到网页中的某个区域上

继承的局限性

继承的局限性是很多属性不会被后代标签继承:

影响元素在页面中所在位置的属性,以及元素外边距,背景色和边框等属性不会被继承
浏览器在渲染标签时会继承各自的内部样式,如标题的字号和链接的颜色等等. 如果将文字字号应用到body标签中时,h1标签内的字体仍然会比其他字体要大,因为他既继承了默认的字体大小,又继承了body的字体大小
样式冲突时,更具体的样式胜出

<style>
    div{
        color:red;
        font-size: 10px;
    }
</style>
<body>
    <div>
        <p>
            p继承了红色<br><em>em隔代继承了红色</em>
        </p>
        <h1><h1>继承了div的字体大小和默认的字体大小</h1></h1>
        <a href="#">a标签颜色不变</a>
    </div>
    <h1>正常h1大小x</h1>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvtAvsew-1616553026287)(images\4\h1a.jpg)]

JackFruitxx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实战手册-第四章

继承样式节省时间什么是继承继承是指,应用在某个标签上的css属性传给了内部嵌套的标签 <body style="color:red"> <p> <em></em> </p> </body>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z4EADEfc-1616553026279)(images\4\隔代继承.jpg)]在上
复制链接

扫一扫