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;} /*倾斜*/
不同样式的效果如下所示。
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本,通常情况下,两种效果在浏览器中看上去完全一样。
在a链接标签上,经常把text-decoration的属性值取为none,来取消链接的下画线。
注意: 在W3C标准中,text-decoration的值可以取blink得到文字闪烁的效果,不过IE浏览器、Chrome浏览器和Safari浏览器目前不支持。