如何去掉或取消html超链接下划线的方法_问答一下，轻松解决，电脑应用解决方案专家！

在html中，<a标签>创建的超链接文本往往带有下划线，如下图所示：

这是因为<a>标签创建的超链接本文，在默认情况下，相当于设置了以下CSS样式效果：

CSS

a{text-decoration:underline;}

在CSS样式中，设置text-decoration属性值为underline，其作用就是添加下划线效果的，所以，我们也可以通过该方式，为其他文本添加下划线效果。

那么，我们如何去掉或取消html超链接文本下划线呢？

一、去掉html超链接下划线的方法

去掉html超链接下划线的方法，就是设置css样式中text-decoration属性值为none即可，方法如下：

方法1、全局设置法

在CSS样式文件中，给a标签添加text-decoration: none，这样做的好处是，可以对引入该CSS样式文件的所有html页面起作用，设置一次即可全局有效，代码如下：

CSS

a{text-decoration: none;}

方法2、头部设置法

在<head>和</head>之间，通过<style>标签设置text-decoration: none，代码如下：

Markup

<style>
a{text-decoration: none;}
</style>

方法3、单个标签设置法

直接通过<a>标签设置text-decoration: none，演示代码如下：

Markup

<a style="text-decoration:none" href="#" target="_blank">欢迎光临刘代码博客</a>

二、设置超链接四种不同状态的下划线

<a>标签超链接四种状态下设置去掉下划线，代码如下:

Markup

a:link{text-decoration: none;}      //未访问状态去除下划线
a:visited{text-decoration: none;}   //访问过后的状态去除下划线
a:hover {text-decoration: none;}    //鼠标悬停在链接上状态去除下划线
a:active{text-decoration:none;}     //超链接激活状态去除下划线

其实，可以直接用下面的代码一次性取代上面四种状态：

CSS

a{text-decoration: none;}

搜索