第一部分 基础回顾
第一部分深入探讨了 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 开发乐在其中。