1、首先我们来看看默认的文字显示的样式，这里使用text-decoration：none；来实现。具体代码如下，具体代码如下：
<html>
<head>
<title>text-decoration属性</title>
</head>
<body>
<p style="text-decoration:none;">文字字体测试下划线
</body>
</html>
如下图可以看到初始的效果图。
2、在很多时候可能看到带有下划线的文字？在HTML中也可以实现，这里用CSS的属性text-decoration:underline;来实现，具体代码如下：
<html>
<head>
<title>text-decoration属性</title>
</head>
<body>
<p style="text-decoration:none;">默认格式文字
<p style="text-decoration:underline;">文字字体测试下划线
</body>
</html>
可以看到第二行文字有下划线显示。
3、上面我们实现了下划线，我们能不能实现删除线操作呢？答案肯定是可以的，这里我就来演示删除线实现的过程，具体代码如下：
<html>
<head>
<title>text-decoration属性</title>
</head>
<body>
<p style="text-decoration:none;">默认格式文字
<p style="text-decoration:underline;">文字字体测试下划线
<p style="text-decoration:line-through;">文字字体测试删除线
</body>
</html>
第三行的删除线是不是在很多网站中遇到，我们自己网站需要这个功能就用删除线来完成。
4、有了删除线和下划线，CSS还给我们提供了一个叫上划线的功能。这里我就废话不多说，看代码就能理解。
<html>
<head>
<title>text-decoration属性</title>
</head>
<body>
<p style="text-decoration:none;">默认格式文字
<p style="text-decoration:underline;">文字字体测试下划线
<p style="text-decoration:line-through;">文字字体测试删除线
<p style="text-decoration:overline;">文字字体测试上除线
</body>
</html>
开最下面显示的文本是不是将文字有上划线这个功能了。
5、text-decoration这个属性还给我提供了一个值叫blink，可以定义闪烁的文本。我们来看看具体的效果吧，代码如下：
<html>
<head>
<title>text-decoration属性</title>
</head>
<body>
<p style="text-decoration:none;">默认格式文字
<p style="text-decoration:underline;">文字字体测试下划线
<p style="text-decoration:line-through;">文字字体测试删除线
<p style="text-decoration:overline;">文字字体测试上除线
<p style="text-decoration:blink;">文字字体测试闪烁文本
</body>
</html>
注意后面这个闪烁文本有的浏览器不支持，使用的比较少。
