【前端学习之HTML&CSS】-- CSS第四篇 – 层叠、继承与属性值计算

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章将会是CSS学习中第一个较为困难，也十分重要的知识点，对于样式之间的层叠冲突、继承关系以及最后的属性值计算过程，在整个CSS的学习中，占有举足轻重的地位，让我们来一一学习这些概念，掌握页面渲染的具体过程。

一、层叠

1. 基本概念

• 概念补充：声明冲突：同一个样式，多次应用到同一个元素；
  例如：在CSS中给a元素设定颜色时，a元素就会同时受到本地CSS和浏览器默认样式的层叠要求，即为声明冲突；

• 层叠/权重计算：解决声明冲突的过程，浏览器自动处理；

2. 解决冲突

第一步：比较重要性

重要性从高到低：

• 1 作者样式表(开发者书写的样式)中的!important样式

!important：开发者自行书写的CSS添加；

    p{
        /* 加上!important后此样式威力最大，但不到万不得已尽量不加 */
        color: rgb(240, 219, 32) !important;
    }

• 2 作者样式表中的普通样式
• 3 浏览器默认样式表中的样式

第二步：比较特殊性

• 1 发生条件：比较重要性之后冲突仍然存在；

• 2 总体规则：选择器选中的范围越窄，越特殊；
  【ID > 类、属性、伪类 > 元素、伪元素 > 通配符, 内联样式 > 其他样式】

• 3 具体规则：通过选择器，计算出一个4位数（xxxx）,数值越大越特殊；

• 4 数值计算：

1. 千位：如果是内联样式，记作1，否则记0；
2. 百位：等于选择器中所有ID选择器的数量；
3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量；
4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量；

注意：逢256进1

    a{
        /* 0001 */
        color: red;
    }
    div ul a{
        /* 0003 */
        color: green;
    }
    #myd #myu a{
        /* 0201 */
        color: gray;
    }
    #myd #myu .mylink{
        /* 0210 */
        color: #008c8c;
    }
    #myd #myu a:link{
        /* 0211 */
        color: chocolate;
    }

第三步：比较源次序

• 用法：代码书写靠后的胜出；

3. 应用

• 1 重置样式表

书写一些作者样式，覆盖浏览器的默认样式，这个css文件可以实现通用的功能；

过程：用重置样式表覆盖浏览器的默认样式表，后续样式再覆盖重置样式表；

    /* 先引用重置样式表，在发生冲突后，根据源次序就会首先利用后续样式表 */
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/new.css">

常见重置样式：normalize.css 、 reset.css 、 meyer.css

    /* 远程调用meyer.css */
    <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">

• 2 爱恨法则
  link > visited > hover > active

二、继承

• 含义：子元素会继承父元素的某些CSS属性:

1. 什么属性可以被继承

可以通过查询对应属性的MDN网站，在网站下方会有关于是否可以继承的提示；

通常和文字内容相关的属性都能被继承：
如color、font-size、font-weight、font-family、font-style等就可以；background-color、width、height则不可以；

2. 应用

通常可以给body设置一个style，设置相应字体，让下面的元素一层层继承下去，实现字体统一；
具体可见链接https://developer.mozilla.org/zh-CN/docs/Web/CSS/font

三、属性值的计算过程

1. 整体渲染过程：

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行；

树形目录的遍历是深度优先（数据结构中的概念）

2. 概念补充：

• 渲染每个元素的前提条件：该元素的所有CSS属性必须有值；

• 属性值的计算过程：一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程

3. 过程简介：

• 无属性值->确定声明值->层叠冲突->使用继承->使用默认值->每个属性都有值

• 1 确定声明值
  参考样式表（开发者/浏览器默认设定的样式表）中没有冲突的声明，作为CSS属性值；
• 2 层叠冲突
  对样式表有冲突的声明使用层叠规则，确定CSS属性值；
  【比较重要性、比较特殊性、比较源次序】
• 3 使用继承
  对仍然没有值的属性，若可以继承，则继承父元素的值；
• 4 使用默认值
  对仍然没有值的属性，使用默认值（initial value）；
  例如width的默认值为auto；

例题：

div设置color为红色->子元素a元素和p元素是否继承？
a元素不继承，p元素继承 ，原因： 声明值：a元素有，p元素没有；

	/* 想要让a元素也继承/重置 */
    /* 应用一个重置样式表 */
    a{
        /* 没有下划线，颜色继承父元素 */
        text-decoration: none;
        color: inherit;
    }

总结

本篇博客主要介绍了样式之间的层叠冲突和继承关系，从属性值出发，深刻的体会了页面的样式渲染过程，这一节的内容会是整个CSS学习中的重中之重，希望大家认真学习，后续博客将会重点介绍盒模型的概念，敬请期待。