css特性之继承性

最新推荐文章于 2023-04-02 19:25:20 发布

diligentkong

最新推荐文章于 2023-04-02 19:25:20 发布

阅读量846

点赞数

CC 4.0 BY-SA版权

分类专栏： css小基础文章标签： css

本文链接：https://blog.youkuaiyun.com/diligentkong/article/details/54288580

css小基础专栏收录该内容

4 篇文章

订阅专栏

继承性通俗的讲：给父元素设置一些属性，其子元素也可以使用，子元素可以继承父元素的属性。下面看例子说明：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <p>我是段落1</p>
            <p>我是段落2</p>
            <p>我是段落3</p>
        </div>
    </body>
</html>

显示效果：
这里写图片描述
通过浏览器审查元素，得出 p标签的颜色属性继承自父元素div

并不是所有的属性都有继承性，如下：

<style type="text/css">
        div{
            color:blue;
            border: 2px solid red;
        }
    </style>
<body>
    <div>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

这里写图片描述

在审查元素的时候，亮色代表继承而来的，灰色表示并未继承（此处表示并未继承，有时候也表示并未显示出来，是具体情况而定）
总结
*
以color- font- text- line- 开头的，这些关于文字样式的，都能够继承；所有关于盒子的，定位的，布局的属性都不能继承。
具体可继承的属性为：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、text-indent、text-align、list-style、list-style-type、list-style-position、list-style-image。
具体不可继承的属性为：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before等；
*
继承性是从大贯穿到最小的，从自己开始的，直到最小的元素。即继承性不光儿子可以继承，只要是后代都可以继承。

注意：
1. a标签的字体颜色不是继承来的，给父元素设置颜色是不能改变a标签的字体颜色；

<style type="text/css">
        div{
            color:red;

        }
    </style>
<body>
    <div>
        <p>我是段落</p>
        <a href="#">我是超链接</a>
    </div>
</body>

这里写图片描述

2.h标签的字体大小不是继承来的。示例：

<style type="text/css">
        div{
            color:red;
            font-size: 20px;
        }
    </style>

<body>
    <div>
        <h2>我是二级标题</h2>
        <p>我是段落</p>
        <a href="#">我是超链接</a>
    </div>
</body>

这里写图片描述