如何删除锚点(链接)的下划线?
Posted
技术标签:
【中文标题】如何删除锚点(链接)的下划线?【英文标题】:How to remove the underline for anchors(links)? 【发布时间】:2011-01-03 17:24:47 【问题描述】:是否有(在 CSS 中)避免页面中引入的文本和链接的下划线..?
【问题讨论】:
a:hover
,大多数流行的浏览器倾向于在悬停时在锚点上显示下划线。
【参考方案1】:
使用 CSS。这将删除 a
和 u
元素的下划线:
a, u
text-decoration: none;
有时您需要覆盖元素的其他样式,在这种情况下,您可以在规则上使用!important
修饰符:
a
text-decoration: none !important;
【讨论】:
如果为body
添加color: black !important;
,是否也会将所有元素(包括锚点、访问的锚点、悬停的锚点)设置为始终为黑色?
Ωmega Δ,显然不是,感谢您指出,我在整体规则中发现了一个错误。我已经更新了我的答案。
我发现如果你为body
元素设置样式text-decoration: none !important;
,那么只有当你为a
元素显式设置样式text-decoration: inherit;
时它才对锚有效。
通常最好避免!important
并使用特异性和基数来覆盖样式,否则您最终可能会得到一个充满!important
的样式表,而无需了解使其必要的结构。这是 IMO 的代码气味。
!important
就像拥有核武器一样。但是一旦你开始并被引诱使用!important
其他元素可能会得到它(nuke)并且优势消失了,有利于陷入僵局,这对世界来说是伟大的,因为 MUD 确保和平,但在 css 的世界中,这样的和平意味着你不能给予某些东西优势。【参考方案2】:
css是
text-decoration: none;
和
text-decoration: underline;
【讨论】:
【参考方案3】:这将删除您的颜色以及锚标记存在的下划线
a
text-decoration: none;
a:hover
color: white;
text-decoration: none;
cursor: pointer;
【讨论】:
【参考方案4】:最简单的选择是这样的:
<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";
【讨论】:
Iphone/android 不是很好的基准,因为它们不代表 Gmail 或 Outlook 的向后 HTML 呈现。 @XLogic:非常感谢【参考方案5】:使用 CSS 删除 text-decoration
s。
a
text-decoration: none;
【讨论】:
【参考方案6】:如果您只想从锚链接中删除下划线,您的最佳选择-
#content a
text-decoration-line:none;
这将删除下划线。
此外,您也可以使用类似的语法来操作其他样式 -
text-decoration: none;
text-decoration-color: blue;
text-decoration-skip: spaces;
text-decoration-style: dotted;
希望这会有所帮助!
P.S.-这是我第一次回答!
【讨论】:
【参考方案7】:有时它会被一些渲染 UI CSS 覆盖。更好用:
a.className
text-decoration: none !important;
【讨论】:
这是一个糟糕的主意。 ***.com/questions/8360190/…【参考方案8】:在我的例子中,有一条关于锚点悬停效果的规则,如下所示:
#content a:hover
border-bottom: 1px solid #333;
当然,text-decoration: none;
在这种情况下也无能为力。
我花了很多时间才发现它。
所以:不要将下划线与底部边框混淆。
【讨论】:
【参考方案9】:我在网络打印中遇到过这个问题并解决了。验证结果。
a
text-decoration: none !important;
有效!
【讨论】:
【参考方案10】:为问题提供另一个视角(从原始帖子的标题/内容推断):
如果您想追踪在您的 HTML 中创建恶意下划线的原因,请使用调试工具。有很多可供选择:
对于 Firefox,有 FireBug;
对于 Opera,有 Dragonfly(在工具->高级菜单中称为“开发者工具”;Opera 默认自带);
IE 有“Internet Explorer Developer Toolbar”,IE7 及以下版本单独下载,集成在 IE8 中(按 F12)。
我对 Safari、Chrome 和其他少数浏览器一无所知,但无论如何,您的机器上应该至少有上述三种浏览器中的一种。
【讨论】:
Safari 3/4:macobserver.com/tmo/article/Safari_3.1_The_Magical_Develop_Menu【参考方案11】:如果您只想将锚标记用作链接而不添加样式(例如悬停时的下划线或蓝色),请将class="no-style"
添加到锚标记。然后在您的全局样式表中创建“no-style”类。
.no-style
text-decoration: none !important;
这有两个好处。
-
它不会影响所有锚标签,只会影响添加了“no-style”类的标签。
它将覆盖任何其他样式,否则可能会阻止将 text-decoration 设置为 none。
【讨论】:
【参考方案12】:使用css属性,
text-decoration:none;
从链接中删除下划线。
【讨论】:
【参考方案13】:不要忘记使用链接标签包含样式表
http://www.w3schools.com/TAGS/tag_link.asp
或者将 CSS 包含在您网页上的样式标签中。
<style>
a text-decoration:none;
p text-decoration:underline;
</style>
我不建议在链接以外的任何内容上使用下划线,下划线通常被认为是可点击的东西。如果它不可点击,请不要加下划线。
可以在 w3schools 学习 CSS 基础知识
【讨论】:
【参考方案14】:<u>
是一个不推荐使用的标签。
使用...
<span class="underline">My text</span>
使用包含...的 CSS 文件
span.underline
text-decoration: underline;
或者只是……
<span style="text-decoration:underline">My Text</span>
【讨论】:
【参考方案15】:下划线可以被称为文本装饰的 CSS 属性移除。
<style>
a
text-decoration:none;
</style>
如果您想删除 a 以外的元素中存在的文本的下划线,则应使用以下语法。
<style>
element-name
text-decoration:none;
</style>
还有许多其他text-decoration 值可以帮助您设计链接。
【讨论】:
以上是关于如何删除锚点(链接)的下划线?的主要内容,如果未能解决你的问题,请参考以下文章