Question

有许多css样本用于链接的样式颜色。

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

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

大多数情况下是否足够好？

或者可能有更好的css代码来设置链接的颜色？

Answer 1

在绝大多数情况下，这绝对是足够的。

请记住，链接样式的正确顺序是：

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          */

outline可能看起来很丑陋＆＃34;对你而言，这是一个非常重要的辅助功能。如果删除它 - 请注意提供另一种方法来正确区分当前元素（更大/更大胆的字体，高对比度背景等）。

Answer 2

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

我还希望通过添加图片（类似于维基百科中的图片）以不同方式标记指向外部网站的链接。

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);
}

Answer 3

如果您想确定自己是样式链接（而不是非链接的锚点），则应使用a:link代替a。

最后可以添加a:active。这里有一个tutorial。

Answer 4

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

我希望所有链接都能轻松与其他内容区分开来。这是我个人的偏好：

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); }

Answer 5

我发现它总是很好添加

a {outline：none; }

因为某些浏览器在点击链接时会为链接添加恼人的大纲

css链接颜色样式最佳实践

5 个答案: