小白的《CSS权威指南》笔记（下部分）

颜色和背景

颜色

color设置前景色。

前景色

color：<color> | inherit
通过给元素添加class值，然后再通过class选择器来改变它的颜色。

替换属性

HTML3.2的BODY属性：TEXT、LINK、ALINK和VLINK。
可以用color替换它们。

影响边框

color值还可以影响元素周围的边框。
边框颜色取自内容的颜色。
border-color的值会覆盖color的值，对于边框来说。

影响表单元素

可以为表单元素设置color值。
会不会同时改变边框的颜色取决于用户代理及其默认样式。

继承颜色

color属性可以继承。
由于先前版本的浏览器对table元素的color值有定义，浏览器的值会比继承的值更优先，所以如果在body设置的color不会作用到table元素。现代浏览器已经修复这个bug。

背景

元素的背景区包括前景之下直到边框外边界的所有空间。

背景色

background-color：

• <color>
• transparent（默认，透明）
• inherit

如果希望背景色从元素中的文本向外稍有延伸，只需增加一些内边距。
background-color不能继承。

历史问题

Navigator4对背景色的处理不会应用于整个内容框和内边距。
解决：外面加一个border，border颜色和背景色一致。

特殊效果

结合color和background-color。

扫描二维码关注公众号，回复： 3922809 查看本文章

背景图像

background-image：

• <uri>
• none
• inherit

body {background-image: url(bg23.gif);}

允许向任何元素应用背景图像。
理论上，可以向textareas和select列表等替换元素的背景应用图像。
background-image不能继承。

为什么背景不能继承

不雅观

关于背景的良好实践

在使用背景图像时最好同时设置背景色，达到一定效果。

有方向的重复

background-repeat：

• repeat（垂直和水平方向上都平铺）
• repeat-x（水平上平铺）
• repeat-y（垂直上平铺）
• no-repeat（不允许图像在任何方向上平铺）
• inherit

背景定位

background-position：决定原图像的位置（中心点）。

[[<percentage> | <length> | left | center | right ]
[<percentage> | <length> | top | center | bottom]?] ||
[[left | center | right] || [top | center | bottom]] |
inherit

例：

background-position:center center;

关键字

单个关键字		等价关键字
center			center center
top				top center
				center top
bottom			bottom center
				center bottom
right			center right
				right center
left			center left
				left center	

百分数

百分数值同时应用于元素和图像。
数值可以为负值（有意想不到的效果哦）。

长度值

从元素内边距区左上角的偏移（偏移点为左上角）。
数值可以为负值（有意想不到的效果哦）。

有方向的重复（深入）

通过结合使用background-position和background-repeat。

关联

background-attachment：可以使背景图片随文档滚动。

• scroll（默认值，随文档滚动）
• fixed（固定在窗口的位置，不随文档滚动）
• inherit

有意思的效果

实现背景的理想对齐：

body {
	background-image: url(grid1.gif);
	background-repeat: repeat;
	background-attachment: fixed;
}
h1 {
	background-image: url(grid2.gif);
	background-repeat: repeat;
	background-attachment: fixed;
}

复螺旋变形：
http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html

汇总

background：

[<background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>] | inherit

限制：如果background-position有两个值，它们必须一起出现，而且如果这两个值是长度或百分数值，则必须按水平值在前垂直值在后的顺序。

浮动和定位

定位的基本思想：允许定义元素框相对于正常位置、或父元素、或另一个元素、或浏览器窗口本身应该出现在哪里。
浮动：脱离正常流布局。

浮动

float：所有元素都可以浮动。

• left
• right
• none
• inherit

最先作用：文字环绕图片。

浮动元素

一个元素浮动时，其他内容会“环绕”该元素。
浮动元素的外边距不会合并。
如果确定要浮动一个非替换元素，则必须为该元素声明一个width。

不浮动

float：none；
用于防止元素浮动。

浮动的详细内幕

包含块（containning block）
浮动元素的包含块是其最近的块级祖先元素。
浮动元素会生成一个块级框，而不论这个元素本身是什么。

浮动的一些规则：

• 浮动元素的左（或右）外边界不能超过其包含块的左（或右）内边界。
• 浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
• 左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边。
• 一个浮动元素的顶端不能比其父元素的内顶端更高。如果一个浮动元素在两个合并外边距之间，放置这个浮动元素时就好像在两个元素之间有一个块级父元素。
• 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
• 如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
• 左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边界不能在其包含块的右（左）边界的右边（左边）。
• 浮动元素必须尽可能高地放置。
• 左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。位置越高，就会向右或向左浮动得越远。

实用行为

这些效果产生原因有两方面：
1.规则中指出了一些要求。
2.规则中有些方面没有谈到。
比如：
浮动元素比父元素高时，浮动元素会超出其父元素的底端。
浮动元素会延伸，从而包含其所有后代浮动元素。

负外边距

负外边距可能导致浮动元素移到其父元素的外面。

浮动元素、内容和重叠

对于一个浮动元素于正常流中的内容发生重叠的处理方式：

• 行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示。
• 块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。

清除

clear：

• left
• right
• both
• none
• inherit

CSS2.1引入一个清除区域（clearance）：
清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内。

定位

position：

• static（初始值，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。）
• relative（元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。）
• absolute（元素框从文档流完全删除，并相对于其包含块定位。）
• fixed（元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。）
• inherit

包含块

• ”根元素“的包含块（也称为初始包含块）由用户代理建立。（html或body）
• 对于一个非根元素，如果其position值是relative或static，包含块则是由最近的块级框、表单元格或行内块祖先框的内容边界构成。
• 对于一个非根元素，如果其position值是absolute，包含块设置为最近的position值不是static的祖先元素（可以是任何类型）。

偏移属性

top、right、bottom、left：

• <length>
• <percentage>
• auto
• inherit

正值向内偏移，负值向外偏移。
偏移定位元素的外边距边界时，带来的影响是元素的所有一切（包括外边距、边框、内边距和内容）都会在定位的过程中移动。

宽度和高度

不显式设置width和height：

top: 0; bottom: 0; left: 0; right:50%;

限制宽度和高度

min-width、min-height：

• <length>
• <percentage>
• inherit

max-width、max-height：

• <length>
• <percentage>
• none
• inherit

内容溢出和剪裁

overflow和clip

溢出

overflow：

• visible（初始值，元素的内容在元素框之外也可见。）
• hidden（元素的内容会在元素框的边界处剪裁，不通过滚动条等接口使用户访问超出剪裁区域的内容。）
• scroll（元素的内容会在元素框的边界处剪裁，但是浏览器有提供滚动条来让读者可以访问内容而不会改变元素本身的形状。）
• auto（允许用户代理来确定采用何种行为。）
• inherit

内容剪裁

clip：改变剪裁区域的形状。

• rect(top,right,bottom,left)
• auto（默认值，表示元素的内容不应裁剪）
• inherit

rect(top,right,bottom,left)的值不是偏移量，而是距元素左上角的距离。只能是长度值和auto。
裁剪区域可以超越下边界和右边界，但是不能超越上边界和左边界。

元素可见性

visibility：

• visible（默认值，可见）
• hidden（”不可见“，元素还是会影响文档的布局。与display: none有区别。）
• collapse（在CSS表显示中使用）
• inherit

visibility属性可以继承。

绝对定位

绝对定位的具体细节

包含块和绝对定位元素

元素绝对定位时，会从文档流中完全删除。然后相对其包含块定位，其边界根据偏移属性（top、left等）放置。
创作人员通常会选择一个元素作为绝对定位元素的包含块，将其position指定为relative而且没有偏移：

p.contain {position: relative;}

元素绝对定位时，还会为其后代元素建立一个包含块。
如果文档可滚动，定位元素会随着它滚动。（绝对元素不是固定定位元素的后代。）

绝对定位元素的放置和大小

下面代码中的包含块宽度必须是h1的font-size计算值的2.5倍，以下的值才能正确。

#masthead h1 {
	position: absolute;
	top: 0;
	left: 1em;
	right: 10%;
	bottom: 0;
	margin: 0;
	padding: 0;
	height: 1em;
	width: 50%;
	background: silver;
	}

自动边偏移

元素绝对定位时，如果除bottom外某个任意偏移属性设置为auto，会有一种特殊的行为。
left：auto；
元素的左边界会相对于其包含块的左边界放置（可以假设其包含块是初始包含块）。
top：auto；
定位元素的顶端要相对于其未定位前本来的顶端位置对齐。

非替换元素的放置和大小

