前端基础(九)_CSS的三大特征

六卿

已于 2023-03-07 17:54:51 修改

阅读量270

点赞数 1

分类专栏： # 前端基础（html、css）文章标签： css css特性层叠性优先级继承性

于 2022-12-15 20:15:00 首次发布

本文链接：https://blog.csdn.net/qq_43291759/article/details/128331008

版权

前端基础（html、css）专栏收录该内容

16 篇文章 4 订阅

订阅专栏

CSS的三大特征

1、层叠性

1.样式冲突，遵循就近原则
2.样式不冲突，不会层叠，会叠加

1.1.样式冲突，遵循就近原则例子：

<!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>我的第一个页面</title>
  <style>
    div {
      padding: 0;
    }

    .div2 {
      width: 50px;
      padding: 10px;
    }

    .div2 {
      width: 100px;
      border: 2px solid red;
    }
  </style>
</head>

<body>
  <div class="div2">我是内容</div>
</body>

</html>

在这里插入图片描述

在这里插入图片描述
页面的最终展示效果

样式冲突，遵循就近原则，所以width的值为100px;padding的值为10px

1.2.样式不冲突，不会层叠，会叠加例子

<!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>我的第一个页面</title>
  <style>
    div {
      color: pink;
    }

    .div2 {
      padding: 10px;
    }

    .div2 {
      width: 100px;
      border: 2px solid red;
    }
  </style>
</head>

<body>
  <div class="div2">我是内容</div>
</body>

</html>

在这里插入图片描述
样式不重叠，所有针对于这个元素的样式会叠加，都加到这个元素身上，如果其中有重叠的某个样式，也会按照样式冲突，遵循就近原则进行替换。

2、继承性–子元素会继承父元素的样式

1、a标签不会继承父元素的文字颜色,h1-h6标题标签不会继承父元素的字体大小
2、字体系列属性
font-family字体系列属性
font-size字号属性
font-weight文字加粗属性
Font-style 文字风格属性
Line-height 行高属性
3.文本系列属性
text-indent 文本缩进属性
text-align文本水平对齐方式属性
text-decoration文本装饰线属性
color文本颜色属性
4.列表中list-开头的属性