如何更改网页上的链接下划线

本文介绍了几种使用CSS改变网页文本链接默认外观的方法，包括删除下划线、将其更改为虚线或更改其颜色。还包括将下划线更改为虚线或双下划线的附加信息。

如何删除文本链接上的下划线

默认情况下，web浏览器有一定的CSS样式它们应用于特定的HTML元素。如果不使用站点自己的样式表覆盖这些默认值，则应用默认值。为超链接，默认显示样式是任何链接文本都是蓝色和下划线。如果你愿意，你可以改变这些下划线的外观或者从你的网页上完全删除它们。

要删除文本链接中的下划线，可以使用CSS属性text-decoration。这里是你写的CSS做到这一点:

一个{text-decoration: none;}

通过这一行CSS，您可以从您的网页上的所有文本链接中删除下划线。尽管这是一种非常通用的样式(它使用元素选择器)，但它仍然比默认的浏览器样式具有更多的特殊性。因为这些默认样式是创建下划线的开始，这就是您需要覆盖的内容。

A删除下划线的警告

从视觉上看，删除下划线可能正是您想要实现的，但您在这样做时也应该谨慎。不管你是否喜欢带下划线的链接，你都不能说它们能明显地显示出哪些文本被链接了，哪些没有。如果去掉下划线或更改默认的蓝色链接颜色，则应确保使用仍然允许链接文本突出的样式替换它们。这将为您的站点的访问者提供更直观的体验。

非链接不要下划线

关于链接和下划线的另一个警告是，不要用下划线来强调不是链接的文本。人们通常认为带下划线的文本就是链接，所以如果你为了强调内容而加下划线(而不是加粗或斜体)，你就会发送错误的信息，让网站用户感到困惑。

如何将下划线更改为点或破折号

如果你想保持文本链接的下划线，但是改变下划线的默认样式，也就是“实线”，你也可以这样做。您可以使用点来为链接下划线，而不是实线。要做到这一点，你仍然会删除下划线，但你将用border-bottom style属性来替换它:

一个{text-decoration: none;边界底部:1 px点缀;}

由于您已经删除了标准下划线，虚线是唯一出现的。

你可以用同样的方法得到破折号。只需更改border-bottom样式为虚线:

一个{text-decoration: none;边界底部:1 px破灭;}

如何更改下划线颜色

另一种吸引人们注意链接的方法是改变下划线的颜色。只要确保颜色适合你的配色方案。

一个{text-decoration: none;边界底部:1 px固体红;}

双突显出

使用双下划线的技巧是你必须改变边框的宽度。如果你创建一个1px宽的边框，你会得到一个双下划线，看起来像一个下划线。

一个{text-decoration: none;边界底部:3 px的两倍;}

你也可以使用现有的下划线，使双下划线与其他功能，如其中一行是虚线:

A {border-bottom:1px double;}

不要忘记链接州

你可以在不同的状态下添加border-bottom样式到你的链接，例如:hover，:active，或:visited。当您使用“hover”伪类时，这可以为访问者创建一个很好的“翻转”风格的体验。将鼠标悬停在链接上时，显示第二个虚线:

一个{text-decoration: none;}
A:hover {border-bottom:1px虚线;}