从文本链接中删除下划线的步骤和要注意的问题
默认情况下，使用或“anchor”元素链接到HTML的文本内容使用下划线进行样式化。 通常情况下，网页设计师会选择通过删除下划线来删除此默认样式。
许多设计师不关心下划线文字的外观，特别是在密集的内容链接很多的情况下。 所有那些带下划线的单词可以真正打破文档的阅读流程。 许多人认为，由于强调改变自然字母的方式，这些下划线实际上使得单词更难以区分和阅读。
然而，在文本链接上保留这些下划线有合理的好处。 例如，当您浏览大块文本时，带有下划线的链接以及适当的颜色对比使读者可以立即扫描页面并查看链接的位置。 如果您查看About.com上的网页设计文章以及网站上的其他文章，您将看到带有下划线链接的这种样式。
如果您决定从文本中删除链接（我们稍后会介绍一个简单的过程），请务必找到设置文本风格的方法，以便与纯文本保持区分什么是链接。 这通常是通过上述颜色对比来完成的，但单独使用颜色会对患有色盲等视觉障碍的访问者造成问题。 根据他们特定的色盲形式，对比可能完全丧失，从而阻止他们看到链接和非链接文本之间的差异。 这就是为什么加下划线的文本仍然被认为是显示链接的最佳方式。
那么如果你仍然想这样做，你如何关闭下划线呢？ 由于这是我们所关心的视觉特性，因此我们将转到我们网站的一部分，它处理所有可视的事情 - CSS。
使用级联样式表关闭链接上的下划线
在大多数情况下，您并不希望只在一个文本链接上关闭下划线。 相反，您的设计风格可能要求您从所有链接中删除下划线。您可以通过向外部样式表添加样式来完成此操作。
{text-decoration：none; }而已！ 一条简单的CSS代码将关闭所有链接的下划线（实际上将CSS属性用于“文本修饰”）。
你也可以用这种风格更具体。 例如，如果您只想关闭“nav”元素中的下划线或链接，则可以编写：
nav a {text-decoration：none; }现在，页面上的文本链接将获得默认下划线，但导航中的这些链接会将其删除。
许多网页设计师选择做的一件事是，当有人在文本上悬停时，将链接重新打开。 这将使用：悬停CSS伪类来完成，如下所示：
{text-decoration：none; } a：hover {text-decoration：underline; }使用内联CSS
作为对外部样式表进行更改的替代方法，您还可以将样式直接添加到HTML中的元素本身，如下所示：
此链接没有下划线这种方法的问题在于它将风格信息放置在HTML结构中，这不是最佳实践。 样式（CSS）和结构（HTML）应该保持分开。
如果您希望网站的所有文字链接都删除了下划线，则将这种样式信息添加到每个链接上将意味着将相当数量的额外标记添加到您网站的代码中。 此页面膨胀会减慢网站的加载时间，并使整体页面管理变得更具挑战性。 由于这些原因，最好总是转向外部样式表以满足所有页面样式需求。
闭幕
就像从网页的文本链接中删除下划线一样简单，您还应该注意这样做的后果。 虽然它确实可以清理页面的外观，但它可能会牺牲整体可用性。 下次考虑更改页面的“文本修饰”属性时，请考虑到这一点。
Jennifer Krynin的原创文章。 由Jeremy Girard于9/19/16编辑