一般地，元素的大小和位置取决于其包含块。各个属性（width、right、padding-left等）的值也会有一些影响，不过最主要的还是其包含块。
公式:
包含块的width = left + margin-left + border-left-width + padding-left-width + padding-right + border-right-width + margin-right + right
当包含块宽度有剩余时，用户代理会忽略right的值或left的值（从左向右的语言中忽略右，从右向左的语言中将忽略left）。
一般地，如果只有一个属性设置为auto，就会修改这个属性来满足本节前面给出的等式。
在水平布局中，如果值设置为auto，right或left都可以根据其静态位置放置。
但在垂直布局中，只有top可以取静态位置，出于某种原因，bottom做不到。
另外，如果一个绝对定位元素的大小在垂直方向上过度受限，将忽略bottom。

替换元素的放置和大小

在替换元素定位中没有“恰当收敛”行为的概念。
确定替换元素位置和大小时，所涉及的行为用以下规则描述：

1. 如果width设置为auto，width的实际使用值由元素内容的固有宽度决定。
2. 在从左向右读的语言中，如果left值为auto，要把auto替换为静态位置（反之，right）。
3. 如果left或right仍为auto（就是说，未在上一步中被替换），则将margin-left或margin-right的auto值替换为0。
4. 如果此时margin-left和margin-right都还定义为auto，则把它们设置为相等的值，从而将元素在其包含块中居中。
5. 在此之后，如果只剩下一个auto值，则将其修改为等于等式的余下部分（使等式满足）。
6. height有像素的规则

Z轴上的放置

z-index：

• <integer>
• auto
• inherit

利用z-index，可以改变元素相互覆盖的顺序。
数值可正可负。
各元素有自己“次级”的z-index。
比如：在div下有p和em，div、p、em的index为7、36、-42。则p和em的z-index是在div下的z-index。
作为body元素后代的一个绝对定位元素就不能叠放在body的背景之下，不过可以叠放在body的内容下面。

固定定位

固定定位的包含块是视窗。
元素会完全从文档流中去除，不会有相对于文档中任何部分的位置。

相对定位

采用这种机制时，将通过使用偏移属性移动定位元素。
当元素相对定位时，它会从其正常位置移走，不过，原来所占的空间并不会因此消失。
如果遇到过度受限的相对定位，一个值会重置为另一个值的相反数。

表布局

这种布局已经不建议使用。

表格式化

表格式化（table formatting）：组装的基本方法，了解表中的元素相互之间有什么关系。

表的视觉编排

CSS对于表元素和内部表元素有很分明的界限。
在CSS中，内部表元素生成矩形框，这些框有内容、内边距和边框，但是没有外边距。

表编排规则

• 每个行框包含一行表格单元。表中的所有行框按其在源文档中出现的顺序从上到下地填充表（表的标题行框和脚注行框例外，它们分别出现在表的最前面和最后面）。因此，有多少个行元素，表中就包含多少表格行。
• 一个行组包含多少个行框，该行组框就包含多少个表格单元。
• 列框包含一列或多列表格单元。所有列框都按其出现的顺序依次相邻放置。对于从左向右读的语言，第一个列框放在左边，而对于从右向左读的语言，第一个列框则放在右边。
• 列组中包含多少个列框，该列框中就包含多少个表格单元。
• 由文档语言来定义这种跨行或跨列。
• 单元格框不能超出表或行组的最后一个行框。如果表结构可能造成这种情况，单元格则必须缩小，使之能放在包含它的表或行组中。

表显示值

使用一组display值
display：

• none（无，不显示）
• inline（初始值，行内元素）
• block（块级元素）
• inline-block（行内块元素，块级元素和行内元素的混合。作为一个行内框与其他元素和内容相关。效果类似img）
• list-item（列表项元素）
• run-in（块/行内元素混合，可以使某些块级元素成为下一个元素的行内部分。）
• table（这个值指定一个元素定义了一个块级表。类似HTML的table）
• inline-table（这个值指定一个元素定义了一个行内级表。类似inline-block）
• table-row-group（这个值指定一个元素是一个或多个行的组。类似tbody）
• table-header-group（这个值与table-row-group非常相似，只是视觉格式化方面有所不同。类似thead）
• table-footer-group（这个值与 table-header-group很类似，类似tfoot。）
• table-row（这个值指定了一个元素是一个单元格的行。类似tr元素。）
• table-column-group（这个值声明一个元素是一个或多个列的组。不显示，类似colgroup）
• table-column（这个值声明元素描述了一个单元格的列。不显示，类似col元素）
• table-cell（这个值指定一个元素表示表中的单个单元格。类似th、td）
• table-caption（这个值定义一个表的总标题。类似caption）
• inherit

以行为主

第一列由各行中的第一个单元格组成，第二列则由各行中第二个单元格组成，依此类推。

