【CSS in Depth 2 精译_002】第一章：层叠、优先级与继承

安冬的码畜日常

已于 2024-07-17 15:59:34 修改

阅读量536

点赞数 8

分类专栏： CSS in Depth 2 文章标签： css 前端

于 2024-06-16 00:04:31 首次发布

本文链接：https://blog.csdn.net/frgod/article/details/139711139

版权

CSS in Depth 2 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

第一部分基础回顾

第一部分深入探讨了 CSS 最基本的部分——层叠、相对单位、文档流以及盒模型。前三章介绍的这些基础知识决定了样式与页面元素的对应关系，以及如何确定这些元素的尺寸。全面理解这些内容是阅读本书后续章节及其他 CSS 知识的基础。

第一章层叠、优先级与继承

本章概要

组成层叠的六个部分
层叠与继承的区别
样式与元素的对应关系及控制方法
简写样式的常见误区
CSS 新推特性的使用与处理

CSS 与软件开发领域的很多东西都不太一样——虽然算不上传统意义上的编程语言，但却要求具备抽象思维；虽然也不是纯粹的设计工具，但却要求具备创造力。CSS 提供了一种看似简单的声明式语法，但是只要写过大型项目 CSS 的人都知道，CSS 可能会变得非常复杂。

在传统编程的学习中遇到问题，通常可以直接搜索出想要的答案（例如：“如何在数组中找出类型为 x 的项？”）；而对于 CSS 而言，将遇到的问题提炼为一个可以回答的提问却并非易事。即便可以提炼，最终答案也往往是“看情况”。最好的解决办法通常取决于具体的应用场景，以及该问题的处理需要精确到什么程度、相应要考虑哪些具体的边界条件等。

了解一些“小技巧”或实用秘籍固然有用，但想真正掌握 CSS 这门语言还须理解这些做法背后的原理。本书例证详实，但主要目的还是 CSS 的基本原理。

术语概览

由于 CSS 的学习渠道不同，您或许不熟悉 CSS 语法中各部分的叫法。我不会在此赘述，但由于书中会用到这些称谓，最好还是先弄清它们的含义为上。

以下这一行 CSS 称为一句声明。该声明包含一个属性（property，即 color）和一个值（value，即 black）：
color: black;
property 属性不能与 attribute 属性混淆，后者是 HTML 语法的一部分。例如，在元素 <a href="/"> 中，href 就是 a 标签的 attribute 属性。

包含在大括号内的一组声明被称作一个 声明块（declaration block）。声明块的前面是一个 选择器（selector）。一个选择器指定了页面上的一个或多个元素，它们将被这些声明所修饰。以下是一个 body 选择器的示例，指向 <body> 元素：
body {
  color: black;
  font-family: Helvetica;
}
选择器与声明块合在一起，称为一个 规则集（ruleset），也叫一个规则（rule）。不过据我观察，很少有人像这样精确使用规则的单数形式，通常是用其复数形式来指代一系列样式集合。

最后，@规则（at-rules）是指用一个“@”符号开头的语法结构，比如 @import 导入规则，以及 @media 媒体查询规则。

本书第一部分从 CSS 最基本的原理入手，包括：层叠、盒模型以及各种可用的单位类型。大多数 Web 开发人员都知道层叠和盒模型。他们了解像素单位，可能也听说过“应该换用 em 作单位”。诸如此类的话听得越多，并且一直对这些知识浅尝辄止，终究是走不了多远的。要想彻底拿下 CSS，就必须先理解这些基础知识，而且是深入地理解。

想必您现在一定迫不及待地想学习最新最酷的 CSS 特性了。它们确实令人兴奋，但我们得先回顾一下 CSS 的基础知识。我会快速过一遍，当中可能有您已经熟悉的基础，然后再深入探讨各个话题。本章旨在强基固本，为您后续 CSS 知识体系的构建保驾护航。

本章先从 CSS 中的 C 入手（代表 cascade，层叠）。先阐明其工作原理，再给出实际应用；接着会介绍与层叠相关的话题——继承。然后再谈谈简写属性及其常见的认知误区。

总之，本章话题都是关于如何将特定样式应用到指定元素上的，其中有不少都是开发者填过的坑。全面理解这些话题可以更好地掌控 CSS。幸运的话，您还将更好地认同 CSS 甚至对 CSS 开发乐在其中。