CSS可以实现在字体上添加一条线的文本装饰效果,下面的CSS代码分别在文本的上方、文本的中央和文本的下方添加直线,设计粗体和斜体则更加基础。

HTML如下:

  <p class="overline">文本装饰</p>
  <p class="through">文本装饰</p>
  <p class="underline">文本装饰</p>
  <p class="blink">文本装饰blink浏览器不支持</p>

CSS如下:

01 .overline{text-decoration:overline;}     /*上画线*/
02 .through{text-decoration:line-through;}  /*穿过线*/
03 .underline{text-decoration:underline;}   /*下画线*/
04 .blink{text-decoration:blink;}           /*文本闪烁,暂不支持*/
05 .bold{font-weight:bold;}                 /*粗体*/
06 .italic{font-style:italic;}              /*斜体*/
07 .oblique{font-style:oblique;}            /*倾斜*/

不同样式的效果如下所示。

Image00007

斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本,通常情况下,两种效果在浏览器中看上去完全一样。

在a链接标签上,经常把text-decoration的属性值取为none,来取消链接的下画线。

注意: 在W3C标准中,text-decoration的值可以取blink得到文字闪烁的效果,不过IE浏览器、Chrome浏览器和Safari浏览器目前不支持。