css 链接颜色样式最佳实践
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11955594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css link color styles best practice
提问by webvitaly
There are many css-samples for styling color of links.
有许多 css-samples 用于设置链接颜色的样式。
html5boilerplate.comoffers such css code for link:
html5boilerplate.com为链接提供了这样的 css 代码：
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }?
Is it good enough for most cases?
大多数情况下它是否足够好？
Or maybe better css-code exist for styling color of links?
或者也许存在更好的 css 代码来设置链接的样式颜色？
回答by Zoltan Toth
That's definitely will suffice in vast majority of cases.
在绝大多数情况下，这肯定就足够了。
Just keep in mind that the correct order of styles for links is:
请记住，链接样式的正确顺序是：
a:link { color: #c00 } /* unvisited links */
a:visited { color: #0c0 } /* visited links */
a:hover, a:focus { color: #00c } /* user hovers, or focus */
a:active { color: #ccc } /* active links */
The outlinemight look "ugly" for you, but that's a very important accessibility feature. If you remove that - please take care of providing an alternative way to properly distinguish the current element (bigger/bolder font, high contrast background etc.)
该outline会找你“丑”，但是这是一个非常重要的辅助功能。如果您删除它 - 请注意提供一种替代方法来正确区分当前元素（更大/更粗的字体、高对比度背景等）
回答by R_User
I always reset settings that might be different between browsers.
我总是重置浏览器之间可能不同的设置。
I also like to tag links to external websites differently, by adding an image (similar to the one in the wikipedia).
我还喜欢通过添加图像（类似于维基百科中的图像）以不同方式标记指向外部网站的链接。
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);
}
回答by Oriol
回答by tomasz86
Never remove that outline, or at least remove it only for a:active. If you do it for all anchors then it will be also removed for a:focus which is used for keyboard navigation. Also relying on hover too much is very bad since hover is not present on touch screens.
永远不要删除那个轮廓，或者至少只为 a:active 删除它。如果您对所有锚点都这样做，那么它也会被用于键盘导航的 a:focus 删除。过多地依赖悬停也是非常糟糕的，因为触摸屏上不存在悬停。
I like to have all links easily distinguishable from the rest of the content. This is my personal preference:
我喜欢将所有链接与其他内容轻松区分开来。这是我个人的偏好：
2016 version
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 version
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 version
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 version
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); }
回答by Camrin Parnell
i find its always good to add
我发现添加总是好的
a { outline: none; }
{ 大纲：无；}
since some browsers add annoying outlines to links when you click them
因为某些浏览器在您单击链接时会为链接添加烦人的轮廓
