如何从HTML链接中删除下划线？

Question

在我的页面中,我已经放置了一些我不想要任何行的链接,因此,如何使用HTML删除它？

Answer 1

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

但请记住,您通常应将网站内容(即HTML)与演示文稿(即CSS)分开.因此,您通常应该避免使用内联样式.

请参阅John的答案,看看使用CSS的等效答案.

杀手！在我做 html 的所有这些年里，我从未见过这些下划线......^^ (2认同)
约翰的回答基本上仍然使用内联样式。分离你的 CSS 不仅仅是在你的 html 中给 css 别名。例如，`class="big-and-red"` 是别名而不是分离。`class="meaningful-domain-item"` 然后 css `.meaningful-domain-item { //big and red }` 是。这个答案足以提醒我在我的 css +1 中使用哪个标签。 (2认同)

Answer 2

这将删除所有链接的所有下划线:

a {text-decoration: none; }

如果您有要将其应用于的特定链接,请为其指定类名,nounderline并执行以下操作:

a.nounderline {text-decoration: none; }

这仅适用于那些链接,并使所有其他链接不受影响.

此代码属于<head>您的文档或样式表:

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

并在身体:

<a href="#" class="nounderline">Link</a>

Answer 3

我建议使用:悬停以避免下划线,如果鼠标指针在锚点上方

a:hover {
   text-decoration:none;
}

Answer 4

将其添加到外部样式表(首选):
```
a {text-decoration:none;}
```
Run Code Online (Sandbox Code Playgroud)
或者将其添加到<head>HTML文档中:
```
<style type="text/css">
 a {text-decoration:none;}
</style>
```
Run Code Online (Sandbox Code Playgroud)

或者将其添加到a元素本身(不推荐):

<!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>

Answer 5

其他答案都提到了文字装饰。有时您使用 Wordpress 主题或其他人的 CSS，其中链接由其他方法加下划线，因此 text-decoration: none 不会关闭下划线。

Border 和 box-shadow 是我所知道的另外两种用于下划线链接的方法。要关闭这些：

border: none;

和

box-shadow: none;