更新:几年之后 这篇文章发布,它被发现 :visited 选择器 可能是一个安全问题。现在您可以使用选择器的功能更加有限了。
color、background-color、border-*-color 和 outline-color 以及 (SVG) fill 和 stroke 属性的颜色部分
为了后代,我会保留这篇文章。您仍然可以使用选择器并使其不显眼。
您可能知道,您可以在 CSS 中定义 a:visited
的样式,它将应用于访问者浏览器中他们已经访问过的链接。这个功能的实用性是有争议的,但无论如何,最好不要将任何过于醒目或独特的样式应用于此。充其量,这可能会让您的访问者感到些许烦躁。最糟糕的是,这可能会让访问者感到困惑,以至于他们不再返回。
网页趋势通常也会远离链接下划线。至少对于内容中间的链接来说是这样。使用不同的颜色会更时尚。或者也许,不同的字体粗细。
我建议使用这种非常不显眼的方法来处理帖子内容中的链接
p {
color: #666666;
}
a {
font-weight: bold;
text-decoration: none;
color: #2a2a2a;
}
a:visited {
font-weight: normal;
}
a:hover {
text-decoration: underline;
}
在本例中,所有链接都是稍微深一点的灰色。未访问过的链接是粗体,而访问过的链接恢复为普通字体粗细,因此可以更好地融入内容中。
这项技术肯定会在 CSS-Tricks 的新版本中使用(提示,提示)。
不错的技巧。
没有下划线?
鼠标悬停时有下划线。
哦,我的意思是,如果读者没有将鼠标悬停在链接上,他们可能会认为粗体文本是“强调”文本而不是超链接?
确实如此,但我认为,从某种程度上来说,链接是一种强调。我个人只是不喜欢下划线弄乱排版。想象一本平装书中的页面。干净、间隔良好的文本。现在想象一下,如果其中 10 个单词下面有长长的线。我知道你不能给书加超链接,但我指的是纯粹的美学。
另外,下划线会在阅读时产生一种奇怪的节奏,我一直觉得很烦人。
我建议我们给链接加下划线…… text-decoration: underline 很好用…… 或者对于未访问过的链接使用 text-decoration: none; border-bottom: 1px dotted black; 以及对于访问过的链接使用“灰色”或“银色”……
可用性和体验是关键因素。毕竟,如果你不提示用户某个词是超链接(通过遵循惯例),你怎么能期望他们将鼠标悬停在其上,更不用说点击它们了?
– http://www.JoeLevi.com
嘿,Joe,
我认为你提出了一个很好的观点,即如果建立一个标准,可能对所有用户都有好处。我个人倾向于不这样做,仅仅是因为我认为网站的设计应该比某个标准更能决定链接的样式。
我注意到你自己的网站没有下划线链接 =)
我倾向于同意那些建议在未访问过的链接中使用下划线的人(我认为访问过的链接可以使用下划线,但建议保持下划线)。不使用下划线会让用户更难判断什么是链接,降低您的可访问性,意味着您不能为文本使用粗体/强,这也会限制您的 SEO 能力。
您还可以增加文本行之间的长度,这意味着带下划线的文本不会显得挤压。
下划线是印刷排版中的一个败笔。恕我直言。
@Graham,但你要记住,这不是印刷,这是网络!它们是不同的,非常不同!
网络与印刷一样,也有一些规则,规定事物如何定位和完成。下划线就是其中之一。
我喜欢内容中带下划线的链接。让我感到烦恼的是不同的字体粗细。
感谢您的提示!
很高兴知道。