本文小编为大家详细介绍“html下划线颜色怎么修改”，内容详细，步骤清晰，细节处理妥当，希望这篇“html下划线颜色怎么修改”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
方法：1、给元素设置“text-decoration:underline;color:颜色值”样式即可；2、使用border-bottom属性，只需要给元素设置“border-bottom:大小 样式 颜色”样式即可。
本教程操作环境：windows7系统、html&&HTML5版、Dell G3电脑。
有两个方法
● 第一个就是给标签加上一个text-decoration:underline，属性，设置下划线的颜色需要设置元素的color属性，缺点是文字颜色和下划线颜色是一致的，不能单独控制。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.css-00F {
text-decoration:underline;
color: #090;
}
</style>
</head>
<body>
<p>
css实践之文字下划线颜色-<span class="css-00F">我的下划线与文字为绿色</span>
</p>
</body>
</html>效果：
● 第二个就是给标签加一个底部边框：border-bottom:1px solid red，要想与文字有间距使用padding-bottom属性就可以了！第二种可以单独控制下划线的样式！
在需要改变的文字下划线样式地方，使用css border-bottom下边框样式来变通地实现替代text-decoration下划线样式的效果；通过对文字设置下边框颜色、下边框宽度、下边框虚线或实线等CSS样式控制实现需要各式各样下划线效果。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.css-F00 {
border-bottom: 1px solid #f00;
}
.css-00F {
border-bottom: 1px solid #00f;
color: #090;
}
.css-333 {
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<p>css实践之文字下划线颜色-<span class="css-F00">我的下划线实现为红色</span></p>
<p>css实践之文字下划线颜色-<span class="css-00F">我的下划线实现为蓝色，文字为绿色</span></p>
<p>css实践之文字下划线颜色-<span class="css-333">我的下划线实现为黑色</span></p>
</body>
</html>效果：
读到这里，这篇“html下划线颜色怎么修改”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
