在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;
}
```