您的位置：首页 > Web前端 > CSS

CSS设置文字的划线

2016-07-25 21:39 351 查看
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>


          可以发现各种效果可以同时运用在同一行文字上，为页面添加趣味性。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航