CSS 样式表用于为 HTML 元素设置样式,包括元素之间的布局,以及元素的外观。
注解
HTML 元素和 HTML 标签大部分时候是一回事,你觉得哪种叫法好理解你就用哪种叫法。在 CSS 规范中有一个伪元素的概念,为了前后一致,本书采用 HTML 元素这种叫法。
如何从 HTML 文档中选出需要的元素呢?这个工作就由 CSS 选择器 (CSS Selector) 来完成。
CSS 选择器选择元素时依赖 HTML 元素的类型。
CSS 选择器会充分利用 HTML 元素的类型特征来表达要选择的元素,这些特征包括类型的名称、为类型设置的属性、为类型选用的 CSS 类。比如在 div.note{color:red}
规则中,选择器是 div.note
,它的意思是:选择使用了 note
类的 div
类型的元素。这里面既有 HTML 元素类型(div
),又有 CSS 的类(note
)。
换句话说我们在选择 HTML 元素时必须从 HTML 元素类型入手。
CSS 选择器还会充分利用 HTML 元素之间的位置关系表达要选择的元素,如父子关系、兄弟关系等。
HTML 元素的类型特征能够满足大多数选择元素的需求,但如果要选择“已访问过的链接”,或者选择“正在编辑的文本框”, HTML 元素的类型特征就显得无能为力了,因为 HTML 元素类型不包含行为、状态等动态信息, HTML 文档也不包含这些信息。为了应对这个问题, CSS 引入了伪类(pseudo-class) 概念。 CSS 伪类和 CSS 类相似,都是从某一方面描述元素的特征。伪类选择器(pseudo-class selector)是针对伪类设计的选择器。
CSS 不仅简单好用,而且还采用了模块化的设计思想:
- 它定义了一组最基本的选择器,这些选择器利用某个单一特征来描述要选择的元素, CSS 称之为简单选择器。如类型选择器、通用类型选择器、类选择器、属性选择器、ID选择器、伪类选择器、伪元素选择器都属于简单选择器。
- 简单选择器可以级联,形成级联选择器。级联选择器利用多个特征来描述要选择的元素。
- 简单选择器或级联选择器可以组合,形成组合选择器。组合选择器利用位置关系(如父子、兄弟等)来描述要选择的元素。
CSS模块化设计思想如下图所示。