CSS-三大特性

最新推荐文章于 2024-07-22 11:03:23 发布

幸运小圣

最新推荐文章于 2024-07-22 11:03:23 发布

阅读量29

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_53002037/article/details/130820581

版权

三大特性：

1.层叠性：

如果发生了样式冲突，根据一定的规则（选择器优先级），进行样式的层叠（覆盖）
样式冲突：元素的同一个样式名，被设置了不同的值。
当权重相同看顺序，后来者局上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css-三大特性</title>
    <link rel="stylesheet" href="./index.css">
    <style>
        /* #rbk {
             color: green;
             color: blueviolet;
         } */
        /* 内部样式和外部样式平级时候，后来者居上 */
        
        h2 {
            color: red;
        }
    </style>
</head>

<body>
    <h2 id="rbk">一杯热白开.</h2>
</body>

</html>

index.css：

/* h2 {
    color: green;
} */

#rbk {
    color: gold;
}

2.继承性：

概念：元素会自动拥有其父元素、或其他祖先元素上所设置的某些样式
规则：优先继承离得近的
常见的可继承属性：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css-三大特性</title>
    <link rel="stylesheet" href="./index.css">
    <style>
        div {
            color: red;
            font-size: 10px;
            background-attachment: gold;
        }
        
        p {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <div>
        我是div中的文字
        <span>我是span里的文字1</span>
        <span>我是span里的文字2</span>
        <span>我是span里的文字3</span>
        <p>
            <span>
                我是span里的文字4
            </span>
        </p>
    </div>
</body>

</html>