CSS文集《The CSS Anthology》 第二章 文本格式化及其它基础知识 （1）

第二章 文本格式化及其它基础知识（Text Styling and Other Basics）

《The CSS Anthology（CSS文集）》包含100多个实用的小例子，非常适合入门者学习CSS相关的知识。

1. 用CSS替换<font>标签
曾几何时，在CSS被广泛接纳之前，很多Web开发者都是使用<font>标签在网页上为文本加样式。但是这种方法会导致工作量非常大，试想一下为每一个段落都加上这样一个标签，或者之后客户又要求为这些段落换上新的样式时……而使用CSS的话，只需要改动一处地方即能使新样式应用到所有的标签，非常便利。

p {
  color : #800080;
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

2.字体的大小使用什么单位？

pt	points
pc	picas
px	像素
em	ems
ex	exes
%	百分比

pt, pc都是用于印刷用途，不适合作屏幕显示文字的字体大小单位。反之，如果文字是用于印刷用途，也不应该用px, em等单位。em,ex是相对于浏览器默认的字体大小而言，或相对于父标签的大小而言的。使用px的缺点：会使用户的自定义字体大小设置无效，一些只能阅读大字体的特殊用户的字体偏好设置将失效，这就降低了网页的可访问性。

3.用指定字体显示文字
可以为文字指定一个特定字体，也可以指定为一类字体。
如

p {
  font-family: Verdana, sans-serif;
}

这里sans-serif就是一类字体的名称，此外还有serif, monospace, cursive, fantasy...等等都是。

4.去除超链接的下划线
把text-decoration文字修饰属性设为none即可。

a:link, a:visited {
  text-decoration : none;
}

text-decoration可以设置的值还有overline, line-through, blink, underline.
可以同时设置多个值，那这些样式都会加到链接上。

5.当光标移动到链接上时，改变字体颜色

a:link, a:visited, a:hover, a:active {
  text-decoration : underline;
  color : #6A5ACD;
  background-color : transparent;
}

这种效果常见于导航菜单。

6. 同一页面，不同风格的链接
为不同风格的链接用不同的区块（DIV）区分开来。比如下面的例子，如图，默认的链接(截图下方)是一种风格，而DIV块boxout（截图上方）里的链接是另一种风格。

.
a:link, a:visited {
  text-decoration : underline;
  color : #6A5ACD;
  background-color : transparent;
}

a:hover, a:active {
  text-decoration : underline overline;
  color : #191970;
  background-color : #C9C3ED;
}

.boxout {
  color : #FFFFFF;
  background-color : #6A5ACD;
}

.boxout a:link, .boxout a:visited {
  text-decoration : underline;
  color : #E4E2F6;
  background-color : transparent;
}

.boxout a:hover, .boxout a:active {
  color : #191970;
  background-color : #C9C3ED;
}

图2-1

7.列表项的第一个使用不同风格
有两种方法：一是使用first-child 选择器；二是为第一个列表项添加一个class。
如下图，第一组列表是用first-child选择器的方式；第二级列表则是为第一项设置一个class.但是IE6不支持第一种方式，所以针对于IE6，应该选择第二种方式。

/* 方法1 使用first-child选择器 */
li:first-child {
	color : red;
}

/* 方法2 CSS选择器 */
li.unusual {
	color : red;
}

图2-2

8.pg34 为标题加背景颜色
标题标签组（h1, h2, h3, ...）也支持CSS设置background-color属性为其添加背景颜色。
如图所示。

h1.pg34 {
	background-color : #ADD8E6;
	color : #256579;
	font : 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* 注意：为标题背景设置合理的空白 */
	padding : 0.2em;
}

图2-3

9.pg35 带下划线的标题

<div>
	<h1 class="pg35">
		Chinese-style Stuffed Peppers
	</h1>
	Below, I've created a CSS rule for all te level-one headings in a document. The result is shown in Figure 2.11.
	hello, world......	
</div>
		
<div>
	<h1 class="pg36">
		Chinese-style Stuffed Peppers
	</h1>
	Below, I've created a CSS rule for all te level-one headings in a document. The result is shown in Figure 2.11.
	hello, world......	
</div>

h1.pg35 {
	font : 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* 为标题加下划线，方法一 */
	text-decoration : underline;
}

h1.pg36 {
	font : 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding : 0.2em;
	/* 为标题加下划线，方法二 */
	border-bottom : 1px solid #aaaaaa;
}

图2-4

10. pg37 去除标题和紧随着的段落之间的空白

<div>
	<h1 class="pg37">
		Chinese-style Stuffed Peppers
	</h1>
	Below, I've created a CSS rule for all te level-one headings in a document. The result is shown in Figure 2.11.
	hello, world......	
</div>

h1.pg37 {
	font : 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* 去除标题与其后段落的大量空白 */
	margin-bottom : 0;
}

h1.pg39 {
	font : 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* margin可以设置负值，但是padding只能设置为正值。*/
	margin-bottom : -0.6em;
}

图2-5