《CSS权威指南》第3版

第1章 CSS和文档

层叠样式表（Cascading Style Sheets，CSS）的功能非常强大，可以影响一个或一组文档的表现。

1995年，W3C开始发布一种正在进行的计划，称为CSS。到1996年，这已经成为了一个成熟的推荐草案，其地位与HTML同样举足轻重。

层叠：

CSS还规定了冲突规则，这些规则统称为层叠。

替换元素：是指用来替换元素内容的部分并非由文档内容直接表示，例如img元素，它由文档本身之外的一个图像文件来替换。

非替换元素：大多数HTML和XHTML元素都是非替换元素。

如何关联样式：

<link>标记链接外部样式表；

style元素；

@import指令：出现在style容器中，并且放在开头，@import url(sheet2.css);

内联样式：HTML的style属性；

第2章 选择器

规则结构：

每个规则都有两个基本部分：选择器和声明块。声明块由一个或多个声明组成，每个声明则是一个属性-值对。

选择器分组：

使用逗号分组，如h2,p{ }

（1）除了文档元素的选择器之外，还有另外两种类型的选择器：类选择器和ID选择器。

（2）属性选择器：

简单属性选择器：h1[class]{ }

部分值属性选择器：h1[class~=“warning”] {}

子串匹配属性选择器：

[foo^=“bar”]    选择foo属性值以”bar”开头的所有元素

[foo$=“bar”]    选择foo属性值以”bar“结尾的所有元素

[foo*=“bar”]    选择foo属性值中包含子串”bar”的所有元素

[lang|=“en”]    选择lang属性等于en或者以en-开头的所有元素

（3）后代选择器：

用空格分隔，关于后代选择器有一个常被忽视的方面，即两个元素之间的层次间隔可以是无限的。

（4）选择子元素：

可以使用子结合符，即大于号（>）；

（5）选择相邻兄弟元素：

可以使用相邻兄弟结合符，即一个加号（+）；

（6）伪类选择器：

所有伪类和伪元素关键字前面都有一个冒号。

:link，:visited，:focus，:hover，:active

选择第一个字元素：

可以使用一个静态伪类:first-child来选择元素的第一个子元素。

（7）伪元素选择器

就像伪类为锚指定幻象类一样，伪元素能够在文档中插入假想的元素，从而获得某种效果。CSS2.1中定义了4个伪元素：设置首字母样式:first-letter、设置第一行样式:first-line、设置之前和之后元素的样式。

所有伪元素都必须放在出现该伪元素的选择器的最后面。

h2:before{content: “}}”; color: silver}

第3章 结构和层叠

继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，用户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。

（1）特殊性：

对于选择器中给定的ID属性值，加0，1，0，0；

对于选择器中给定的各个类属性值、属性选择或伪类，加0，0，1，0；

对于选择器中给定的各个元素或伪元素，加0，0，0，1；

内联声明的特殊性是1，0，0，0；

结合符和通配符选择器对特殊性没有任何贡献。

重要声明：

!important重要声明总是胜出。

（2）继承

一般地，大多数框模型属性（包括外边距、内边距、背景和边框）都不能继承。

通配选择器有0特殊性，继承没有特殊性，所以有时候通配选择器会有一种短路继承的效果。

（3）层叠

按权重和来源排序：读者重要声明>创作者重要声明>创作者正常声明>读者正常声明>用户代理默认声明；

按特殊性排序；

按出现顺序排序：如果两个规则的权重、来源和特殊性安全相同，那么在样式表中后出现的一个会胜出。

第4章 值和单位

颜色：函数式RGB颜色、十六进制RGB颜色

长度单位：绝对长度单位和相对长度单位。

相对长度单位：共有3种，em、ex和px。

em：1个em定义为一种给定字体的font-size值。如果一个元素的font-size为14像素，那么对于该元素，1em就等于14像素。

ex：是指所用字体中小写x的高度，一些浏览器的做法是取0.5em作为ex值。

px：非常适合用像素来度量图像大小，因为图像的高度和宽度本身就是像素数。

关键字inherit：inherit使一个属性的值与其父元素的值相同。

第5章 字体

（1）字体系列：font-family

除了各种特定字体系列外（如Times、Verdana、Helvetica或Arial），CSS还定义了5种通用字体系列（Serif字体、Sans-serif字体、Monospace字体、Cursive字体、Fantasy字体）。

（2）字体加粗：font-weight

（3）字体大小：font-size

绝对大小、相对大小（larger和smaller）、百分数和大小（百分数总是根据从父元素继承的大小来计算）

（4）风格和变形：

风格：font-style（normal文本、italic文本、oblique文本）

变形：font-variant（normal、small-caps、inherit）

（5）拉伸和调整字体

拉伸：font-stretch

调整：font-size-adjust（这个属性的目标是，当所用字体并非创作人员的首选时，仍然可以保持辨识）。

（6）font属性：

它是涵盖所有其他字体属性的一个简写属性。

前三个属性顺序任意：font-style、font-weight、font-variant。后两个font-size、font-family

在font-size后加/斜杠可以补充行高line-height，尽管行高是文本属性而不是字体属性。

