css链接去掉下划线的方法 css去掉超链接下划线详解

发布时间:2020-08-16编辑:脚本学堂
css链接去掉下划线的方法,css去除网页链接下划线,css去掉超链接下划线的例子,css去掉文字链接下划线及颜色的方法,text-decoration属性的用法详解。

一、css去除网页链接下划线

使用CSS去除网页链接下划线,当鼠标移动到链接上时下划线又恢复。

1、针对单个网页,可以把代码放入页面头部<head></head>中。
 

复制代码 代码示例:
<style type="text/css">
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
</style>

2、针对整个网站,可把代码
 

复制代码 代码示例:
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}


存为一个css文件,然后在各网页头部引用:
 

<link href="css文件路径/css文件名" rel="stylesheet" type="text/css"  />

二、css去掉超链接下划线的例子

css样式代码:
 

a{text-decoration:none;}/*去除下划线*/
a:hover{text-decoration:underline;}/*当鼠标移动到链接上时添加下划线*/

a{text-decoration:none;}
a:hover{text-decoration:underline;}
 

以上是整体定义所有的链接都会是这种效果。
 

#lj a{text-decoration:none;}
#lj a:hover{text-decoration:underline;}
 

以上用来定义局部链接样式,去掉超链接的下划线。

对超链接<a>标签,去除下划线,代码:
 

text-decoration:none;


鼠标悬停时,超链接有下划线,代码:
 

a:hover{text-decoration:underline;}


将此代码加入到css中操作<a>标签即可。

三、css去掉文字链接下划线及颜色

例子:
 

li a{color:#FFF;text-decoration:none;}
li a:hover{text-decoration:underline;}

四、如何去掉超链接的下划线

可以用css语法来控制超链接的形式、颜色变化。

超链接样式效果:
1、未被点击时超链接文字无下划线,显示为蓝色;
2、当鼠标在链接上时有下划线,链接文字显示为红色;
3、当点击链接后,链接无下划线,显示为绿色。

css语法控制:
 

<style type="text/css">
 <!--
 a:link { text-decoration: none;color: blue}
 a:active { text-decoration:blink}
 a:hover { text-decoration:underline;color: red} 
 a:visited { text-decoration: none;color: green}
 --> 
 </style>

其中:
a:link 指正常的未被访问过的链接;
a:active 指正在点的链接;
a:hover 指鼠标在链接上;
a:visited 指已经访问过的链接;

text-decoration是文字修饰效果的意思;

其包含二个参数:
none参数      超链接文字不显示下划线;
underline参数 超链接的文字有下划线

同样,如果将none替换成overline则给超链接文字加上划线,换成line-through给超链接文字加上删除线,blink则使文字在闪烁。

css超链接下划线:

css超链接颜色:

css超链接虚线框与样式: