34

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

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

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

对于大多数情况来说是否足够好？

或者也许存在更好的css代码来设置链接的颜色？

4

5 回答 5

47

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

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

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对您来说可能看起来“丑陋”，但这是一个非常重要的可访问性功能。如果您删除它 - 请注意提供一种替代方法来正确区分当前元素（更大/更粗的字体、高对比度背景等）

于 2012-08-14T15:28:24.933 回答
5

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

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

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-14T15:32:01.253 回答
4

如果您想确定您正在样式化链接（而不是不是链接的锚点），您应该使用a:link而不是a.

你可以a:active在最后添加。在这里你有一个教程。

于 2012-08-14T15:25:33.367 回答
3

永远不要删除那个轮廓，或者至少只为 a:active 删除它。如果你对所有锚点都这样做，那么它也将被删除用于键盘导航的 a:focus。过度依赖悬停也是非常糟糕的，因为触摸屏上不存在悬停。

我喜欢让所有链接都易于与其他内容区分开来。这是我个人的偏好：

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-28T05:54:33.350 回答
-3

我发现它总是很好添加

一个{大纲：无；}

因为某些浏览器会在您单击链接时为链接添加恼人的轮廓

于 2012-08-14T15:26:11.637 回答