列

在CSS中列和列组只能接受4种样式：

• border（只有当border-collapse属性值为collapse时才能为列和列组设置边框。）
• background（只有当单元格及其行有透明背景时，列或列组的背景才可见。）
• width（width属性定义了列或列组的最小宽度。）
• visibility（如果一个列或列组的visibility为collapse，则该列（或列组）中所有单元格都不显示。）

匿名表对象

缺少tr的HTML代码：

<table>
	<td>Name: </td>
	<td><input type="text"></td>
</table>

CSS定义了一种机制，可以将“遗漏的”组件作为匿名对象插入。

<table>
	[anonymous table-row object begins]
	<td>Name: </td>
	<td><input type="text"></td>
	[anonymous table-row object ends]
</table>

CSS表模型中可能出现7种不同的匿名对象插入。

对象插入规则

1. 如果一个table-cell元素的父元素不是table-row元素，则会在该table-cell元素及其父元素之间插入一个匿名table-row对象。所插入的这个对象将包含该table-cell元素的所有连续兄弟。
2. 如果一个table-row元素的父元素不是table、inline-table或table-row-group元素，则会在该table-row元素及其父元素之间插入一个匿名table元素。
3. 如果一个table-column元素的父元素不是table、inline-table或table-column-group元素，则会在该table-column元素及其父元素之间插入一个匿名table元素。
4. 如果一个table-row-group、table-header-group、table-footer-group、table-column-group或table-caption元素的父元素不是table元素，则会在该元素及其父元素之间插入一个匿名table元素。
5. 如果一个table或inline-table元素的子元素不是table-row-group、table-header-group、table-footer-group、table-row或table-caption元素，则在该table元素与其子元素之间插入一个匿名table-row对象。这个匿名对象将包含该子元素的所有不是table-row-group、table-header-group、table-footer-group、table-row或table-caption元素的连续兄弟。
6. 如果一个table-row-group、table-header-group或table-footer-group元素的子元素不是table-row元素，则在该元素及其子元素之间插入一个匿名table-row对象。这个匿名对象包含该子元素的所有本身非table-row对象的连续兄弟。
7. 如果一个table-row元素的子元素不是table-cell元素，则在该元素和其子元素之间插入一个匿名table-cell对象。这个匿名对象包含该子元素的所有本身非table-cell元素的连续兄弟。

表层

为了完成表的显示，CSS定义了6个不同的“层”，可以分别放表的不同方面。
从上到下：

• 单元格
• 行
• 行组
• 列
• 列组
• 表

表标题

一小段文本，描述了表内容的本质。
CSS规范指出，表标题格式化为就好像它是直接放在表框之前（或之后）的一个块框，只有两个不同。

1. 表标题仍能从表继承值。
2. 用户代理在考虑如何处理表前面的run-in元素时会忽略表标题框。

caption-side：应用于display值为table-caption的元素。

• top
• bottom

表单元格边框

CSS中两种截然不同的边框模型：

• 分隔边框模型：单元格相会之间是分隔的。（默认模型）
• 合并边框模型：单元格之间没有可见的间隔，单元格边框会相互合并。

border-collapse：

• collapse（合并边框模型）
• separate（初始值，分隔边框模型）
• inherit

分隔单元格边框

表中的每个单元格都与其他单元格分开一定距离，而且单元格的边框彼此不会合并。

边框间隔

使用CSS改变单元格之间的间隔。
border-spacing：

• <length><length>?
• inherit

可以指定一个或两个长度值：水平间隔、垂直间隔。
声明一个border-spacing值，这会应用于表本身，而不是单个的单元格。
在分隔边框模型中，不能为行、行组、列和列组设置边框。

处理空单元格

empty-cells：

• show（会画出空单元格的边框和背景，就好像这些表单元格有内容一样。）
• hide（不会画出单元格的任何部分，就好像这个单元格被设置为visibility：hidden。）
• inherit

合并单元格边框

遵从以下规则：

• display值为table或inline-table的元素不能有任何内边距，不过它们可以有外边距。因此，表的外围边框与其最外单元格的边界之间不会有任何间隔。
• 边框可以应用到单元格、行、行组、列和列组。表元素本身通常都有一个边框。
• 单元格边框之间绝对不会有任何间隔。
• 一旦合并，单元格之间的边框会在单元格间的假想表格线上居中。

合并边框布局

border-widthi是指单元格i与下一个单元格之间的边框。
如果左或右边框比初始边框宽度更宽，则会延伸到表的外边距居中。

