css链接颜色样式最佳实践

html5boilerplate.com提供了这样的CSS代码的链接：

a { color: #00e; } 
a:visited { color: #551a8b; } 
a:hover { color: #06e; }

是它在大多数情况下不够好？

或者也许更好的css代码存在链接样式的颜色？

来源

2012-08-14 webvitaly

爱恨（http://meyerweb.com/eric/css/link-specificity.html）曾经是建议。 – j08691 2012-08-14 15:26:33

这绝对会在绝大多数的情况下足够了。

只需记住的样式链接正确的顺序是：

a:link { color: #c00 } /* unvisited links */ 
a:visited { color: #0c0 } /* visited links */ 
a:hover { color: #00c } /* user hovers  */ 
a:active { color: #ccc } /* active links */

的outline看起来“丑”为你，但是这是一个非常重要的辅助功能。如果删除 - 请大家提供了一个替代的方式来妥善区分当前元素（大/大胆的字体，高对比度的背景等）

来源

2012-08-14 15:28:24

查看'a'和'a：link'选择器之间的区别http://stackoverflow.com/questions/2638229/css-alink-vs-just-a-without-the-link-part – 2015-04-03 08:08:18

如果你想确保你是样式链接（而不是链接锚），你应该使用a:link而不是a。您可以在最后添加a:active。这里有一个tutorial。

来源

2012-08-14 15:25:33 Oriol

-2

我觉得它总是很好添加

a {outline：none; }

因为有些浏览器添加恼人的轮廓来链接，当你点击它们

来源

2012-08-14 15:26:11

请不要*只是*做到这一点。外线是出于可访问性的原因。如果删除它，请用其他东西替换它。见http://www.outlinenone.com/ – SandRock 2013-11-15 10:52:54

谢谢你打开我的眼睛。我一直都是出于设计原因。 – 2014-01-11 20:03:35

我总是重置设置，可能是浏览器之间的不同的服务。

我也喜欢标记外部网站链接不同，通过添加图像（类似于一个在维基百科）。

a, 
a:link, 
a:active, 
a:visited, 
a:hover { 
    color:   #d30; 
    text-decoration: none; 
} 

a:hover { 
    text-decoration: underline; 
} 

/* Links to external websites */ 
a.external:before { 
    content:   url(./pics/external.png); 
}

来源

2012-08-14 15:32:01

如果删除默认下划线可能无法区分那些色盲者或使用单色显示器（如E Ink设备）的文本与其他文本的链接。 – tomasz86 2014-08-16 17:38:25

@ tomasz86：好点。但是：我不知道一个强调链接的网站。可能是因为它使文本（很多链接）难以阅读。当我对可访问性更感兴趣时，我发现有颜色问题的人会将自己的样式表应用于网站。这就是为什么我决定让大多数人都可以访问网站。那些需要下划线的链接将（可能）无论如何应用他们自己的风格。你有什么经验？ – 2014-08-18 23:07:59

英国政府网站（https://gov.uk）链接下划线。至于使用自定义样式表，我认为它可能很有用，但前提是您使用的是私人台式机/笔记本电脑。如果您需要依赖移动设备或公共电脑等，那么您很可能不得不使用其默认样式查看这些网站。顺便说一下，在上面的代码中将'a：focus'添加到'a：hover {text-decoration：underline;}'将对键盘用户有所帮助。 – tomasz86 2014-08-20 16:31:53

永远不要删除该轮廓，或至少删除它只适用于：活动。如果您为所有锚点执行此操作，那么它也将被移除以用于：用于键盘导航的焦点。由于悬停在触摸屏上不存在，因此依靠悬停太多是非常糟糕的。

我喜欢将所有链接与其他内容轻松区分开来。这是我个人的偏好：

2016版本

/* The order is important! Do not use fixed values like px! Always check contrast between text and background for accessibility! */ 

a { border-bottom: thin solid; 
    color: rgb(0,0,192); 
    font-weight: bolder; 
    text-decoration: none; 
} 
a:visited { color: rgb(160,0,160); } 
a:active { color: rgb(192,0,0); } 
a:active, a:focus, a:hover { border-bottom-width: medium; }

2015年版

a { border-bottom: thin solid; 
    color: rgb(0,0,192); 
    font-weight: 700; 
    text-decoration: none; 
} 
a:visited { color: rgb(128,0,128); } 
a:active { color: rgb(192,0,0); } /* :active MUST come after :visited */ 
a:active, a:focus, a:hover { border-bottom-width: medium; }

2014版本

a { border-bottom: 1px solid; 
    color: rgb(0,0,166); 
    font-weight: 700; 
    text-decoration: none; 
} 
a:visited { color: rgb(122,0,122); } 
a:active { color: rgb(166,0,0); } /* :active MUST come after :visited */ 
a:active, a:focus, a:hover { border-bottom: 3px solid; }

2013版本

a { color: rgb(0,0,166); 
    font-weight: 700; 
    border-bottom: 1px dotted; 
    text-decoration: none; 
} 
a:visited { color: rgb(122,0,122); } 
a:hover, a:focus, a:active { border-bottom: 2px solid; } 
a:focus, a:active { color: rgb(166,0,0); }

来源

2013-09-28 05:54:33 tomasz86

css链接颜色样式最佳实践

回答

相关问题