3.1 CSS简述

CSS是Cascading Style Sheets的缩写，翻译过来叫做层叠样式表，一般简称为样式表，但通常大家还是习惯叫CSS。

最初的HTML很单一，甚至无法显示图片，随着使用范围越来越广泛，HTML支持的标签开始多了起来，所支持的样式也开始增多。但是把样式完全交给HTML去做不是一个好想法，因为HTML更侧重于页面的结构，于是在1994年CSS被提出。CSS旨在对HTML元素的外观加以描述，来提供更多更加复杂丰富的样式。

现在多数浏览器会默认使用一些样式，比如div元素默认会占据整行——两个div元素不会出现在同一行，而span元素则不是这样，这就是因为浏览器默认将div元素样式的display属性值设为了block。

浏览器这种为HTML元素附加默认样式的做法，大部分情况下是好的，但有时为了个性化设计，我们需要另外编写CSS来自定义HTML元素的外观。

Chrome会自动为HTML元素附加margin和padding样式

我们来看看上图所示的页面在Chrome浏览器中的渲染结果。可以看到HTML元素并没有被指定样式，因为我们没有编写CSS。但是Chrome已经自动为文本框添加了margin和padding样式，这在外观表现上，会在文本框周围有一圈间隙，这样其他HTML元素不会与它挨得太紧。这种设计显然是出于好意，但有时我们需要更加灵活个性化的样式，这就是为什么在前面的例子中都会出现下面的代码。

* {
    margin: 0;
    padding: 0;
}

CSS的选择器在第1章第4节已经介绍过，在此就不再赘述。下面讲一讲CSS的基本语法。

CSS是一种描述型语言，它更像是一种陈述，而不是逻辑运算。CSS的语法形式如下所示：

选择器 {
    属性名: 属性值;
}

CSS的选择器非常灵活，更加高级的使用方法大家可以参考相关的书籍。CSS的属性名也非常丰富，涉及到尺寸、边框、边距、位置、层叠顺序、文字（包括颜色、字体、粗细等等）和背景等等。

CSS使用box模型处理元素的尺寸、边框和边距，下图展示了它们之间的关系。

CSS的box模型

那么margin和padding有什么区别呢？padding区域算元素的一部分，所以元素的背景样式同样也会适用于padding区域。比如元素背景颜色设定为灰色，padding区域的背景颜色也会是灰色的，就如上图所示的那样。

需要注意的地方是，虽然padding是元素的内边距，也算元素的一部分，但元素的高度和宽度却并不包含padding区域。

元素的margin、padding、height和width的单位一般为px，即像素，也可以使用百分百的形式，如50%。如果使用的是百分百的形式，所相对的是此元素指定了绝对尺寸的父系元素。比如下面的例子：

<div id="outer" style="width: 500px">
    <div id="inner">
        <div id="content" style="width: 80%">Hello</div>
    </div>
</div>

其中id为content的div元素的宽度为80%，这80%是相对id为outer的元素而言的。虽然content的直接父系元素为inner，但是由于inner并没有指定宽度，所以会继续向上寻找父系元素，直到找到定义了width的元素为止。如果所有的父系元素都没有指定，则这个值是相对于body的。

对于元素的位置，默认情况就像报纸排版一样，将一个板块设计好之后，下一个板块会接着排列。这种像瀑布一样的排列方式我们形象地称为HTML流（flow）。默认情况下元素的position属性值为static，元素排列在正常的流中。position属性还有另外的三个值，分别是absolute、relative和fixed。如果元素的位置属性为absolute，则它的位置是相对于除static定位以外的父系元素的，如果没有这样的父系元素，则相对于body；如果元素的位置属性为relative，则它的位置是相对于它默认在HTML流中位置的；如果元素的位置属性为fixed，则它的位置是相对于浏览器窗口的。

不同位置属性的元素的定位效果

上图中浅灰色的元素是所有元素的父系元素，它的position属性为relative。深灰色和黑色边框的元素position都是默认的static，所以它们按照HTML流的方式依次布局。黑色的元素拥有absolute的位置属性，并指定left为10px，top为10px，它的定位是相对于浅灰色元素的。

对于relative定位，更像是对原有定位的偏移。对于left来说，负值向元素的左侧偏移，正值向右侧偏移，right与其相反；对于top来说，负值向元素的上侧偏移，正值向下侧偏移，bottom与其相反。需要注意的是，relative定位所定义的偏移不会影响元素原本在HTML流中的位置，下图给出了说明。

relative定位所定义的偏移不会影响元素原本在HTML流中的位置

虽然中间深灰色的元素相对于HTML流中的位置产生了偏移，但它原本在HTML流中的位置却没有改变，所以并没有影响下面浅灰色元素的位置。

