web前端-CSS特性

球岛

已于 2022-06-07 16:41:29 修改

阅读量278

点赞数 1

文章标签：前端开发语言 css html

于 2022-06-07 14:43:20 首次发布

本文链接：https://blog.csdn.net/qq_53584660/article/details/125138226

版权

本文详细介绍了CSS中继承性和层叠性的概念及应用。内容包括：哪些样式可以被子元素继承，如颜色、字体等；如何通过浏览器调试工具判断样式继承；实例展示了a标签和h系列标签的继承性失效情况；并探讨了层叠性，即相同和不同样式的层叠效果。最后，讲解了样式优先级的规则和！important的使用注意事项。

摘要由CSDN通过智能技术生成

继承性

特性：子元素有默认继承父元素样式的特点
可以继承的常见属性

1.color

2.font-size、font-weight、font-style、font-family

3.text-indent、text-align

4.line-height

5. ......

注意点：

可以通过调试工具判断样式是否可以继承

控制文字的属性都能继承，不是可以控制文字的属性都不能继承。

1.控制文字的属性都能继承（color）：

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


<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>

浏览器显示效果如下：

检查Chrome浏览器源代码：可以看出来，span标签继承了父标签div的属性

2.不是控制文字的属性都不能继承：

    <style>
        div {
            color: red;
            font-size: 30px;
            height: 300px;
        }
    </style>
</head>



<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>

检查Chrome浏览器源代码：

div宽高变化：

span宽高显示：

由此可见，span并未继承父标签宽高属性，因为这不是控制文字的属性

拓展:继承性失效的情况

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

1.a标签的color会继承失效

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



<body>
    <div>
        <a href="#">这是超链接</a>
        <h1>一级标题</h1>
    </div>
</body>

因为超链接标签在浏览器中默认的颜色是蓝色，所以这里，a标签继承性失效，无法继承父标签的color属性，浏览器显示情况如：依然显示的是默认颜色，蓝色

如果想让a标签的字体变成红色，需要单独设置，无法利用继承性：

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



<body>
    <div>
        <a href="#">这是超链接</a>
        <h1>一级标题</h1>
    </div>
</body>

浏览器显示情况如图：

a标签文字颜色改变。

2.h系列标签的font-size会继承失效

    <style>
        div {
            color: red;
            font-size: 12px;
        }
    </style>
</head>



<body>
    <div>
        <a href="#">这是超链接</a>
        <h1>一级标题</h1>
    </div>
</body>

h系列标签在浏览器中有其默认的字体大小，所以h1标签继承性失效，无法继承父标签div的font-size属性，字体大小没有发生变化。

h标签字体大小没有变化

层叠性

特性：

1.给同一个标签设置相同的样式——此时样式会层叠覆盖——最终写在最后的样式会生效

    <style>
        div {
            color: red;
            color: green;
        }
    </style>
</head>
<body>
    <div>
        文字
    </div>

后面的color会叠加在前面的color上，显示绿色：

2.给同一个标签设置不同的样式——此时样式会层叠叠加——会共同作用在标签上

    <style>
        div {
            color: red;
            color: green;
        }
        .box {
            font-size: 30px;
        }
    </style>
</head>



<body>
    <div class="box">文字</div>
</body>

最终浏览器显示如下：color和font-size同时显示出来了