如何删除锚点(链接)的下划线?

问题描述 投票:276回答:15

无论如何(在CSS中)是为了避免页面中引入的文本和链接的下划线..?

html css underline
15个回答
469
投票

使用CSS。这将删除au元素的下划线:

a, u {
    text-decoration: none;
}

有时您需要覆盖元素的其他样式,在这种情况下,您可以在规则上使用!important修饰符:

a {
    text-decoration: none !important;
}

1
投票

如果您想将锚标记简单地用作没有添加样式的链接(例如悬停或蓝色下划线),请将class="no-style"添加到锚标记。然后在您的全局样式表中创建“no-style”类。

.no-style { text-decoration: none !important; }

这有两个好处。

  1. 它不会影响所有锚标记,只会添加添加了“no-style”类的锚标记。
  2. 它将覆盖任何其他样式,否则可能会阻止将文本修饰设置为无。

0
投票

不要忘记使用链接标记包含样式表

http://www.w3schools.com/TAGS/tag_link.asp

或者将CSS封装在网页上的样式标记中。

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

除了链接之外,我不建议使用下划线,下划线通常被接受为可点击的内容。如果它不可点击,请不要加下划线。

可以在w3schools学习CSS基础知识


0
投票
<u>

是不推荐使用的标签。

使用...

<span class="underline">My text</span>

使用包含...的CSS文件

span.underline
{
    text-decoration: underline;
}  

要不就...

<span style="text-decoration:underline">My Text</span>

0
投票

使用css属性,

text-decoration:none;

从链接中删除下划线。


0
投票

可以通过名为文本修饰的CSS属性删除下划线。

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

如果要删除除a以外的元素中的文本的下划线,则应使用以下语法。

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

还有许多其他text-decoration值可以帮助您设计链接。


-1
投票

我在网络打印中一直困扰着这个问题并解决了。验证结果。

a {
    text-decoration: none !important;
}

有用!。


26
投票

css是

text-decoration: none;

text-decoration: underline;

15
投票

这将删除您的颜色以及锚标记存在的下划线

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }

8
投票

最简单的选择是:

<a style="text-decoration: none">No underline</a>

当然,将CSS与HTML混合(即内联CSS)并不是一个好主意,尤其是当你在整个地方使用a标签时。 这就是为什么将它添加到样式表中是个好主意:

a {
    text-decoration: none;
}

甚至这个代码在JS文件中:

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}

6
投票

使用CSS删除text-decorations。

a {
    text-decoration: none;
}

4
投票

有时它会被一些渲染UI CSS覆盖。更好用:

a.className {
    text-decoration: none !important;
}

4
投票

如果您只想从锚链接中删除下划线,则为您提供最佳选择 -

    #content a{
                text-decoration-line:none;
                }

这将删除下划线。

此外,您可以使用类似的语法来操纵其他样式 -

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

希望这可以帮助!

P.S.-这是我的第一个回答!


3
投票

在我的情况下,锚有一个关于悬停效果的规则,如下所示:

#content a:hover{
border-bottom: 1px solid #333;
}

当然,text-decoration:none;在这种情况下无能为力。我花了很多时间才发现它。

所以:下划线不要与边框底部相混淆。


1
投票

为问题提供另一个视角(从原帖的标题/内容推断):

如果要跟踪HTML中创建流氓下划线的内容,请使用调试工具。有很多可供选择:

对于Firefox,有FireBug;

对于Opera,有Dragonfly(在工具 - >高级菜单中称为“开发人员工具”;默认情况下附带Opera);

对于IE,有“Internet Explorer Developer Toolbar”,它是IE7及以下版本的单独下载,并集成在IE8中(点击F12)。

我不知道Safari,Chrome和其他少数民族浏览器,但无论如何你应该在你的机器上至少有三个中的一个。

© www.soinside.com 2019 - 2024. All rights reserved.