边框合并

解决哪一个边框占上风的问题：

• 如果某个合并边框的border-style为hidden，它会优先于所有其他合并边框。这个位置上的所有边框都隐藏。
• 如果某个合并边框的border-style为none，它的优先级最低，是默认值。
• 如果至少有一个合并边框的border-style值不是none，而且所有合并边框的border-style值都不是hidden，则窄边框不敌更宽的边框。
• 一样宽，则按照这个顺序：double、solid、dashed、dotted、ridge、outset、groove、inset。
• 如果合并边框的样式和宽度都一样，但是颜色不同，则按照这个顺序：cell、row、row group、table。
• 全部相同，只有颜色不同：取最上最右边框的颜色。

表大小

两种确定表的宽度的方法：

• 固定宽度布局
• 自动宽度布局

不论使用何种宽度算法，高度都会自动计算。

宽度

table-layout：选择采用哪种方法计算表的宽度。

• auto
• fixed
• inherit

固定布局

固定布局模型的速度之所以快的主要原因：
布局不依赖于表单元格的内容。其布局是根据该表以及表中列和单元格的width值决定的。
固定布局模型的工作包括以下简单步骤：

1. width属性值不是auto的所有列元素会根据width值设置该列的宽度。
2. 如果一个列的宽度为auto（不过，表首行中位于该列的单元格width不是auto）则根据该单元格宽度设置此列的宽度。如果这个单元格跨多列，则宽度在这些列上平均分配。
3. 在以上两步之后，如果列的宽度仍为auto，会自动确定其大小，使其宽度尽可能相等。

在使用固定宽度布局模型时，没有必要非得为表指定一个显式宽度。

自动布局

只要表的width为auto就会触发使用自动布局模型，而不论table-layout的值是什么。
模型的详细过程：

1. 对一列中的各个单元格，计算最小和最大单元格的宽度。
2. 对于各一列，计算最小和最大列宽。
3. 如果一个单元格跨多列，最小（大）列宽之和必须等于这个跨列单元格的最小（大）单元格宽度。

一个实例：

table {
	table-layout: auto;
	width: auto;
	border-collapse: collapse;
}
td {
	border: 1px solid;
}
col#c3 {
	width: 25%;
}
#r1c2 {
	width: 40%;
}
#r2c2 {
	width: 50px;
}
#r2c3 {
	width: 35px;
}
#r4c1 {
	width: 100px;
}
#r4c4 {
	width: 1px;
}

<table>
		<colgroup>
			<col id="c1"><col id="c2"><col id="c3"><col id="c4">
		</colgroup>
		<tr>
			<td id="r1c1">1-1</td>
			<td id="r1c2">1-2</td>
			<td id="r1c3">1-3</td>
			<td id="r1c4">1-4</td>
		</tr>
		<tr>
			<td id="r2c1">2-1</td>
			<td id="r2c2">2-2</td>
			<td id="r2c3">2-3</td>
			<td id="r2c4">2-4</td>
		</tr>
		<tr>
			<td id="r3c1">3-1</td>
			<td id="r3c2">3-2</td>
			<td id="r3c3">3-3</td>
			<td id="r3c4">3-4</td>
		</tr>
		<tr>
			<td id="r4c1">4-1</td>
			<td id="r4c2">4-2</td>
			<td id="r4c3">4-3</td>
			<td id="r4c4">4-4</td>
		</tr>
	</table>

1-2：最小宽度：50px，最大宽度40%；
3-3：最小列宽35px，最大宽度为最终表宽度的25%；
4-1：最大、最小都是100px；
4-4：最小和最大列宽都等于单元格的最小内容宽度，计算为25px。

高度

最容易的一种情况：直接由height属性显式设置高度。
若表的高度为auto：其高度则是表中所有行的行高再加上所有边框和单元格间隔的总和。
CSS2.1中没有定义的内容：

• 表单元格高度为百分数时的效果
• 表行和行组高度为百分数时的效果
• 跨行单元格如何影响所跨行的高度

对齐

使用text-align属性：

• top：单元格内容的顶端与其行顶端对齐，对于跨行单元格，单元格内容的顶端与其所跨的第一行的顶端对齐。
• bottom：单元格内容的底端与其行底端对齐，对于跨行单元格，单元格内容的底端与其所跨的最后一行的底端对齐。
• middle：单元格内容的中间与其行中间对齐；对于跨行单元格，单元格内容的中间与其所跨行的中间对齐。
• baseline：单元格的基线与其行的基线对齐，对于跨行单元格，该单元格的基线与其所跨的第一行的基线对齐。

