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

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

634175 次浏览
小开

使用CSS删除text-decorations。

a {
text-decoration: none;
}
小开

css是

text-decoration: none;

而且

text-decoration: underline;
小开
最佳答案

使用CSS。这将删除a和u元素中的下划线:

a, u {
text-decoration: none;
}

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

a {
text-decoration: none !important;
}
小开

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

如果您想要追踪是什么在HTML中创建了错误的下划线，请使用调试工具。有很多选择:

Firefox有FireBug;

Opera有蜻蜓(在工具->高级菜单中称为“开发人员工具”;Opera默认自带);

对于IE，有一个“Internet Explorer开发工具栏”，对于IE7及以下版本，可以单独下载，并集成到IE8中(点击F12)。

我对Safari、Chrome和其他少数浏览器不太了解，但你的电脑上至少应该有上述三种浏览器中的一种。

小开

不要忘记使用link标记来包含样式表

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

或者将CSS包含在网页的样式标签中。

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

我不建议在除链接之外的任何地方使用下划线，下划线通常被接受为可点击的东西。如果它不可点击，就不要下划线。

CSS基础知识可以在w3schools学习

小开 
<u>

是一个已弃用的标记。

使用……

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

一个CSS文件包含…

span.underline
{
text-decoration: underline;
}

或者只是……

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

最简单的选择是:

<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";
}
小开

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

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

在我的例子中，有一个关于锚的悬停效应的规则，像这样:

#content a:hover {
border-bottom: 1px solid #333;
}
当然，text-decoration: none;在这种情况下也无能为力。 我花了很多时间直到我发现它。

所以:下划线不要与border-bottom混淆。

小开

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

a {
text-decoration: none;
}


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

如果你只是想从锚链接中删除下划线，最好的选择-

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

这将删除下划线。

此外，您也可以使用类似的语法来操作其他样式，使用-

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

希望这能有所帮助!

这是我第一次回答!

小开

当你想将一个锚标记简单地用作一个链接而不添加样式(例如悬停时的下划线或蓝色)时，将class="no-style"添加到锚标记中。然后在全局样式表中创建类“no-style”。

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

这有两个好处。

  1. 它不会影响所有的锚标签，只影响那些“no-style”的锚标签。类添加到他们。
  2. 它将覆盖任何其他可能阻止将文本装饰设置为none的样式。
小开

使用css属性，

text-decoration:none;

从链接中删除下划线。

小开

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

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

如果你想移除除一个之外元素中文本的下划线，应该使用以下语法。

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

还有许多其他文字修饰值可以帮助你设计链接。

小开

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

a {
text-decoration: none !important;
}

它的工作原理!


提交答案