基础CSS问题：去除超链接下划线

Question

请容忍我这个初学者的问题。 http://jsbin.com/css-play-notfound/6 在标题中，我的文字和图片之间出现了令人讨厌的蓝色下划线。

- smartnut007

---

谁给这个投了反对票？基本问题也需要回答！要友善！ - imakeitpretty

Answer 1

你可以做两件事情：

修改此代码：

<img src="logo.png" alt="REUNIFY" height="35" />

转换为：

<img src="logo.png" alt="REUNIFY" height="35" border="0" />

同时将以下内容添加到您的CSS样式表中：

a { text-decoration:none }

请注意，上述CSS将去除所有链接的下划线。因此，如果您希望您的普通文本链接有下划线，并且只想让这个特定的链接没有下划线，则可以创建一个如下的类：

a.noline { text-decoration:none }

然后将你的HTML代码更改为:

<h1><span><a href="http://www.wikipedia.org" class="noline">
<img src="logo.png" alt="REUNIFY" height="35" border="0" />
</a></span>
Welcome
</h1>

- Cynthia

---

在CSS重置中，你应该删除图像边框。每个img标签单独设置边框没有意义。此外，图像需要一个宽度属性并且是一个自包含标签。 - Tom

刚刚在w3schools上读到，显式指定图像的尺寸可以预先分配空间。 - smartnut007

还发现了normalizer.css，而不是进行重置。此外，我知道它随bootstrap一起发布，我计划随后使用它。 - smartnut007

我不清楚图像中的border = 0属性，有什么解释吗？ - smartnut007

一些浏览器默认会在图像周围添加蓝色边框，您应该始终在CSS文件中使用img border:0;来删除它。 - Tom

Answer 2

只需添加CSS规则即可...

text-decoration: none;

你可以通过使用类或ID将CSS样式应用到你的<a>元素，也可以应用到特定的元素。

你可以像这样将其应用到所有超链接：

a
{
    text-decoration: none;
}

- Telmo Marques

Answer 3

a
{
    text-decoration: none;
}

将此添加到您的 CSS 中。

- Anooj P

Answer 4

您应该始终添加HTML5和旧浏览器CSS重置。

http://cssreset.com/是2012年最受欢迎的之一。这样，您就可以始终从干净的状态开始。

- Andrew Manson