css三大特性

最新推荐文章于 2023-01-20 10:00:00 发布

best-toby

最新推荐文章于 2023-01-20 10:00:00 发布

阅读量298

点赞数

分类专栏： css 新手笔记文章标签： css

本文链接：https://blog.csdn.net/besttoby01/article/details/75307269

版权

新手笔记同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

Css三大特性

1.继承性

子代可以直接使用父代的某些样式（特征），当然有些可以继承，有些不能继承。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>inherit</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
<div id="div1">
    这个是div1的内容
    <div id="div2">
        <a href="#">这个是div2的内容</a>
    </div>
</div>

</body>

结果显示：

从结果上看，div2虽然没有定义样式，但是他实际上是使用了样式，说明了该样式是从父代div1继承过来的

注意：a标签的颜色不能继承，

h标签的大小也不能继承，

边框（border）也不允许继承

2.层叠性

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>inherit</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            font-size: 50px;
            color: red;
            border: 5px solid green;
        }
        #div2{
            font-style: italic;
            background-color: black;
        }
    </style>
</head>
<body>
<div id="div1">
    这个是div1的内容
    <div id="div2">
        这个是div2的内容
    </div>
</div>
</body>

结果就是：div2样式来自于两个样式的重叠