CSS下划线

目录：

1. 常见和常用的下划线样式

2. 文字带下划线的方式显示

3. 超链接文字下划线

4. 对某区域鼠标放上去出现下划线-对象下划线

接下来，我们来介绍通过CSS样式对文字、区域设置下划线样式。

1. 常见和常用的下划线样式：

- 文字带下划线的方式显示：使用HTML中的``标签即可对加`u`标签的文字加下划线，实例样式如下图。但是注意，`u`标签是以``开始``结束的一对标签，`我是被加下划线的`。

- 超链接文字下划线：我们常常需要让带超链接的文字以有下划线方式显示，而鼠标放上去下划线不显示方式显示带链接的文字。接下来我们通过CSS对超链接下划线设置。使用代码`text-decoration`,可进CSS手册查看`text-decoration`详细介绍。语法：`text-decoration : none || underline || blink || overline || line-through`。`text-decoration`参数：`none`表示无装饰，`blink`表示闪烁，`underline`表示下划线，`line-through`表示贯穿线，`overline`表示上划线。实例：根据图例看出“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元素设置一个CSS类(id与class的区别在于，id是唯一的，而class可以有多个元素共享)来实现这个效果。例如，我们可以为这个div设置一个名为".ys"的类，然后在CSS样式中定义：

```css

.ys:hover {

text-decoration: underline;

cursor: pointer;

}

```

这段代码的意思是，当鼠标悬停在带有类名"ys"的元素上时，文字将出现下划线，并以手指形式的光标显示。这里的下划线和光标显示并不是因为这个元素是一个超链接，而是因为我们为它设置了CSS样式。实际上，这种效果与超链接的工作原理非常相似。