DIV CSS下划线颜色-CSS文字颜色不变下划线变颜色的实现

DIV CSS下划线颜色-文字颜色不变下划线变颜色如何实现?下划线颜色与文字颜色不同，可改变文字字体下划线颜色而不改变文字本身颜色样式如何使用 CSS实现？

如果想改变文字下划线颜色，不能使用text-decoration下划线样式单词来实现，也不能使用 html下划线 u标签实现，而是使用 border边框样式实现。

在需要改变的文字下划线样式地方，使用 css border-bottom下边框样式来变通地实现替代 text-decoration下划线样式的效果；通过对文字设置下边框颜色、下边框宽度、下边框虚线或实线等 CSS样式控制实现需要各式各样下划线效果。

一、使用css border-bottom实现改变文字字体下划线颜色 - TOP

这里我们对3组文字设置三种不同颜色下划线，分别 css命名为“.divcss5-F00”、“.divcss5-00F”、“.divcss5-333”

1、字体下划线颜色不同实现完整 HTML源代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style> 
.divcss5-F00{ border-bottom:1px solid #F00} 
/*  CSS注释说明：.divcss5-F00 设置对象下边框为红色 */ 
.divcss5-00F{ border-bottom:1px solid #00F;  color:#090} 
/* CSS注释说明：.divcss5-00F 设置对象下边框为蓝色 文字为绿色 */ 
.divcss5-333{ border-bottom:1px solid #333} 
/* CSS注释说明：.divcss5-333 设置对象下边框为黑色 */ 
</style> 
</head> 
<body> 
<p> 
DIVCSS5实践之文字下划线颜色-<span class="divcss5-F00">我的下划线实现为红色</span> 
</p> 
<p> 
DIVCSS5实践之文字下划线颜色-<span class="divcss5-00F">我的下划线实现为蓝色，文字为绿色</span> 
</p> 
<p> 
DIVCSS5实践之文字下划线颜色-<span class="divcss5-333">我的下划线实现为黑色</span> 
</p> 
</body> 
</html>

2、不同颜色下划线实例效果截图

使用css border下边框样式实现不同颜色下划线效果截图

通过以上 DIV+CSS实例，我们可以学会使用border-bottom样式对文字字体设置下边框颜色实现对下边框颜色样式改变，从而达到下划线颜色控制效果。我们要认识到text-decoration下划线颜色是随文字颜色改变而改变，换句话说，使用text-decoration属性实现下划线的颜色与文字颜色是同步的，文字什么颜色，文字下划线就是什么颜色，要改变其文字与下划线文字颜色不同，我们可以使用border-bottom边框样式。

在线演示：查看案例

二、使用css border实现字体下划线为实线还是虚线 - TOP

除了使用border-bottom下边框样式改变对象下边框颜色到达下划线千变万化的颜色效果，还可以通过对css下边框样式设置实线（solid）或虚线（dashed），达成下划线实线或虚线效果。

接下来我们 CSS+DIV实例实践使用border-bottom实现文字下划线颜色和虚线实线改变。

1、CSS div实例完整 html源代码如下

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>下划线各样式 在线演示 www.divcss5.com</title> 
<style> 
.divcss-aa{ border-bottom:1px dashed #F00; color:#0FF} 
/* 设置对象.divcss-aa下边框为虚线红色，css字体颜色为天蓝色 */ 
.divcss-bb{ border-bottom:1px solid #00F; color:#090} 
/* 设置对象.divcss-bb下边框为实线蓝色，对象DIV字体颜色为绿色 */ 
</style> 
</head> 
<body> 
<p> 
使用下边框实现字体下划线各种样式效果，<span class="divcss-aa">我下划线为虚线红色，字体为天蓝色</span> 
<!--  html注释说明：实现文字字体下划线为红色虚线，字体为天蓝色 --> 
</p> 
<p> 
使用下边框实现字体下划线各种样式效果，<span class="divcss-bb">我下划线为实线蓝色，字体为绿色</span> 
<!-- 实现文字字体下划线为蓝色实线，字体为绿色 --> 
</p> 
</body> 
</html>

为什么使用 span标签而不用 div标签设置文字对象CSS样式，可以进入 div与span区别去了解。

2、下划线各样式效果截图

CSS边框样式实现不同样式下划线效果截图

小结：通过使用边框样式达到下划线多样化。

在线演示：查看案例

本教程全部案例打包下载：

立即下载（2.051KB）

相关CSS知识教程文章推荐：
1、 div颜色
2、 css下划线虚线

如需转载，请注明文章出处和来源网址： http://www.divcss5.com/jiqiao/j589.shtml

必备CSS教程Essential CSS Tutorials

css height
css line-height
css width
css min-width
css max-width
css min-height
css max-height
css border
css background
css float
css clear
css display
css font
css text-transform
css英文首字母大写
css font-variant
css font-weight
css font-style
css text-decoration
css 删除线
div css 虚线
css 注释
html 注释
css padding
css margin
css 文本
css font-size
css font-family
css color
css text-align
css text-indent
css 超链接( css a)
css 优化压缩
css id( css #)
css class( css .)
css ul li列表
css 圆角圆边
css 父级子级
css 指针概念
css cursor
css overflow
html px em pt网页单位
CSS important
CSS position
css z-index
css white-space
css img图片
css class id
css link与@import区别
css 选择器
css引入html

必备HTML基础教程Essential HTML Tutorials

html img图片标签
html em标签( EM强调标签)
html strong加粗( strong标签)
html B加粗( b加粗标签)
strong与B加粗区别
h1 h2 h3 h4标签( html标题标签)
html A超链接锚文本
html注释
html head头部标签
html title标题标签
html meta标签
html link标签
html i斜体标签
html u下划线标签
html s删除线标签
html换行br标签
html p段落标签
p标签与br标签区别
html div标签元素
html span标签
html font标签
html script标签
html px em pt网页单位
html ul li列表
ol li列表
dl dt dd标签组
table tr td表格
table tr th表格
html form表单
html form input
html form textarea文本区域
html select下拉与跳转( Html select)
html iframe框架
html网页结构
htm html shtml区别用法
网页编码charset
UTF-8 GBK UTF8 GB2312区别联系
先写html还是先写CSS
显示扩展名
html标签大全集合
html常用标签
网页源代码是什么