五日精通CSS层叠样式表

核心提示：2.1 第2日欢迎进入串接样式表第2天的课程，昨天我们已经学习了如何使用及在网页中加入串接样式表，五日精通CSS层叠样式表(2)，今天我们将深入学习串接样式表每一项精彩绝伦的特点，今天我们主要学习字体，设定的顺序必须严格按照例子中的顺序，这只是我们探索CSS众多属性的开始，即如何控制字号，字模及加入特殊效果

2.1 第2日
欢迎进入串接样式表第2天的课程，昨天我们已经学习了如何使用及在网页中加入串接样式表，今天我们将深入学习串接样式表每一项精彩绝伦的特点。
今天我们主要学习字体，即如何控制字号，字模及加入特殊效果。想想如果只用HTML标签你能做到这些吗？接着往下读。
今天要学习的CSS特点包括：
字模系列
字号
字重
字体风格
字体参数
文字变形
文字修饰
字体
现在开始！

2.2 按照字体名称调用字体
第1个问题：你如何指示浏览器显示你希望的字体?仅仅在字模后面键入字体的名称就行了吗？
很可惜，事情还不是这么简单，字体在各个操作平台之上叫的名称可能会有变化。
比如，Courier在MAC机上叫做COurier New。在一台机器上可能叫Italic的字体在另一台机器上可能就叫做Oblique。你仔细研究
之后会发现更多的这样的例子。
所以，我们称呼一种字体的名称并不一定就是计算机对这种字体的名称。而你必须确定使你所用的字体名称就是计算机所以的字体名称。
那么你怎么确定计算机对一种字体的确切名称是什么呢？这取决于于计算机所用的操作平台。
Windows的用户：使用应用软件比如word中的字体菜单中所列出的确切的字体名称。
Mac机用户：不要相信应用软件给你列出的字体名称。而应该打开你的system
folder，按照其中对字体的拼写在你的样式表中使用字体名称。
字模系列
字模系列就是CSS中称呼一种字体的名称属
性。其基本语法如下：
H2 { font-family: helvetica,
impact, sans-serif }
这里是Web浏览器阐释样式表的规则：首先在列表中寻找字体的名称（helvetica），如果在该计算机中安装了这种字体，就使用它。如果没有安装，则移向下一种字体（impact），如果这种字体也没有安装，则移向第3种字体（sans-serif）。sans-serif字体参数是浏览器可以依据的最后一种参数，它告诉浏览器使用任何一种缺省sans-serif字体（或许就是Arial）。
以下为你所用浏览器的实际显示结果：
CSS
font control is peachy.
如果你的浏览器不支持CSS属性，请点击这里查看其显示效果。
你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称没有把握时，这样做无疑是一种好办法。注意：浏览器更倾向于认可小写的名称。当然，只用你对所有项目都进行了测试，就不会有问题。
每次将一种generic字体作为最后的选项列在字体列表中是一种很好的做法。你可以选择以下几种：
serif (也可能是 Times)
sans-serif (也可能是 Arial或者 Helvetica)
cursive (也可能是 Comic Sans)
fantasy (也可能是 Ransom)
monospace (也可能是 Courier)
（注意：Netsacpe Communicator不支持Cursive或者fantasy）
其它字体名称诀窍：
如果一种字体的名称不只一个单词，如Gill Sans，在你的CSS代码中用引号包含该字体的名称。
BODY { font-family: "gill sans", "new
baskerville", serif }
行内加入的CSS规则，使用单引号：
<P STYLE="font-family:
'gill sans', 'new
baskerville', serif">Text
goes here.</P>
如果你将CSS规则的说明组合在一起，而其中又包含字模系列，将字模系列列在最后，例：
H2 { color: red; margin:
10px; font-family: times,
serif }
有时候，如果字模系列没有列在最后一条，IE
3 会忽略整个一条CSS规则，很莫名其妙，但却是真的。
利用字模系列属性，你可以按照字体名称调用字体，而且在使用<FONT
FACE>标签时将拥有更大的灵活性。

2.3 对字号的控制
利用HTML你只能<FONT SIZE=X?>设定7种字号，很令人沮丧，是吧？但等你看完本页之后，你将会发出一声长长的WOOOOOOOOOOOW！
字号
使用font-size 属性，你可以对文字的尺寸进行无限的控制。
确定这的3种基本方法：
Points, ems, pixels, 及其它单位
关键字
比例参数
Points, Ems, Pixels, 及其它单位
样式表可以识别许多种确定一种要素尺寸的不同单位：
第1种， points:
P { font-size: 16pt }
这条代码告诉浏览器以16 points（点）的尺寸显示<P>。
Points是确定文字尺寸非常好的单位，因为它在所有的浏览器和操作平台上都适用。你唯一需要留意的就是在缺省设置下，PC机中显示的字要比MAC机中显示的大一些。
如果这一点对你来说很重要的话，你可以利用javascript识别不同人所使用的操作平台，然后根据不同的平台链接相应的CSS文件。若想学习制作方法，请点击learnhow。
Points, like all other units, work as small or as
big as you want (that was 8
points and 80 points, respectively).
以上语句采用CSS font-size属性制作。如果你的浏览器不支持这种属性，请点击这里查看显示效果。
下一个单位，EM:
P { font-size: 20pt }
B { font-size: 1.5em }
em 是和point相同的距离单位。在样式表中，em指母体要素的尺寸。所以，在上例中，所有包含在<P>中的<B>的文字的尺寸将是30points（因为<B>中的找是母体字号（20pt）的1.5倍。
但是，浏览器对em不是很支持，所以你还是最好用point单位。
下一个单位，pixels:
P { font-size: 20px }
从网页设计的角度来说，pixel（象素）是一个非常熟悉的单位，它最大的优点就在于所有的操作平台都支持pixel单位（而对于其它的单位来说，PC机的文字总是显得比MAC机中大一些。
而其不利之处在于，当你使用pixels单位时，网页的屏幕显示不稳定，字体时大时小，甚至有时根本不显示，而points
单位则没有这种问题。
其它单位：如果上述单位仍然不符合你的要求，请试试这些单位：
in （英寸）
cm （厘米）
mm （毫米）
pc （打字机字型尺寸单位）
ex （x-height）
关键字
如果你不喜欢使用这些单位，你还可以选择以关键字说明文字尺寸，例：
P { font-size: large }
有7种关键字，相对应于<FONTSIZE>中所用的数字参数：
xx-small
x-small
small
medium
large
x-large
xx-large
利用这些参数，Web浏览器可以自由决定每一种关键字所适合的尺寸。例如：在Netscape
Communicator中x-large的尺寸为28points，而在IE 4（windows及MAC）中为24points，而在Win
95下的IE 3中为18points。
还要两种相对尺寸关键字：
smaller
larger
smaller参数告诉浏览器将当前文字在关键字规格基础上“缩小一级”，例如，如果large字号的文字应用smaller参数，则其字号变成了midium尺寸。larger参数的作用类似。
（注意：IE 3不支持smaller或larger参数。）
比例参数
设定文字尺寸的第3种办法就是使用比例参数，例：
P { font-size: 15pt }
B { font-size: 300% }
这些规则的含义为：使所有包含在<P>中的的<B>文字的尺寸为<P>尺寸设定值的3倍，即45
points。比例参数常用于从母体要素继承的参数值。
浏览器对比例参数比较挑剔，所以你必须经常测试。
有了这么多的选择是不是很让人高兴呢？由于有了font-size属性，我们能够随意调整文字的尺寸，如同以下的例子所示：（每一个字母i都比前一个大5pt）
i i i i i i i i i i i i i i
试着用HTML制作这种效果！
如果你的浏览器不支持CSS属性，请点击这里查看显示效果。

2.4 加重显示和斜体字的所有方式
利用CSS加入斜体字非常简单，而且我们对于加重字体还有很多选择。
字体风格
字体风格用来控制斜体字的属性，非常漂亮又非常简单：
H3 { font-style: italic }
当浏览器接到应用斜体字的指令后，它将用户的机器中寻找安装的斜体字版本，果不存在斜体字，浏览器将生成一种。常，就是指将正常的字体倾斜显示。
如果一种字体的名称为Oblique，而不是Italic，浏览器就会使用oblique作为字体风格的参数。
字体风格的第3种参数是normal，它将取消斜体字风格，将字体以正常形式显示。
字重
加重风格可以关闭或打开，利用字重属性，可以创造出一系列新的加重字体。
P { font-weight: bold }
这是字重最常见的应用方式，而normal属性也可以取消加重字体，将字体以正常形式显示。
你还可以用数值100，200，...900。正常的非加重体的字体值为400，900是最加重的字体参数值。
Web浏览器将决定每一参数值的实际显示。
要显示这些例子的效果，你必须安装相应的字库，并且你的系统还得支持CSS：
Arial
Verdana
Eras
而且你的用户的机器也必须安装相同的字而且其系统支持CSS的这些参数值。（IE
3对此均不支持）。
最后，你还可以给字重加上lighter和bolder参数，当然前提是所使用的字体已经赋予了某种级别的加重字体属性。在已有属性级别上，浏览器将使字体的显示相应地更加重一些（bolder）或更轻一些（lighter）。
（注意：IE 3或Netscape Communicator都不支持lighter或bolder参数。）

2.5 文字的特殊效果
下面你将发现其它一些有关字体的样式表属性，你可以将其加入到你的工具箱中。
字体参数（font-variant)
这时一种挺简单的属性，你可以将正常文字缩小一半尺寸后大写显示。
H2 { font-variant: small-caps }
很不幸，Communicator或者Internet Explorer目前都不支持这项属性。IE
4有些靠近这种标准，但它只是将字体以正常的大写形式显示。
希望IE5.0能支持这项属性。
文字变形（text-transform）
这项属性可以使你轻而易举地控制字母写。基本代码：
B { text-transform: uppercase }
以下为所有可用的参数：
uppercase 使所有字母大写显示，
例：
This sentence serves as an example.
lowercase使所有字母小写显示，
例：
This sentence serves as an example.
capitalize 使每个单词的第1个字母大写显示，例：
This sentence serves as an example.
none
使所有继承的文字变形参数被忽略，文字将以正常形式显示。
例：
This sentence serves as an example.
（注意：IE 3不支持文字变形）
如果你的浏览器不支持上述显示效果，请点击这里查看显示效果。
文字修饰（text-decoration）
几十年以来（不管怎么说，反正很长的一段时间以来），所有链接了的文字在浏览器中都以下划线的形式显示，对这种事实我们都无计可施。我认为这种形式效果很难看，女士们先生们，现在我们有解决办法了：文字修饰（text-decoration)。
其基本语法如下：
B { text-decoration: underline }
大部分的选项使得文字变得难以阅读：
underline 给文字下划线，例：
these words.
overline给文字上划线，例：
these words.
line-through给文字划出删除线，
例：these words.
blink是你在恶梦中常常看到的－－
文字在闪烁，例：
these words.
none使得上述效果都不会发生。
（注意：Communicator不支持上划线，IE 4不支持文字闪烁，IE
3对这些都不支持。）
如果你的浏览器不支持这些CSS属性，请点击这里查看显示效果。
none参数非常有用，你可以使链接的文字不以下划线的形式显示。具体做法：
A:link { text-decoration: none }
A:active { text-decoration: none }
A:visited { text-decoration: none }
思考以下这些为<A>标签预定义的分类A:link用于正常的未被访问过的链接，A:active用于你正在点击的链接
A:visited 用于已经访问过的链接。
这些指令进入你的植入、链接、输入的样式表，但不会改变你的HTML链接代码:
<A HREF="http://www.webmonkey.com/">
Link</A>
以下是显示结果：
This text is a link, but not
underlined!
如果你的浏览器不支持这种CSS属性，请点击这里查看显示效果。
你不仅可以消除链接的下划线，而且你还可以利用这3条属性使用CSS的其它属性，比如，你可以使得为被访问过的链接以12points的Arial加重字体显示，而访问过的链接以10points尺寸的Times斜体字显示。这个世界可以由你自由塑造，
可惜呀，可惜！并不是所有的浏览器都支持这项属性。Communicator支持带文字修饰（text-decoration）的预定义分类，但对其它属性非常挑剔。IE
3不支持A:active(而MAC不支持A：visited)，IE 4支持全部这些属性。
尽管有这些局限，但至少你比以前有了更多的可能性！这都要感谢CSS的创作者...
下面是一个小练习。

