(前端)html与css,15、继承性和层叠性

时间:2019-06-12
本文章向大家介绍(前端)html与css,15、继承性和层叠性,主要包括(前端)html与css,15、继承性和层叠性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1、继承性

层叠式的第一个特性:继承性

继承性:给祖先设置属性,后代会继承祖先里的某些属性(并不是全部属性都继承过来)

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background: skyblue;
            border: 1px solid red;
            color: green;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>这是标题</h2>
        <p>这是段落</p>
        <p>这是段落</p>
    </div>
</body>
</html>
View Code

 ←给名为box的div设置属性,它的后代,也就是图里的h2和p标签就会继承box的一些属性。

css继承性:后代元素能继承来自祖先元素的文字样式,不能继承盒子样式。

通过控制台看样式来源↓

效果图↓

可以从效果图里看出来,文字继承了祖先的文字属性。

继承性这个特性很好,可以将整体的文字样式写在最祖先body,后面的标签自动去继承,如果有特殊属性,只要把这个标签单独写就可以。

原文地址:https://www.cnblogs.com/StevenSunYiwen/p/11009657.html