在CSS中，我们可以通过设置样式来实现文字和区域的下划线效果。以下是一些常见的下划线样式及其实现方法：
1. 文字带下划线的方式显示：
使用HTML中的``标签即可对加`u`标签的文字加下划线。例如：
```html
我是被加下划线的
```
但是需要注意的是，`u`标签是以``开始，``结束的一对标签。
2. 超链接文字下划线：
我们常常需要让带超链接的文字以有下划线方式显示，而鼠标放上去时下划线不显示。接下来我们通过CSS对超链接下划线设置。使用`text-decoration`属性，可查看CSS手册中关于`text-decoration`的详细介绍。语法如下：
```css
text-decoration : none || underline || blink || overline || line-through
```
其中，各个参数的含义如下：
- none:无装饰；
- underline:下划线；
- blink:闪烁；
- overline:上划线；
- line-through:贯穿线。
实例：
根据图例看出“div css”被加入CSS链接，同时在CSS样式也设置了CSS属性a被加下划线(a{ text-decoration:underline;}),但鼠标放上去(a:hover{ text-decoration:none;})下划线则被去掉的。
3. 对超链接文字鼠标放上去出现下划线：
根据第二点(2、超链接文字下划线)中通过CSS来让超链接文字带下划线，鼠标放上去则去掉下划线来说，第三点则是刚好与第二点相反，超链接自然不显示下划线(a{ text-decoration:none;}),而鼠标放上去出现下划线(a:hover{ text-decoration:underline;})。
4. 对某区域鼠标放上去出现下划线：
这个在我们日常使用中非常常见，我们可以对其div设置一个class样式(id与class区别)。例如：
```css
.ys:hover{ text-decoration:underline; cursor:pointer;}
```
解释一下`cursor`这个属性，它是鼠标指针的形状。在这个例子中，当鼠标悬停在带有`.ys`类的元素上时，指针会变成手指形式。
通过设置CSS样式，我们可以在浏览器中实现鼠标悬停在文字上时出现下划线的效果。这种效果与超链接的原理相同，但并非因为有超链接才有下划线。如果你看到图片中的下划线链接，请不要惊讶，因为实现起来其实很简单，你也可以做到。
要查看实际效果，请访问 http://5key.net/demo/hyperlink-underline 。首先，我们来了解一下这个彩色下划线的实现方法。你可能已经猜到了，它依赖于一张渐变背景图片。没错！就是下面这张图片。
接下来，让我们看一下相关的CSS代码。相信你已经理解了整个链接的变化效果。如果还不是很清楚，可以先了解一下滑动门的概念。以下是CSS代码：
```css
body {
font-size: 14px;
font-family: Helvetica, sans-serif;
padding: 10px;
margin: 0px;
}
h1 {
margin: 0;
padding: 0;
font-size: 16px;
}
p {
padding: 20px 0 0 0;
}
a {
*padding-bottom: 1px;
text-decoration: none;
}
a:link {
color: #06F;
background: url(1.gif);
background-repeat: repeat-x;
background-position: 0 16px;
}
a:visited {
color: #06f;
background-image: url(1.gif);
background-repeat: repeat-x;
background-position: 0 16px;
}
a:hover {
color: #039;
background: url(1.gif) repeat-x 0 bottom;
}
```
