怎样用CSS样式在文字下面加下划线

html-css014

怎样用CSS样式在文字下面加下划线,第1张

一般有两种方法:

一、通过CSS下划线代码:text-decoration:underline来设置文字下划线。

实例演示如下:

1、实例代码如下:

此时页面效果如下:

2、修改第1步中的txt样式,加入text-decoration:underline。

此时页面效果如下,出现了下划线。

二、通过设置div的border实现效果:

实例演示如下:

在第一种方法的初始代码上,增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式,如下:

此时页面效果如下:

使用padding-bottom样式实现字体文字下划线距离设置。

传统的css下划线text-decoration样式只能设置其文字下划线样式而无法实现下划线与文字间距调整。所以借助与padding属性模拟下划线实现文字与下划线之间距离可调节。

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=gb2312" /> 

<title>文汇建站</title> 

<style> 

.divcss5-x5{ padding-bottom:5px text-decoration:underline} 

.divcss5-x10{ padding-bottom:10px  text-decoration:underline} 

</style> 

</head> 

<body> 

<p> 

下划线divcss5距离调节实例 

<span class="divcss5-x5">我下划线距离为5px</span>, 

<span class="divcss5-x10">我的下划线距离为10px</span>

</p> 

</body> 

</html>

1、如果想修改一下下划线的颜色,大小等样式就可以通过border属性来设计,使用起来更灵活。

2、border-bottom属性,用来设置底部的边框样式。

3、border-bottom: #FF0000 2px solid 设置边框大小为2PX的红色边框。

4、看一样效果,发现下划线是整个屏幕的宽度,所以接下来要修改一下宽度。

5、宽度设置成180px,宽度根据 实际情况调整就可以了。

6、最后显示下划线效果。