DIV CSS如何给文字字体添加下划线？

使用css div如何给文字添加下划线样式呢？使用css对文字字体添加下划线样式方法教程。

对字体文字加下划线样式，有两种方法，一直直接使用html下划线标签，另外一种是使用CSS下划线样式。

接下来为大家介绍对文字字体实现下划线方法教程，通过案例方式让大家作为两种对文字加下划线样式。

一、html标签实现下划线 - TOP

在html标签中对需要加下划线的文字加<u></u>即可实现加下划线样式。

1、标签语法：

<u>我被加下划线了</u>

2、html实例源代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>html下划线标签实例 www.divcss5.com</title> 
</head> 
<body> 
我是divcss5!<br />  
divcss5是网址<u>www.divcss5.com</u> !  
</body> 
</html>

3、实例截图

html u下划线使用语法实例截图
Html标签实现下划线截图

在线演示：查看案例

二、css样式实现下划线样式 - TOP

使用CSS样式单词：text-decoration:underline

1、语法

div{text-decoration:underline} 
/* css注释说明：这样的表达将让DIV标签内文字字体加上下划线 */

2、div css实现下划线实例代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>下划线 删除线 上划线实例 www.divcss5.com</title> 
<style> 
.divcss5{text-decoration:underline} /* underline下划线 */ 
.divcss5_1{text-decoration:line-through} /* line-through删除线贯穿线 */ 
.divcss5_2{text-decoration:overline} /* overline上划线 */ 
</style> 
</head> 
 
<body> 
<div class="divcss5">我被加下划线</div>  
<div class="divcss5_1">我被加贯穿删除线</div>  
<div class="divcss5_2">我被加上划线</div>  
</body> 
</html>

3、实例截图

div css实现下划线截图
DIV+CSS实现删除线、上划线、删除线实例效果截图

在线演示：查看案例

总结：实现下划线方法有两种，一种是html标签实现、一种是css text-decoration实现下划线样式，大家可以灵活运用。网页中默认情况下文字字体是没有下划线样式，如果需要就通过以上两种方法实现；同时，如果文字被超链接锚文本，其默认有下划线样式，如果去掉超链接下划线呢？如何css实现链接无下划线？

以上两个实例源代码打包下载：

立即下载（1.878KB）

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