css如何添加文字下划线样式?(代码详解)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

css如何添加文字下划线样式?本篇文章就给大家介绍css添加文字下划线样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们来了解一下css添加文字下划线样式的方法有哪些。

1、css text-decoration属性添加文字下划线样式

2、css border-bottom属性添加文字下划线样式

下面我们通过简单的代码示例,为大家详细介绍一下这两种css添加文字下划线样式的实现方法!

css text-decoration属性添加简单文字下划线样式

代码示例:

<!DOCTYPE html> <html>  <head>   <meta charset="UTF-8">   <title>css 文字下划线样式</title>   <style>    .demo span{     text-decoration:underline;    }   </style>  </head>  <body>   <p class="demo">这是一段测试文字,<span>5G云资源分享网</span>!</p>  </body> </html>

效果图:

css如何添加文字下划线样式?(代码详解)

css text-decoration属性添加的下划线是最简单样式,而且没有办法设置什么比较特别的样式,比如把下划线设置成虚点状的。下面我们看看另一种添加下划线的方法,可以设置不同的下划线样式。

css border-bottom属性添加文字下划线样式

代码示例:

<!DOCTYPE html> <html>  <head>   <meta charset="UTF-8">   <title>css 文字下划线样式</title>   <style>    .demo{     width: 400px;     height: 400px;     margin:100px auto;    }    .demo1 span{     border-bottom: 1px solid #000000;    }    .demo2 span{     border-bottom: 5px solid #0081EF;    }    .demo3 span{     border-bottom: 2px dashed #000000;    }    .demo4 span{     border-bottom: 2px dotted #000000;    }    .demo5 span{     border-bottom: 5px double #000000;    }   </style>  </head>  <body>   <div class="demo">    <p class="demo1">这是第1段测试文字,<span>5G云资源分享网</span>!</p>    <p class="demo2">这是第2段测试文字,<span>5G云资源分享网</span>!</p>    <p class="demo3">这是第3段测试文字,<span>5G云资源分享网</span>!</p>    <p class="demo4">这是第4段测试文字,<span>5G云资源分享网</span>!</p>    <p class="demo5">这是第5段测试文字,<span>5G云资源分享网</span>!</p>   </div>  </body> </html>

效果图:

css如何添加文字下划线样式?(代码详解)

border-bottom属性可以通过控制线的粗细、颜色、样式来实现不同的文字下划线样式。

总结:以上就是text-decoration属性和border-bottom属性添加文字下划线样式的全部内容,大家可以自己动手尝试,加深理解,根据需要在不同的情况下使用不同的方法。希望能对大家的学习有所帮助,更多相关教程请访问: CSS基础视频教程, HTML视频教程,bootstrap视频教程!

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » css如何添加文字下划线样式?(代码详解)

发表评论

提供最优质的资源集合

立即查看 了解详情