默认情况下，如果元素和元素有重叠的部分，在HTML文档中靠后的元素会被显示在上面。但是可以通过CSS的z-index属性改变层叠顺序，z-index的值大的元素会显示在z-index值小的元素上面。如果一个元素没有被指定z-index的值，则在Chrome中默认为0（注意，并非所有浏览器都是这样，比如IE默认为负无穷大）。position属性为static的元素（即没有指定position属性的元素）z-index的值会被浏览器忽略。

CSS还可以定义元素中文字的大小、字体和颜色等，高级的属性还可以定义文字之间的距离、段首缩进、文字阴影等特殊的效果，下面我们主要讲讲对文字大小、字体和颜色的控制。

CSS使用font-size属性控制文字的大小，font-size的值可以是固定值也可以是百分比。如果是百分比，则相对的是父系的文字尺寸。如果是固定值，常见的单位有px、pt和em，另外还有一些其他的单位，如in、cm、mm、ex和pc。px最好理解，就是像素，和其他属性一个道理；pt是印刷界的单位，这个单位与物理尺寸相对应，如果使用pt作为单位，则在任何设备上，显示出来的大小都是一样的；em是个相对的单位，它是相对于元素当前文字尺寸的，比如元素当前文字尺寸为16px，则font-size为2em，显示出来的文字大小为32px。另外也可以使用特定的常量来设定文字大小，如xx-small、medium和large等，smaller和larger则把font-size设置为比父元素更小和更大的尺寸。

文字的字体使用font-family属性控制，这个属性可以有多个值。浏览器优先使用靠前的值，但如果用户的系统中没有安装指定的字体，则浏览器就会考虑使用后面的值，如果所有指定的字体用户的系统中都没有，则浏览器使用默认字体。对于Windows操作系统，中文的默认字体一般是宋体。需要注意的是，如果字体的名称中包含空格，需要用引号将字体名包含，多个值之间用逗号隔开。

文字的颜色使用color属性控制，color的值常见的有三种方式，分别是颜色名、十六进制颜色值和rgba。除此之外还可以使用HSL和HSLA格式。颜色名有black、red等，网上可以找到一份比较全的颜色名列表。但是能用名称表示的颜色十分有限，多数情况还是需要用颜色值表示。用十六进制的颜色值表示颜色的方法，是一个#符号后面接着6位十六进制数值，这6位数值每两位为一组，从左至右分别代表红色、绿色和蓝色的强度，#000000代表黑色，#FFFFFF代表白色。有时我们会遇到用三位十六进制数值表示颜色的情况，这是颜色值的缩略表示方式，表示每组颜色的十六进制码两位相同，如#ABC和#AABBCC表示的颜色相同。rgba表示方式除了包含红绿蓝三种颜色强度外还包含不透明度。其中前三个数字表示色值，第四个数字表示透明度。表示色值的数字有效值为0-255的整数或百分比（百分比也可以表示成小数，如50%也可以用0.5表示），表示透明度的数字有效值为0-1的小数。比如rgba(255, 0, 0, 0.5)表示透明度为0.5的红色。

CSS可以通过font属性将多种和文字相关的属性连在一起作为值，这种方式对初学者来说不直观，但对于熟练的人是个节省时间的好办法。

另外不得不再提一下line-height这个属性。对于文字来说，它每行所占据的高度是它的大小决定的，默认情况下两行相邻的文字不会重叠，也不会离得太远。下图展示了通过调整line-height属性使得两行相邻的文字重叠。

调整line-height属性使得两个相邻行的文字重叠

当想让文字在元素中垂直居中时，就可以通过指定line-height与height相同而达到目的¹。

^{1 也可以使用vertical-align属性控制垂直位置。}

CSS还可以控制元素的背景颜色和背景图片。背景颜色通过background-color进行控制，值的形式与color属性相同。背景图片通过background-image进行控制，值为url(图片位置)。对于背景图片，往往还要结合background-repeat和background-position使用。前者是控制图片重复的方式，默认是平铺，还可以指定为repeat-x（横向重复）、repeat-y（纵向重复）和no-repeat（不重复）。background-position是控制背景图片的位置，值的形式可以是top、bottom、left、right和center的结合，比如top left为左上角，center left为左侧中间，如果只指定了一个值，则另一个值默认为center。也可以是x% y%的形式，同样是相对于父系元素尺寸的。也可以以像素为单位，如10px 20px为距左侧10像素，上侧20像素。

背景样式还有很多更加丰富的属性，如background-size，这些更加高级的属性留给感兴趣的读者自行研究吧 :)

最后再强调一次，本节只是对CSS的简述，如果想学好CSS还应参考相关更加专业的书籍和资料，本节的作用只是避免没有任何基础的读者阅读后面的内容有障碍。