WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
系统注册表系统命令DOSWin8
存储光存储键盘鼠标
内存维修打印机维修
WinXPVistaWin7linux
硬件综合机箱电源/散热器手机数码
主板维修CPU维修键鼠维修网页设计
办公教程ExcelWordPowerPointWPS
网络工具系统工具图像工具
PS教程数据库局域网服务器
PHP教程CSSjavascriptXML

如何去掉或取消html超链接下划线的方法

更新时间:2021-05-02 17:42 作者:刘代码点击:

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

2020-03-14_005140.png

这是因为<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;}
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容