行的基线由该行所有单元格中最低初始单元格基线定义（也就是第一个文本的基线）。

列表与生成内容

列表中的项其实就是块框。

列表

就是ul和ol

列表类型

list-style-type：只能应用于display值为list-item的元素。

• disc（实心圆）
• circle（空心圆）
• square（方块，实心或空心）
• decimal（1，2，3，4，5，·····）
• decimal-leading-zero（01，02，03，04，05，······）
• upper-alpha（A，B，C，D，E，······）
• lower-alpha（a，b，c，d，e，······）
• lower-roman（i，ii，iii，iv，v，······）
• upper-roman（I，II，III，IV，V，······）
• lower-greek（传统小写希腊符号）
• lower-latin
• upper-latin
• armenian（传统亚美尼亚序号）
• georgian（传统乔治序号）
• none
• inherit

list-style-type属性可以继承。

列表项图像

list-style-image：

• <uri>
• none
• inherit

列表标签位置

list-style-position：

• inside（将标签拉向内容，标志放在列表项的内容“以内”。）
• outside（默认值，显示与一般Web上列表项的显示无二。）
• inherit

简写列表样式

list-style：

• [ <list-style-type> || <list-style-image> || <list-style-position>]
• inherit

列表布局

标志和列表项内容之间的距离在CSS中未定义。
标志总会相对于列表项的内容放置，因此可能会“挂”在文档主文本之外，甚至超出浏览器容器边界。

生成内容

生成内容（generated content）的新特性：由浏览器创建的内容。

插入生成内容

使用:before和:after伪元素：会根据content属性把生成内容放在一个元素内容的前面或后面。
CSS2和CSS2.1明确地禁止浮动或定位:before和:after内容，还禁止使用列表样式属性以及表属性。有以下限制：

• 如果:before或:after选择器的主体是块级元素，则display属性只接受值none、inline、block和marker。其他值都处理为block。
• 如果:before或:after选择器的主体是行内元素，则display属性只接受值none和inline。其他值都处理为inline。

例：下面display的值会被重置为inline

em:after { 
	content: " (!) ";
	display: block;
	}

指定内容

content：

• normal（默认值）

[<string> | <uri> | <counter> | attr(<identifier>) | open-quote |
close-quote | no-open-quote | no-close-quote ]

• inherit

<string>：串值会原样显示，即使其中包含某种标记也不例外。（可以识别CSS的转义字符编码）
<uri>：指向一个外部资源。
quote：引号。

插入属性值

attr(<identifier>)：可以取出元素属性的值。
比如：把链接的地址取出来放在链接的后面

a[href]:after {content: attr(href);}

这会导致生成内容与具体内容冲突，解决方法：