第6章 文本属性

（1）缩进文本：text-indent，应用于块级元素，有继承性。

（2）水平对齐：text-align，应用于块级元素，有继承性。

Left、right、center、justify（两端对齐）

（3）垂直对齐

行高：line-height属性是指文本行基线之间的距离，应用于所有元素，有继承性，值为百分数时是相对于元素的字体大小，通常是字体大小的1.2倍。

垂直对齐文本：vertical-align属性只应用于行内元素和表单元格，不能继承。（baseline、sub、super、bottom、text-bottom、top、middle、百分数（相对于自身line-height计算）、px长度）；

注意：所有垂直对齐的元素都会影响行高，应该记得行框的描述，其高度要足以包含最高行内框的顶端和最低行内框的底端。

（4）字间隔和字母间隔

字间隔：word-spacing，应用于所有元素，有继承性。

字母间隔：letter-spacing，应用于所有元素，有继承性。

（5）文本转换：

text-transform应用于所有元素，有继承性。（uppercase和lowercase将文本转换为全大写或全小写字符，capitalize只对每个单词的首字母大写）

（6）文本装饰

Text-decoration：underline、overlain、line-through，不能继承

（7）文本阴影

Text-shadow:green 5px 0.5em;

（8）处理空白符：white-space

使用这个属性，它会影响用户代理对源文档中的空格、换行和tab字符的处理。

取值pre：浏览器将会注意额外的空格，甚至回车；

nowrap：它会防止元素中的文本换行，除非使用了一个br元素。

第7章 基本视觉格式化

（1）基本框：

内容区、内边距、边框、外边距。

一般的：width被定义为内容区的宽度、height被定义为内容区的高度。

（2）块级元素：

水平格式化：

Width、margin-left、margin-right可以设置为auto，会自动调整元素宽度为包含块的width。

margin-left和margin-right都设置为auto时可以将元素居中。

margin区域会显示父元素的背景颜色；

只有外边距可以设置为负值；

垂直格式化：

可以对任何块级元素设置显示高度。

7个属性中，height、margin-top、margin-bottom可以设置为auto，其他不行。

如果没有显示声明包含块的height，百分数高度会重置为auto。

auto高度：

1.如果块级元素高度设为auto，而且只有块级子元素，其高度将不会包含子元素的外边距；

2.如果块级元素高度设为auto，并且设了border或padding，其高度将会包含子元素的外边距。

合并垂直外边距：垂直相邻的外边距会合并。

（3）行内元素：

行内非替换元素：

匿名文本：未包含在行内元素中的字符串；

内容区：

行间距：是font-size的值和line-height值之差；

行内框：对非替换元素行内框的高度刚好等于line-height的值，对于替换元素，行内框的高度等于内容区的高度；

行框：这是包含该行中出现的行内框的最高点和最低点的最小框。

内边距、边框、外边距都可以应用于行内非替换元素，但根本不会影响行框的高度，可以影响左右两端。

行内替换元素：

有固有高度的替换元素可能导致行框比正常要高，这不会改变行中任何元素的line-height值，包括替换元素本身。

内边距和边框会影响替换元素的行框的高度。

替换元素并没有自己的基线，所以相对来讲最好的办法是将其行内框的底端与基线对齐。

（4）改变元素显示

Display属性：block、inline、inline-block、run-in

行内块元素：

行内块元素会作为替换元素放在行中，这说明，行内块元素的底端默认地位于文本行的基线上，而且内部没有行分隔符。

run-in：可以使某些块级元素成为下一个元素的行内部分。

第8章 内边距、边框和外边距

（1）宽度和高度：

这两个元素不能应用到行内非替换元素。

IE6之前这两个属性是指可见元素框的尺寸，而不是内容区尺寸。

（2）外边距：

Margin：百分数时是相对于包含块的width。

如果指定了3个值，则第4个值从第2个值复制；

为行内非替换元素设置外边距不会影响行高，为行内替换元素设置外边距会影响行高。

（3）边框

默认的颜色是元素的前景色，如果没有为边框声明颜色，它将与元素的文本颜色相同。

元素的背景会出现在边框的可见部分（点线边框或虚线边框）。

border-style：solid dashed none dotted;（为none时表示边框不存在，宽度也变为了0）

单边样式：border-top-style

border-width：1px;

单边宽度：border-top-width

border-color:transparent;（透明边框）

单边颜色：border-top-color

简写属性：border、border-top、border-right、border-bottom、border-left（值的顺序没有要求）

（4）内边距

第9章 颜色和背景

（1）颜色

可以为任何元素设置前景色和背景色。

（2）背景

Background-color：transparent（默认值为透明）

背景图像：background-image：url(bg23.gif);

默认会平铺，即水平和垂直方向重复图像使得充满整个背景；

图像放在所指定的背景颜色之上。

Background-repeat：repeat、repeat-x、repeat-y、no-repeat、inherit

Background-position：top、bottom、left、right、center成对出现

Background-attachment：scroll、fixed（相对于可视区是固定的）、inherit

汇总：

backgroud：这个属性可以从其他各个背景属性取一个值，而且可以采用任何顺序。