网页开发学习笔记六: css 三大特性

css 三大特性

层叠性: 当多个样式作用于同一个(同一类)标签时, 样式发生了冲突,
总是执行后面的代码(后面的代码层叠前面的代码)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .box{
            font-size: 60px;
            color: red;
        }

        .box2{
            font-size: 20px;
            color: orange;
        }
    </style>
</head>
<body>

    <div class="box box2">AAAAA</div>

</body>
</html>

继承性
- 继承性发生的前提是包含(嵌套关系)
- 文字的所有属性都可以继承
  - 文字颜色可以继承
  - 文字大小可以继承
  - 文字字体可以继承
  - 字体粗细可以继承
  - 文字风格可以继承
  - 行高可以继承
- 特殊情况
  - h系列不能继承文字的大小
  - a标签不组继承文字的颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        .box3{
            font-size: 60px;
        }

        .box4{
            font-size: 30px;
            color: red;
        }

    </style>
</head>
<body>

    <div class="box3">
        <h1>DDDDD</h1>
        <h2>EEEEE</h2>
        <p>FFFFF</p>
        <p style="font-size:90px;">GGGGG</p>

        <div class="box4">
            <a href="#">HHHHH</a>
        </div>
    </div>

</body>
</html>

优先级

　　　　默认样式 < 标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important

　　　　　　0　　　　　1　　　　　10　　　　100　　　　1000　　1000以上

　　　　优先级的特点

- - 继承的权重为 0
  - 权重会叠加