CSS教程_CSS免费实例教程_全面精通Css样式（11）

CCS教程第十一节：文字的特殊效果

下面你将发现其它一些有关字体的样式表属性，你可以将其加入到你的工具箱中。

这时一种挺简单的属性，你可以将正常文字缩小一半尺寸后大写显示。

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对这些都不支持。）

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!

你不仅可以消除链接的下划线，而且你还可以利用这3条属性使用CSS的其它属性，比如，你可以使得为被访问过的链接以12points的Arial加重字体显示，而访问过的链接以10points尺寸的Times斜体字显示。这个世界可以由你自由塑造，

下面是一个小练习。 

教程共享： 尽享网   jinshare.com