2.6 第2日的练习
以下的练习将帮助你尝试练习串接样式表的一些属性。你的任务：只使用HTML和样式表复制这张样式表实例，记住，你必须有4.0版的浏览器，以便使实例显示效果正常。
完成之后，想想有没有其它方法作出同样的效果。

2.7 复习
今天我们探索了字体的奇妙世界：字型、字号、加重显示、斜体字、大写、下划线等等。利用传统的HTML你的确也可以作很多事情，但不是所有事，而且也达不到样式表对字体的控制程度。
串接样式表的字体属性总结：
字模系列定义字体以何种字体显示字号使你可以利用points,pixels，
关键字及其它尺寸单位控制文字的尺寸。
字体风格用于斜体字显示。
字重对字体加重显示的程度作全面的控制。
字体参数（font-variant）将文字以小一半的尺寸大写显示。
文字变形（text-transform）控制大写。
文字修饰（text-decoration）可以控制文字的多种细节的变化，如下划线、闪烁等等。
还需提到另外一项重要的属性，字体。字是一种将字号、行高度及字母系列一次义的快捷方式。例：
LI { font: 12pt/16pt courier }
这条规则将<LI>文字设置为：尺寸12points，行高度
16points，（我们将在明天谈到该属性），字型采用Courier。
使用字体属性时，必须设定字号和字型，但可以选择是否设定行高度。设定的顺序必须严格按照例子中的顺序。
这只是我们探索CSS众多属性的开始。明天我们将更深入研究字体属性及图文和布局。