a[href]:after {content: “ [" attr(href) "]";}

如果一个属性不存在，会在相应位置插入一个空串。

生成引号

quotes：

• [<string> <string>]+
• none
• inherit

前一个串定义开始引号（open-quote），第二个串定义结束引号（close-quote）。

quotes: '"' "'";

弯引号：\201C
no-close-quote：多段引用文本，忽略每一段的结束引号。
使用引用嵌套层次递减。

计数器

有序列表中的列表项标志就是计数器。

重置和递增

创建计数器的基础包括两个方面：

1. 能设置计数器的起点（属性counter-reset）
2. 能将其递增一定的量

counter-reset：

• [<identifier><integer>?]+
• none
• inherit

计数器标识符只是创作人员创建的一个标签。
计数器chapter就在重置时定义

h1 {counter-reset: chapter;}

默认地，计数器重置为0，如果想重置为另一数，可以在标识符后面说明这个数。

h1#ch4 {counter-reset: chapter 4;}

可以在标识符-整数对中一次重置多个标识符。

counter-increment：指示元素将计数器递增。

• [<identifier><integer>?]+
• none
• inherit

整数部分可以是0、正数和负数。
整数默认值为1而不是0。

ol {counter-reset: ordered;} 	/*defaults to 0 */
ol li {counter-increment: ordered;} 		/*defaults to 1*/

用户代理定义计数器生成有序列表传统的1，2，3计数。

使用计数器

要具体显示计数器，需要结合使用content属性和一个与计数器有关的值。

h1:before {
	counter-reset: section subsec;
	counter-increment: chapter;
	content: counter(chapter) ". ";
}
h2:before {
	counter-reset: subsec;
	counter-increment: section;
	content: counter(chapter) ". " counter(section) ". ";
}
h3:before {
	counter-increment: subsec;
	content: counter(chapter) ". " counter(section) ". " counter(subsec) ". ";
}

没有预期效果。。。
display为none的元素并不会递增计数器。
visibility为hidden的元素会递增计数器。

计数器和作用域

作用域（scope）：每层嵌套都会为给定计数器创建一个新的作用域。
用counters()替代counter()；

用户界面样式

CSS提供了很多有用的界面样式工具，而不仅仅面向文档。

系统字体和颜色

让文档能尽可能地模仿用户的计算机环境。

系统字体

一个按钮改变控件的外观。

a.widget {font: caption;}

CSS2定义了6个系统字体关键字。

• caption：由标题控件使用的字体样式，如按钮和下拉控件。
• icon：操作系统图标标签所用的字体样式，如硬盘驱动器、文件夹和文件图标。
• menu：下拉菜单和菜单列表中文本使用的字体样式。
• message-box：对话框中文本使用的字体样式
• small-caption：由标题小控件的标签使用的字体样式
• status-bar：窗口状态中文本使用的字体样式。

系统颜色

总共有28个系统颜色关键字：

• ActiveBorder：活动窗口的外边框。
• ActiveCaption：活动窗口标题的背景色。
• AppWorkspace：支持多个文档的应用中使用的背景色。
• Background：桌面的背景色。
• ButtonFace：三维按钮”面“上使用的颜色。
• 略

光标

指示设备

改变光标

cursor：

[[<uri>,]* [auto | default | pointer | crosshair | move
| e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize
| s-resize | w-resize | text | wait | help | progress ]] | inherit

默认值：auto，只表示用户代理应当确定最适合当前上下文的光标图标。
default：操作系统的默认光标。

指示和选择光标

pointer：把光标图标改为与移过超链接时的光标相同。
IE6以前手是hand。
text：选择文本出现“I”光标。
crosshair：把光标图标变成一个十字符号。

移动光标

move：加粗的十字线，也可以是一个“拳头”。
与move相关 cursor值：e-resize、ne-resize等等。

等待和前进

wait和progress都指示程序正在忙。
wait：表示用户等待直到程序不忙为止。（一块表）
progress：指示用户完全可以继续与程序交互，尽管它很忙。（旋转的“沙滩球”）

提供帮助

help：可能是一个箭头带一个问号。

图形光标

可以指定定制光标，使用URL值做到：

a.external {cursor: url(globe.cur), pointer;}

用户代理必须支持存储globe.cur所用的文件格式，url值可多个。

轮廓

轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。
用户代理会“合并”部分轮廓，创建一个连续但非矩形的形状。
轮廓和边框可以共存，轮廓可以画在边框边界的外面。

设置轮廓样式

outline-style：

• none（默认值）
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• inherit

只能为一个outline-style值指定一个关键字（边框最多可以4个）。

轮廓宽度

outline-width：

• thin
• medium（默认值）
• thick
• <length>
• inherit

设置轮廓颜色

outline-color：

• <color>
• invert（初始值）
• inherit

反色轮廓（invert）：要对轮廓所在的像素完成反色转换。

汇总

outline：

• [<outline-color> || <outline-style> || <outline-width>]
• inherit

CSS没有明确地拒绝定义两个轮廓相互重叠时的行为。

非屏幕媒体

比如非视觉访问。

设计特定于媒体的样式表

1.提供media属性对媒体做出限制。在link和style元素中的用法是一样的。
2.使用@media块，允许在同一个样式表中为多个媒体定义样式。

分页媒体

paged medium：把文档表示处理为一系列离散“页面”的媒体。

打印样式

会应用于“打印预览”模式的文档显示。

屏幕与打印的区别

在背景、字体大小、布局等方面都有不同。

定义页面大小

CSS定义了描述页面组件的页框（page box）。基本由两个区组成：

• 页面区（page area），这是页面中放内容的部分。
• 外边距区（margin area），这是围绕页面区的部分。

CSS2中的属性：size

• <length>{1,2}
• auto（默认值）
• portrait
• landscape（布局旋转90度）
• inherit

选择页面类型

提供@page规则创建不同的页面类型。

@page normal {size: portrait;margin: 1in;}
@page rotate {size: landscape; margin: 0.5in;}

body {page: normal;}
table#moon-data {page: rotate;}

page：

• <identifier>
• inherit

分页

使用属性page-break-before和page-break-after影响分页。

• auto：默认值，只是说明不要求在元素之前或之后分页。
• always：导致在设置样式的元素之前（或之后）放一个分页符。
• avoid：用户代理尽量避免在一个元素之前或之后放置分页符。
• left：左边放分页符。
• right：右边放分页符。
• inherit

应用于position值为relative或static的非浮动块级元素。

page-break-inside：在一个元素内部放置分页符。

• auto
• avoid
• inherit

Orphans和widows

widows、orphans：

• <integer>
• inherit

widows：放在页面顶部的元素在不导致前面增加分页符的前提下所包含的最小行框数。
orphans：放在页面底部的元素在不导致前面增加分页符的前提下所包含的最小行框数。

分页行为

• 第一个元素的page-break-after值或第二个元素的page-break-before值是always、left或right。不论其他元素的值是什么（甚至可能是avoid），都必须在元素前放置分页符（这是强制分页符）。
• 第一个元素的page-break-after值为auto，第二个元素的page-break-before值也是auto，而且它们没有一个page-break-inside值不为avoid的共同祖先元素。

CSS2定义了一组“最佳”分页行为：

• 尽可能少分页
• 让所有不是强制分页符结尾的页面都有相同的高度。
• 避免在有边框的块内部分页。
• 避免在表内部分页。
• 避免在浮动元素内部分页。

重复元素

页头（running head）：在每个页面上都出现的一个元素。
实现：通过position: fixed;

页面外的元素

对于一个非常宽的pre元素，用户代理可能只是将该元素剪裁为适应页框大小，并扔掉余下的内容。
有空页，用户代理会跳过这些空页。

投影样式

投影（projection）：描述了投影到一个屏幕上的信息。

建立幻灯片

使用分页属性。

定位元素

结合position制作美观效果。

关于投影的考虑

投影不能保证颜色的真实性。

声音样式

CSS2.1废弃了媒体类型aural以及与之相关的 所有属性。

语音

speak：

• normal（默认值）
• none（禁声）
• spell-out（通常于缩略语或应当读出的其他内容结合使用）
• inherit

标点符号和数字

speak-punctuation：

• code（会把标点符号具体读出）
• none（默认值）
• inherit

speak-numeral：定义了如何读出数字。

• digits
• continuous（默认值，数字被读作一个完整的数）
• inherit

表标题的声音表现

speak-header：

• once
• always
• inherit

语速

speech-rate：

• <number>：按每分钟单词数指定语速。
• x-slow：相当于每分钟80词。
• slow：相当于每分钟120词。
• medium：相当于每分钟180-200词。
• fast：相当于每分钟300词。
• x-fast：相当于每分钟500词。
• faster：将当前语速提高每分钟40词。
• slower：将当前语速降低每分钟40词。

音量

volume：

• <number>（0-100）
• <percentage>
• silent（静音）
• x-soft（ 0 ）
• soft（25）
• medium（50）
• loud（75）
• x-loud（100）
• inherit

指定声音

voice-family：

• [[<specific-voice> | <generic-voice>],]* [<specific-voice> | <generic-voice>]
• inherit

改变声音

CSS定义了一些属性来影响声音的所有方面。

改变音高

pitch：频率

• <frequency>
• x-low
• low
• medium
• high
• x-high
• inherit

pitch-range：影响音高的变化范围。

• <number>
• inherit

重音与音色

stress：

• <number>
• inherit

richness：

• <number>
• inherit

停顿和提示

停顿：pause-before、pause-after：

• <time>
• <percentage>
• inherit

pause：

• [[<time> | <percentage>]{1,2}]
• inherit

提示：cue-before、cue-after：

• <uri>
• none（默认值）
• inherit

cue：

• [<cue-before> || <cue-after>]
• inherit

停顿、提示和生成内容

h1 {cue: url(trumpet.mp3);}
h1:before {content: "Behold! ";}
h1:after {content: ". Verily!";}
<h1>The Beginning</h1>

背景声音

play-during：

• <uri>
• [mix || repeat]?
• auto
• none
• inherit

声音定位

azimuth：

• <angle>
• [[left-side | far-left | left | center-left | center | center-right | right | far-right | right-side] || behind]
• leftwards
• rightwards
• inherit

角度值可以有3种单位：deg（度）、grad（梯度）和rad（弧度）。

elevation：

• <angle>
• below
• level
• above
• higher
• lower
• inherit

结合azimuth和elevation

可以实现立体环绕了。