CSS设置文字的划线
文字加上下划线、顶划线和删除线,在文档中是经常使用的。
CSS中通过设置文字的text-decoration属性,来实现这些特殊的效果。
<span style="font-size:24px;"><html>
<head>
<title>
文字下划线、顶划线,删除线
</title>
<style>
<!--
p.one{text-decoration:underline;}
p.two{text-decoration:overline;}
p.three{text-decoration:line-through;}
p.four{text-decoration:blink;}
-->
</style>
</head>
<body>
<p class="one">下划线文字,下划线文字</p>
<p class="two">顶划线文字,顶划线文字</p>
<p class="three">删除线文字,删除线文字</p>
<p class="four">文字闪烁</p>
<p>正常文字对比</p>
</body>
</html>
</span>
如上代码,分别设置了文字的下划线、顶划线和删除线的效果,此外,这里特殊的blink值,使得文字不断的闪烁,但是,IE中不支持这个效果,Firefox却支持的很好。
有时候文字不仅仅有一种效果,同时又下划线或者删除线,此时,可以同时将两个属性值,同时赋值给text-decoration,并用空格分开。
<span style="font-size:24px;"><html>
<head>
<title>
文字下划线、顶划线,删除线
</title>
<style>
<!--
p.one{text-decoration:underline overline;}
p.two{text-decoration:underline line-through;}
p.three{text-decoration:overline line-through;}
p.four{text-decoration:underline overline line-through;}
-->
</style>
</head>
<body>
<p class="one">下划线文字,顶划线文字</p>
<p class="two">下划线文字,删除线文字</p>
<p class="three">顶划线文字,删除线文字</p>
<p class="four">三种效果同时</p>
</body>
</html>
</span>
可以发现各种效果可以同时运用在同一行文字上,为页面添加趣味性。