您好,登录后才能下订单哦!
这篇文章将为大家详细讲解有关css中text-decoration属性设置删除线的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
首先我们了解css text-decoration属性,下面就简单介绍一下:
text-decoration 属性规定添加到文本的修饰。
说明:
这个属性允许对文本设置某种效果,如加删除线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。
那么如何使用css text-decoration属性添加文本文字的删除线效果,下面我们通过简单的代码示例,为大家详细解说关于css删除线的实现方法!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css添加文本文字的删除线</title> <style> p{ text-decoration:line-through; } </style> </head> <body> <p>这里有一条删除线</p> </body> </html>
效果图:
说明:
line-through属性值:定义穿过文本下的一条线。
通过例子可以看出,通过设置text-decoration:line-through;为<p>标签里的文本文字添加了删除线,方法简单、方便。且可以通过css设置简单修饰删除线样式,比如:颜色,例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css添加文本文字的删除线</title> <style> p{ text-decoration:line-through; color: red; } span{ color: black; } </style> </head> <body> <p><span>这里有一条删除线</span></p> </body> </html>
效果图:
这样我们结合text-decoration:line-through;和<span></span>样式定义文本字体颜色的样式,就可以实现css中删除线与文字颜色不一的样式效果,是不是很简单!
关于css中text-decoration属性设置删除线的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。