【前端学习】CSS三大特性

news2024/11/16 13:06:19

CSS三大特性

CSS的三大特性是为了化简代码、定位问题并且解决问题

继承性

继承性特点：

子级默认继承父级的文字控制属性。
注意：如果标签自己有样式则生效自己的样式，不继承。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS特性-继承性</title>
  <style>
    body {
      font-size: 30px;
      color: aquamarine;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <div>div标签</div>
  <p>p标签</p>
  <span>span标签</span>
  <a href="#">a标签</a>
</body>
</html>

其中div、p、span、a标签都会继承父级body标签所定义的属性。
但由于a标签有自己的颜色属性，则此处的a标签不会继承body的color属性，仍然为默认的蓝色。
在这里插入图片描述

层叠性

层叠性特点：

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS特性-层叠性</title>
  <style>
    div {
      color: red;
      font-weight: 700;
    }

    div {
      color: green;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <div>div 标签</div>
</body>

</html>

两个相同的div，后面div的color属性相同，会覆盖前面的，只生效第二个。
而第一个的font-weight和第二个font-size属性不同，则都生效。
在这里插入图片描述

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

规则：选择器优先级高的样式生效
公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
(选中标签的范围越大，优先级越低)
注意：!important可以提高权重，让优先级到最高，但谨慎使用

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS特性-优先级</title>
  <style>
    * {
      color: rebeccapurple !important;
    }
    div {
      color: red;
    }

    .box {
      color: aquamarine;
    }

    #test {
      color: chocolate;
    }
  </style>
</head>

<body>
  <div class="box" id="test" style="color: cornflowerblue;">div 标签</div>
</body>
</html>