前端之旅-CSS初探

CSS是什么

简而言之，CSS(层叠样式表)就是通过规定一些规则，来描述HTML中的各个元素应当如何显示在各种媒体之上（包括屏幕、纸张甚至是声音）。

你可以把CSS用 元素内联到HTML的 元素中，但是出于易用性以及可维护性，将CSS独立成另外一个文件，并在HTML中加以引用，是一个更好的选择。

在HTML的 元素中加入代码

即可引用名为 的文件定义的CSS。

CSS的作用过程

CSS的官方文档给出了一个CSS作用的概念模型:

解析原文档并创建文档树(给出了文档中各个元素的关系)

确定目标的媒体类型(屏幕、纸张还是声音)

检索与为目标媒体类型指定的文档关联的所有样式表

通过为每个属性分配值来注释文档树中的每一个元素，这个过程包括了级联与继承

由注释的文档树生成一个格式化结构

将格式化结构转换成显示结果

从这个模型可以看到，CSS的作用就是为HTML中的每个元素制定样式。问题就在于两点，一是如何选择将要修改哪个元素的样式，二是若一个元素被多次选择后最终的样式如何确定。

一个CSS文件的部分如下:

这个的意思是说，将所有 元素的字体大小设成10像素。

CSS的语法

CSS是由一些规则(rule)组成的文件，每个规则包括选择器组和声明块。选择器组中制定了将要描述样式的元素，而声明块中包括了数条用分号分隔的声明，每个声明语句格式为 。

值

某个属性可能是字体大小，内边距宽度或者字体颜色，那么它的值是什么呢？

长度

长度单位包括了绝对单位(absolute units)和相对单位(Relative units)

绝对单位是指那些不会跟随其他设置改变的单位。比如像素 或者一般的长度单位 , , .

相对单位是指相对于当前元素的字号或者视口的尺寸的单位。

单位是指一个大写字母 的宽度。比如网页设置的默认字体中 宽16像素，则 就是32像素。注意这里相对的是父元素的字体大小，如果层层嵌套下去可能会非常复杂。

单位总是相对于默认字体的大小

单位相当于视口宽度(viewport width)的1/100, 相当于视口高度(viewport height)的1/100

使用相对单位可以让你的网页在大小屏幕上都享有良好的表现。

颜色

可以用标准预先设定的颜色名字，如 。或者用RGB值等来直接给定颜色。

还有一些整值，时间等等不再细说。

选择器

CSS用模式匹配(pattern matching)选择元素，这些模式被称为选择器(selector), 类型从简单的元素名到复杂的上下文模式都有。如果一个元素匹配到模式中的每个条件，则选择器匹配(matches)到了这个元素。

简单地说，选择器就是指定那些元素将被选取。

我将提到的选择器包括

简单选择器

属性选择器

伪类与伪元素

组合器

简单选择器

简单选择器(simple selector)之所以简单，是因为她们直接用元素的类型或者id来匹配元素。

类型选择器

直接将元素名作为选择器，比如

类选择器

注意类的名字可以自己选择，比如

HTML文件中

指定了 是一个类为 和 的段落。可以用CSS样式

来修改它的颜色

ID选择器

注意id可以自己选择，但是每个id都是唯一的。

属性选择器

属性选择器(attribute selector)根据元素的属性和属性值来匹配元素。包括两种类型，存在与值(Presence and value)属性选择器和子字符串(substring)属性选择器。

存在与值选择器

匹配精确的属性值。

[att] 选择包含属性 的所有元素，不管属性的值是什么

[att=val] 选择属性 的值恰好是 的所有元素

[att~=val] 若元素的属性 的值是数个以空格分隔的值，则选择那些值中包括 的元素。注意 本身若有空格，则不会选取任何元素。

比如

就选取了所有包含 属性的 元素

子字符串选择器

可以更为模糊的通过属性选择元素。

[att|=val] 若元素的属性 的值恰好是 或者以 开头的，则选取这个元素。

[att^=val] 选择 属性以 开头的元素

[att$=val] 选择 属性以 结尾的元素

[att*=val] 选择 属性的值包含字符串 的元素

比如选择语言的经典用法

伪类与伪元素选择器

在CSS中，样式匹配元素，通常是根据这个元素在文档树中的位置来匹配的。但是在碰到一些不在文档树中的结构，一般的方法就很难匹配到了。比如说段落的第一行之类的结构。

CSS 引入了伪元素(pseudo-elements)和伪类(pseudo-classes)的概念来选择这些不在文档树中的结构。

伪类可以出现在选择器中的任意位置，但是伪元素只能附在最近的那个简单选择器之后。伪类和伪元素都是大小写无关的。

伪类

伪类是以 为前缀的关键字，一般的作用包括

你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个孩子元素时。

比如对一个链接，可以用 来定义当这个链接访问过后的样式，用 定义链接在鼠标悬停时的样式。

顺便说一句，可以用这几个伪类制作一个好看的按钮。

伪元素

伪元素的前缀是 , 添加到选择器后面去选择某个元素的某个部分。比如第一个字母 或者第一行 等等。

组合器和选择器组

可以将几个选择器组合在一起，并按照元素间的相互关联关系来选择元素。比如 就选择了 中包含的 元素（或者说 是 的子节点）。

可以参看文档来搞清楚各中组合器的概念。

层叠和继承

这部分内容描述了多个选择器作用在同一个元素上，将最终应用哪个规则。留待之后的文章补充