text-decoration这是CSS中对文字修饰的一个属性，我们可以通过这个属性来设置文字的下划线，上划线，删除线和控制闪烁文字。希望我今天的分享能够帮助在CSS学习中的各位同胞。
工具/原料
CSS基础知识
HTML基础知识
方法/步骤
1、首先我们来看看默认的文字显示的样式，这里使用text-decoration：none；来实现。具体代码如下，具体代码如下：<html> <head> <title>text-decoration属性</title> </head> <body> <pstyle="text-decoration:none;">文字字体测试下划线</p> </body></html>如下图可以看到初始的效果图。
2、在很多时候可能看到带有下划线的文字？在HTML中也可以实现，这里用CSS的属性text-decoration:underline;来实现，具体代码如下：<html> <head> <title>text-decoration属性</title> </head> <body> <pstyle="text-decoration:none;">默认格式文字</p> <pstyle="text-decoration:underline;">文字字体测试下划线</p> </body></html>可以看到第二行文字有下划线显示。
3、上面我们实现了下划线，我们能不能实现删除线操作呢？答案肯定是可以的，这里我就来演示删除线实现的过程，具体代码如下：<html> <head> <title>text-decoration属性</title> </head> <body> <pstyle="text-decoration:none;">默认格式文字</p> <pstyle="text-decoration:underline;">文字字体测试下划线</p> <pstyle="text-decoration:line-through;">文字字体测试删除线</p> </body></html>第三行的删除线是不是在很多网站中遇到，我们自己网站需要这个功能就用删除线来完成。
4、有了删除线和下划线，CSS还给我们提供了一个叫上划线擢爻充种的功能。这里我就废话不多说，看代码就能理解。<h墉掠载牿tml> <head> <title>text-decoration属性</title> </head> <body> <pstyle="text-decoration:none;">默认格式文字</p> <pstyle="text-decoration:underline;">文字字体测试下划线</p> <pstyle="text-decoration:line-through;">文字字体测试删除线</p> <pstyle="text-decoration:overline;">文字字体测试上除线</p> </body></html>开最下面显示的文本是不是将文字有上划线这个功能了。
5、text-decoration这个属性还给瘫蝠熨夯我提供了一个值叫blink，可以定义闪烁的文本。我们来看看琼藻樘哒具体的效果吧，代码如下：<html> <head> <title>text-decoration属性</title> </head> <body> <pstyle="text-decoration:none;">默认格式文字</p> <pstyle="text-decoration:underline;">文字字体测试下划线</p> <pstyle="text-decoration:line-through;">文字字体测试删除线</p> <pstyle="text-decoration:overline;">文字字体测试上除线</p> <pstyle="text-decoration:blink;">文字字体测试闪烁文本</p> </body></html>注意后面这个闪烁文本有的浏览器不支持，使用的比较少。
