HTML：CSS特性

奈何彼岸花未开

于 2023-04-02 08:30:05 发布

阅读量71

点赞数 1

分类专栏： CSS进阶文章标签： css html css3 前端 javascript

本文链接：https://blog.csdn.net/weixin_75179509/article/details/129906571

版权

CSS进阶专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 14px;
        }
        ul{
            /* 消去原点 */
            list-style: none;
        }
        .father{
            /* 可继承的属性 */
            color: red;
            font-style: italic;
            font-weight: 700;
            font-style: 30px;
            font-family: 楷体;
            text-indent: 2em;
            text-align: center;
            line-height: 100px;
            /* 不可继承的属性 */
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        /* 同一个标签设置不同样式会共同生效，设置相同样式会叠加 */
        .yellow{
            color: yellow;
        }
        .border{
            border: solid 1px red;
        }
    </style>
</head>
<body>
    <!-- 1、继承性：子承父业 -->
    <div class="father yellow border">
        我是父亲盒子
        <div class="son">
            我是儿子盒子
        </div>
        
    </div>
    <ul>
        <li>张三</li>
        <li>李四</li>
    </ul>
</body>
</html>

运行示例：