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

deyum

第二章 文本格式化及其它基础知识（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;}


<div style="text-align: center;">