5.文字的CSS特殊效果

网络整理 - 07-27

下面你将发现其它一些有关字体的CSS样式表属性，你可以将其加入到你的工具箱中。字体参数（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.

文字修饰（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对这些都不支持。）。 none参数非常有用，你可以使链接的文字不以下划线的形式显示。具体做法：

A:link { text-decoration: none } A:active { text-decoration: none } A:visited { text-decoration: none }

思考以下这些为<A>标签预定义的分类 A:link用于正常的未被访问过的链接， A:active用于你正在点击的链接 A:visited 用于已经访问过的链接。这些指令进入你的植入、链接、输入的样式表，但不会改变你的HTML链接代码:

以下是显示结果：

This text is a link, but not underlined!

你不仅可以消除链接的下划线，而且你还可以利用这3条属性使用CSS的其它属性，比如，你可以使得为被访问过的链接以12points的Arial加重字体显示，而访问过的链接以10points尺寸的Times斜体字显示。这个世界可以由你自由塑造，可惜呀，可惜！并不是所有的浏览器都支持这项属性。Communicator支持带文字修饰（text-decoration）的预定义分类，但对其它属性非常挑剔。IE 3不支持 A:active(而MAC不支持A：visited)， IE 4支持全部这些属性。尽管有这些局限，但至少你比以前有了更多的可能性！这都要感谢CSS的创作者... 下面是一个小练习。

返回本专题:《CSS层叠样式表教程》的目录