- CSS 指层叠样式表 (Cascading Style Sheets)
内容与表现分离的问题
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的 优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
selector {property: value}
p { color:
#ff0000
; }
p { color:
red
; }
p { color:
#f00
; }
p { color:
rgb(255,0,0)
; }p { color:
rgb(100%,0%,0%)
; }
请注意，当使用 RGB 百分比时，即使当值 为 0 时也要写百分比符号 。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
提示： 如果值为若干单词，则要给值加 引号：
p {font-family:
"sans serif"
;}
最后一条规则是不需要加分号的 ，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会 在每条声明的末尾都加上分号 ，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。
是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对 大小写不敏感 。不过存在一个 例外： 如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
不可以在内联元素 <span> 中嵌入 <p>
#sidebar
{border: 1px dotted #000;padding: 10px;}
根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：
div#sidebar
{border: 1px dotted #000;padding: 10px;}
注意： 类名(class)的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释： 只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]
{color:red;}
属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]
{border:5px solid blue;}
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello]
{ color:red; } //title约等于hello,即含有hello
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; } //恒等于
CSS 选择器参考手册
选择器 |
描述 |
用于选取带有指定属性的元素。 |
|
用于选取带有指定属性和值的元素。 |
|
用于选取属性值中包含指定词汇的元素。 |
|
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
|
匹配属性值以指定值开头的每个元素。 |
|
匹配属性值以指定值结尾的每个元素。 |
|
匹配属性值中包含指定值的每个元素。 |
不要在 属性值与单位 之间留有 空格 。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
background-color 不能继承 ，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。
另外还要补充一点，background-image 也不能继承。事实上， 所有背景属性都不能继承。
如果需要在页面上对 背景图像进行平铺， 可以使用 background-repeat 属性 。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
body { background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
背景定位
可以利用 background-position 属性 改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置：
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：
p { background-image:url('bgimg.gif'); background-repeat:no-repeat;
background-position:top;
}
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:50% 50%;
}
这会导致图像适当放置，其中心与其元素的中心对齐。 换句话说，百分数值同时应用于元素和图像。 也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。
如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:66% 33%;
}
如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat;
background-position:50px 100px;
}
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性 防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat;
background-attachment:fixed
}background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。
CSS 背景属性
属性 |
描述 |
简写属性，作用是将背景属性设置在一个声明中。 |
|
背景图像是否固定或者随着页面的其余部分滚动。 |
|
设置元素的背景颜色。 |
|
把图像设置为背景。 |
|
设置背景图像的起始位置。 |
|
设置背景图像是否及如何重复。 |
通过使用 text-indent 属性 ，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
注意： 一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示： 如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
使用负值
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：
不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：
div {width: 500px;}p {text-indent: 20%;}<div><p>this is a paragragh</p></div>
水平对齐
text-align 是一个基本的属性，它会影响一个元素中的 文本行 互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。
提示： 将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。
text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。
<CENTER> 不仅影响文本，还会把整个元素居中 。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是 其中的文本受影响。
justify
最后一个水平对齐属性是 justify。
在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。
需要注意的是，要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。如需了解详情，请参阅 CSS text-align 属性参考页 。
字间隔
word-spacing 属性 可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
字母间隔
letter-spacing 属性 与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
字符转换
text-transform 属性 处理文本的大小写。这个属性有 4 个值：
- none
- uppercase
- lowercase
- capitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的 首字母大写 。
文本装饰
接下来，我们讨论 text-decoration 属性 ，这是一个很有意思的属性，它提供了很多非常有趣的行为。
text-decoration 有 5 个值：
- none
- underline
- overline
- line-through
- blink
不出所料，underline 会对元素加 下划线 ，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个 上划线 。值 line-through 则在文本中间画一个 贯穿线 ，等价于 HTML 中的 S 和 strike 元素。blink 会让 文本闪烁 ，类似于 Netscape 支持的颇招非议的 blink 标记。
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：
a:link a:visited {text-decoration: underline overline;}
不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：
h2.stricken {text-decoration: line-through;}h2 {text-decoration: underline overline;}
对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来 。
处理空白符
white-space 属性 会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
<p>This paragraph has many spaces in it.</p>
可以用以下声明显式地设置这种默认行为：
p {white-space: normal;}
上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
值 pre
不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。
如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。
注意： 经测试，IE 7 以及更早版本的浏览器不支持该值，因此请使用非 IE 的浏览器来查看上面的实例。
值 nowrap
与之相对的值是 nowrap，它会 防止元素中的文本换行 ，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。
值 pre-wrap 和 pre-line
CSS2.1 引入了值 pre-wrap 和 pre-line，这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本中一样合并空白符序列，但保留换行符。
注意： 我们在 IE7 和 FireFox2.0 浏览器中测试了上面的两个实例，但是结果是，值 pre-wrap 和 pre-line 都没有得到很好的支持。
总结
下面的表格总结了 white-space 属性的行为：
值 |
空白符 |
换行符 |
自动换行 |
pre-line |
合并 |
保留 |
允许 |
normal |
合并 |
忽略 |
允许 |
nowrap |
合并 |
忽略 |
不允许 |
pre |
保留 |
保留 |
不允许 |
pre-wrap |
保留 |
保留 |
允许 |
文本方向
如果您阅读的是英文书籍，就会从左到右、从上到下地阅读，这就是英文的流方向。不过，并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的，当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 属性 影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
注释： 对于行内元素，只有当 unicode-bidi 属性 设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。
CSS 文本属性
属性 |
描述 |
设置文本颜色 |
|
设置文本方向。 |
|
设置行高。 |
|
设置字符间距。 |
|
对齐元素中的文本。 |
|
向文本添加修饰。 |
|
缩进元素中文本的首行。 |
|
text-shadow |
设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
控制元素中的字母。 |
|
unicode-bidi |
设置文本方向。 |
设置元素中空白的处理方式。 |
|
设置字间距。 |
字体风格
font-style 属性 最常用于规定斜体文本。
该属性有三个值：
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
实例
p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}
italic 和 oblique 的区别
font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。
字体变形
font-variant 属性 可以设定小型大写字母。
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用 不同大小的大写字母 。
实例
p {font-variant:small-caps;}
font-weight 属性 设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度 。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
font-size
相对大小 绝对大小
注意： 如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为： pixels /20= em ）
链接的四种状态：
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
实例
a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
修改用于列表项的标志类型，可以使用属性 list-style-type ：
ul {list-style-type : square}
上面的声明把无序列表中的列表项 标志设置为方块。默认是圆点
标志使用一个图像，这可以利用 list-style-image 属性做到：
ul li {list-style-image : url(xxx.gif)}
列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
简写列表样式
为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性： list-style ，就像这样：
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。
table, th, td { border: 1px solid blue; }
p
{
outline:#00ff00 dotted thick;
}
CSS 边框属性
"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。
属性 |
描述 |
CSS |
在一个声明中设置所有的轮廓属性。 |
2 |
|
设置轮廓的颜色。 |
2 |
|
设置轮廓的样式。 |
2 |
|
设置轮廓的宽度。 |
2 |
您还可以按照 上、右、下、左 的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为 一块内容 ，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性 改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为 行框（Line Box） ，行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
CSS 元素选择器（类型选择器）可以设置 XML 文档中元素的样式。
类型 |
描述 |
[abc^="def"] |
选择 abc 属性值以 "def" 开头的所有元素 |
[abc$="def"] |
选择 abc 属性值以 "def" 结尾的所有元素 |
[abc*="def"] |
选择 abc 属性值中包含子串 "def" 的所有元素 |
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1
+
p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪类 (Pseudo-classes)实例：
本例演示如何向文档中的超链接添加不同的颜色。
本例演示如何向超链接添加其他样式。
本例演示如何对超链接应用 :focus 伪类（无法在 IE 中工作）。
本例演示 :first-child 伪类的用法。
本例演示 :lang 伪类的用法。
语法
伪类的语法：
selector : pseudo-class {property: value}CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
CSS2 - :first-child 伪类
您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key
<strong>clockwise</strong>
</li><li>Push accelerator</li></ul><p>Do
<em>not</em>
push the brake at the same time as the accelerator.</p></div>
在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
给定以下规则：
p:first-child {font-weight: bold;}li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
请访问该链接，来查看这个 :first-child 实例 的效果。
提示： 最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
注释： 必须声明 <!DOCTYPE> ，这样 :first-child 才能在 IE 中生效。
为了使您更透彻地理解 :first-child 伪类，我们另外提供了 3 个例子：
例子 1 - 匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：
<html><head><style type="text/css">
p:first-child
{ color: red; } </style></head><body>
<p>some text</p>
<p>some text</p></body></html>
例子 2 - 匹配所有 <p> 元素中的第一个 <i> 元素
在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：
<html><head><style type="text/css">
p > i:first-child
{ font-weight:bold; } </style></head><body><p>some
<i>text</i>
. some <i>text</i>.</p><p>some
<i>text</i>
. some <i>text</i>.</p></body></html>
例子 3 - 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
<html><head><style type="text/css">
p:first-child i
{ color:blue; } </style></head><body><p>some
<i>text</i>
. some
<i>text</i>
.</p><p>some <i>text</i>. some <i>text</i>.</p></body></html>
CSS2 - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
<html><head><style type="text/css">
q:lang(no) { quotes: "~" "~" }
</style></head><body><p>文字<q
lang="no"
>段落中的引用的文字</q>文字</p></body></html>
伪类
W3C ："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性 |
描述 |
CSS |
向被激活的元素添加样式。 |
1 |
|
向拥有键盘输入焦点的元素添加样式。 |
2 |
|
当鼠标悬浮在元素上方时，向元素添加样式。 |
1 |
|
向未被访问的链接添加样式。 |
1 |
|
向已被访问的链接添加样式。 |
1 |
|
向元素的第一个子元素添加样式。 |
2 |
|
向带有指定 lang 属性的元素添加样式。 |
2 |
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：
实例
p:first-line { color:#ff0000; font-variant:small-caps; }
注释： "first-line" 伪元素只能用于块级元素。
注释： 下面的属性可应用于 "first-line" 伪元素：
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p:first-letter { color:#ff0000; font-size:xx-large; }
注释： "first-letter" 伪元素只能用于块级元素。
注释： 下面的属性可应用于 "first-letter" 伪元素：
- font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (仅当 float 为 none 时)
- text-transform
- line-height
- float
- clear
CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入一幅图片：
h1:before { content:url(logo.gif); }
CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：
h1:after { content:url(logo.gif); }
伪元素
W3C ："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性 |
描述 |
CSS |
向文本的第一个字母添加特殊样式。 |
1 |
|
向文本的首行添加特殊样式。 |
1 |
|
在元素之前添加内容。 |
2 |
|
在元素之后添加内容。 |
2 |
块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。
块元素的例子：
<h1><p><div>
出于布局目的如何水平对齐块级元素。
使用 margin 属性来水平对齐
可通过将左和右外边距设置为 "auto"，来对齐块元素。
注释： 除非已经声明了 !DOCTYPE ，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：
使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位：
实例
.right{
position:absolute;
right:0px;width:300px;background-color:#b0e0e6;}
注释： 绝对定位元素会被从正常流中删除，并且能够交叠元素。
使用 float 属性来进行左和右对齐
对齐元素的另一种方法是使用 float 属性：
实例
.right{
float:right;
width:300px;background-color:#b0e0e6;}
Cursor:
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
媒介类型
某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如，"font-size" 属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。
@media规则
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：
<html><head><style>
@media screen{p.test {
font-family:verdana,sans-serif; font-size:14px}
}@media print{p.test {font-family:times,serif; font-size:10px}}
@media screen,print{p.test {font-weight:bold}}
</style></head><body>....</body></html>
不同的媒介类型
注释： 媒介类型名称对大小写不敏感。
媒介类型 |
描述 |
all |
用于所有的媒介设备。 |
aural |
用于语音和音频合成器。 |
braille |
用于盲人用点字法触觉回馈设备。 |
embossed |
用于分页的盲人用点字法打印机。 |
handheld |
用于小的手持的设备。 |
print |
用于打印机。 |
projection |
用于方案展示，比如幻灯片。 |
screen |
用于电脑显示器。 |
tty |
用于使用固定密度字母栅格的媒介，比如电传打字机和终端。 |
tv |
用于电视机类型的设备。 |