多语言展示
当前在线:1090今日阅读:167今日分享:16

CSS中的属性text-decoration详细分析介绍教程

text-decoration这是CSS中对文字修饰的一个属性,我们可以通过这个属性来设置文字的下划线,上划线,删除线和控制闪烁文字。希望我今天的分享能够帮助在CSS学习中的各位同胞。
工具/原料
1

CSS基础知识

2

HTML基础知识

方法/步骤
1

首先我们来看看默认的文字显示的样式,这里使用text-decoration:none;来实现。具体代码如下,具体代码如下: text-decoration属性

文字字体测试下划线

如下图可以看到初始的效果图。

2

在很多时候可能看到带有下划线的文字?在HTML中也可以实现,这里用CSS的属性text-decoration:underline;来实现,具体代码如下: text-decoration属性

默认格式文字

文字字体测试下划线

可以看到第二行文字有下划线显示。

3

上面我们实现了下划线,我们能不能实现删除线操作呢?答案肯定是可以的,这里我就来演示删除线实现的过程,具体代码如下: text-decoration属性

默认格式文字

文字字体测试下划线

文字字体测试删除线

第三行的删除线是不是在很多网站中遇到,我们自己网站需要这个功能就用删除线来完成。

4

有了删除线和下划线,CSS还给我们提供了一个叫上划线的功能。这里我就废话不多说,看代码就能理解。 text-decoration属性

默认格式文字

文字字体测试下划线

文字字体测试删除线

文字字体测试上除线

开最下面显示的文本是不是将文字有上划线这个功能了。

5

text-decoration这个属性还给我提供了一个值叫blink,可以定义闪烁的文本。我们来看看具体的效果吧,代码如下: text-decoration属性

默认格式文字

文字字体测试下划线

文字字体测试删除线

文字字体测试上除线

文字字体测试闪烁文本

注意后面这个闪烁文本有的浏览器不支持,使用的比较少。

注意事项
1

CSS具有很多属性我们在学习中要总结

2

多学习练习才能在程序设计中做的更好。

推荐信息