初入WEB前端（12）CSS 继承

最新推荐文章于 2022-02-22 00:45:00 发布

宋辰轩

最新推荐文章于 2022-02-22 00:45:00 发布

阅读量167

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_44004068/article/details/107066907

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: darkorange;
            font-size: 30px;
        }
        div{
            color: darkslateblue;
            font-size: 30px;
        }
        /* 继承：样式的继承，为一个元素设置的样式同时会应用到它的后代元素上
            发生在祖先元素和后代元素上
            利用继承可以让一些通用的样式统一设置到共同的祖先上
            这样只需要设置一次就可以让所有的元素都具有该样式
               但不是所有的样式都会被继承：背景相关、布局相关的不会被继承（等等）
            */
    </style>
</head>
<body>
    <p>
        我的
        <br>
        <span>我是p元素里的</span>
    </p>
    <span>我是p元素外的</span>
    
    <div>
        <span>div里面</span>
    </div>

    <span>div外面</span>
</body>
</html>

在这里插入图片描述

我们可以看到，background-color 表格中 Inherited是no，说明它是不继承的

宋辰轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入WEB前端（12）CSS 继承

1.继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{
复制链接

扫一扫