如何从链接中删除下划线

默认情况下，使用或“anchor”元素链接到HTML的文本内容使用下划线进行样式设置。网页设计师通常会选择通过删除下划线来删除此默认样式。

许多设计师不关心带下划线的文本的外观，特别是在具有大量链接的密集内容块中。所有这些带下划线的单词都可以真正打破文档的阅读流程。许多人认为，由于强调改变自然字形的方式，那些强调实际上使单词难以区分和快速阅读。

但是，在文本链接上保留这些下划线有合理的好处。例如，当您浏览大块文本时，加下划线的链接以及正确的颜色对比使读者可以轻松地立即扫描页面并查看链接的位置。

如果您决定从文本中删除链接（我们将在稍后介绍一个简单的过程），请务必找到对该文本进行样式设置的方法，以便仍然区分什么是纯文本链接。这通常使用上述颜色对比度来完成，但是单独的颜色可能对具有视觉障碍（例如色盲）的访客造成问题。根据他们特定的色盲形式，对比度可能完全丧失，阻止他们看到链接和非链接文本之间的差异。这就是为什么带下划线的文本仍然被认为是显示链接的最佳方式。

那么如果你还想这样做，你如何关闭下划线？由于这是我们所关注的视觉特性，我们将转向我们网站中处理所有可视化内容的部分 - CSS。

使用层叠样式表关闭链接下划线

在大多数情况下，您不希望仅在一个文本链接上关闭下划线。相反，您的设计风格可能需要您删除所有链接的下划线。您可以通过向外部样式表添加样式来完成此操作。

一个 { text-decoration：none;}

而已！一个简单的CSS行将关闭所有链接上的下划线（实际上使用CSS属性进行“text-decoration”）。

您还可以使用此样式更具体。例如，如果您只想关闭下划线或“nav”元素内的链接，您可以写：

nav a { text-decoration：none;}

现在，页面上的文本链接将获得默认下划线，但导航中的文本链接将删除它。

许多网页设计师选择做的一件事是当有人将鼠标悬停在文本上时，将链接重新打开。这将使用：hover CSS伪类完成，如下所示：

一个 { text-decoration：none;}a：悬停{ 文字装饰：下划线;}

使用内联CSS

作为对外部样式表进行更改的替代方法，您还可以将样式直接添加到HTML中的元素本身。

此方法的问题在于它将样式信息放在HTML结构中，这不是最佳实践。样式（CSS）和结构（HTML）应该分开。

如果您希望所有网站的文本链接都删除了下划线，则将此样式信息单独添加到每个链接将意味着会在您的网站代码中添加相当多的额外标记。此页面膨胀可能会减慢网站的加载时间，并使整个页面管理更具挑战性。出于这些原因，最好总是转向外部样式表以满足所有页面样式需求。

在结束

从网页的文本链接中删除下划线很简单，您也应该注意这样做的后果。虽然它确实可以清理页面的外观，但它可能以牺牲整体可用性为代价。下次考虑更改页面的“文本修饰”属性时，请考虑这一点。