html文本修饰下划线,html添加线条
text-decoration属性介绍
text-decoration属性是否用于设置文本装饰线？text-decoration属性有四个值。
text-decoration属性值说明表
值为“无”将删除文本修饰下划线设置下划线设置下划线设置下划线删除线设置删除线。
HTML标签自带修饰线
在开始练习text-decoration属性之前，笔者先普及一下HTML中带有自己修饰行的标签，比如：U标签和S标签。如果有不完善的地方，可以在下面的评论里告诉作者。毕竟作者也是前端小白。希望和大家交流，互相帮助，共同进步。
u标签
下面进入U tag的做法，自带文字下划线。
码组
！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title设置文本修饰线/title /headbody u成功不是打败别人，而是改变自己/u/body/html结果图
注意：U标签也可以与HTML中的其他标签一起使用，例如：将U标签嵌套到h1标签中。
码组
H1u成功不是打败别人，而是改变自己的/u/h1s标签。
让我们来看看S标签的做法，它带有文本删除线。
码组
！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title Set text修饰line/title/headbodies成功不是打败别人，而是改变自己/s/body/html结果图
注意：S标签也可以嵌套，这和U标签是一致的，我就不多介绍了。
none去除修饰线
让我们来实践一下文本装饰属性的none值。练习内容如下：我去掉HTML页面中S标签的删除线。
码组
！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title Set text decoration line/title styles { text-decoration:none；}/style/headbodies成功不是打败别人，而是改变自己。/s/body/html结果图表
注意：可以删除U标签、S标签和所有修饰行，包括text-decoration属性的值。
underline设置下划线
让我们来练习一下文本装饰属性的下划线值。练习内容如下：我在HTML页面中为h2标签中的文本设置了下划线。
码组
！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title Set text decoration line/title style H2 { text-decoration:underline；} /style/headbody h2成功不是打败别人，而是改变自己/H2/body/html结果图
overline设置上划线
让我们来练习一下text-decoration属性的overline值。练习内容如下：我将HTML页面中h2标签中的文本设置为下划线。
码组
！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title Set text decoration line/title style H2 { text-decoration:outline；} /style/headbody h2成功不是打败别人，而是改变自己/H2/body/html结果图
line-through设置删除线
让我们来实践一下text-decoration属性的换行值。练习内容如下：我在HTML页面中为h2标签中的文本设置了删除线。
码组
！DOCTYPE html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，Initial-scale=1.0 meta http-equiv= x-ua-compatible content= ie=edge title设置文本装饰行/标题样式H2 { text-decoration:line-through；} /style/headbody h2成功不是打败别人，而是改变自己/H2/body/html结果图
这就是本文的全部内容。希望对大家的学习和支持有帮助。
作者：微笑是最初的信仰
资料来源：https://www.cnblogs.com/lq0001/p/11878033.html
版权：本站使用“CC BY 4.0”创意分享协议。请在文章明显位置注明作者和出处。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。