精通 CSS - 高级 Web 标准解决方案 5. 对链接应用样式

5.1 简单的链接样式 

a {
    color: red;
}

伪类连接访问器:

  • :link : 没有被访问过的链接
  • :visited : 被访问过的链接
  • :hover : 鼠标悬停处的元素
  • :active : 被激活的元素
  • :focus : 获得焦点的元素
a:link {
    color: blud;
}
a: visited {
    color: green;
}
a:hover, a:active, a:focus {
    color: red;
}

推荐的选择器的次序：

a:link, a:visited, a:hover, a:focus, a:active

Note： Lord Vader Hates Furry Animals

鼠标悬停和激活样式不起作用的示例：

a:hover, a:focus, a:active {
    text-decoration: underline;
}
a:link, a:visited {
    text-decoration: none;
}

当两个规则具有相同的特殊性时，后定义的规则优先。

5.2 让下划线更有趣

简单的链接装饰

/* 去掉下划线，链接显示为粗体 */
a:link, a:visited {
    text-decoration: none;
    font-weight: bold;
}
/* 悬停或激活时，重新显示下划线 */
a:hover, a:focus, a:active {
    text-decoration: underline;
    font-weight: bold;
}

使用边框创建下划线

/* 取消下划线，改为点线 */
a:link, a:visited {
    text-decoration: none;
    border-bottom: 1px dotted #000;
}
/* 悬停或激活时变成实线 */
a:hover, a:focus, a:active {
    border-bottom-style: solid;
}

使用图片创建下划线

a:link, a:visited {
    color: #666;
    text-decoration: none;
    background: url(/img/underline.gif) repeat-x left bottom;
}
a:hover, a:focus, a:active {
    background: url(/img/underline-hover.gif);
}

5.3 已访问链接的样式

给已访问的链接前面增加一个复选框。

a:visited {
    padding-right: 20px;
    background: url(/img/check.gif) no-repeat right middle;
}

5.4 为链接目标设置样式

使用 :target 伪类为目标元素设置样式。

<html>
    <head>
        <style>
            .comment {
                height: 500px;
                width: 500px;
                background-color: gainsboro;
                margin: 5px;
                border-radius: 5px;
                display: block;
            }
            /* 为目标元素设置黄色背景 */
            .comment:target {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <a class="go" href="#comment3">go to comment3</a>
        <a name="comment1" class="comment">
            Comment 1
        </a>
        <a name="comment2" class="comment">
            Comment 2
        </a>
        <a name="comment3" class="comment">
            Comment 3
        </a>
    </body>
</html>

5.5 突出显示不同类型的链接

在跳转到外部网站的链接前增加一个图标。
使用 [attr^=value] 属性选择器查找以 http 开头的所有链接。

a[href^="http"] {
    background: url(/img/externalLink.gif) no-repeat right top;
    padding-right: 10px;
}
/* 删除指向自己域名的链接的样式 */
a[href^="https://www.liujiajia.me"] {
    background: none;
    padding-right: 0px;
}

突出邮件链接

a[href^="mailto:"] {
    background: url(/img/email.png) no-repeat right top;
    padding-right: 10px;
}

突出显示可下载的文档（使用 [attr$=value] 属性选择器）

a[href$=".pdf"] {
    background: url(/img/pdfLink.png) no-repeat right top;
    padding-right: 10px;
}
a[href$=".doc"] {
    background: url(/img/wordLink.png) no-repeat right top;
    padding-right: 10px;
}

5.6 创建类似按钮的链接

锚是行内元素，若要实现类似的按钮的效果，需要将锚的 display 设置为 block，然后修改 width、height 和其他属性来创建需要的样式和单击区域。

a {
    display: block;
    width: 6.6em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid #66a300;
    background-color: #8cca12;
    color: #fff;
}

因为链接显示为块级元素，单击块中任何地方都会激活链接。

注意：不要使用链接更新服务器。链接应该只用于 GET 请求，绝不要用于 POST 请求。 以免被 spider 请求导致更新了服务器上的内容。

5.6.1 简单的翻转

使用 CSS 修改文本或背景色来实现简单的反转效果。

a:hover, a:focus {
    border-color: #8cca12;
    background-color: #66a300;
}

5.6.2 图像翻转

通过改变链接不同状态下的背景图片来实现按钮的动态效果。和上面的例子类似，这里改变的是背景图片而不是背景色。

a.link; a:visited {
    display: block;
    width: 203px;
    height: 72px;
    text-indent:: -1000em;
    background: url(/img/button.png) left top no-repeat;
}
a:hover, a:focus {
    background-image: url(/img/button-over.png);
}
a:active {
    background-image: url(/img/button-active.png);
}

缺点是第一次加载图片时会有短暂的延迟，造成闪烁的效果。

5.6.3 Pixy 样式的翻转

使用同一个图像并切换它的背景位置来实现翻转的效果。
单个图片减少了服务器的消耗，并且可以将所有按钮状态放在同一个地方。

a.link; a:visited {
    display: block;
    width: 203px;
    height: 72px;
    text-indent:: -1000em;
    background: url(/img/buttons.png) -203px 0 no-repeat;
}
a:hover, a:focus {
    background-position: right top;
}
a:active {
    background-position: left top;
}

5.6.4 CSS 精灵

上面的 Pixy 样式更进一步，可以将站点所有的图标都放在同一个图像上。这就是 CSS 精灵 - 包含许多不同的图标、按钮和图形的单个图像。

#nav li a {
    display: block;
    text-indent: -9999px;
    height: 119px;
    width: 100px;
    background-image: url(/img/nav.png);
    background-repeat: no-repeat;
}

#nav li.home a,
#nav li.home a:link,
#nav li.home a:visited {
    background-position: 0 0;
}

#nav li.home a:hover,
#nav li.home a:focus,
#nav li.home a:active {
    background-position: 0 -119px;
}

#nav li.who-we-are a,
#nav li.who-we-are a:link,
#nav li.who-we-are a:visited {
    background-position: -100 0;
}

#nav li.who-we-are a:hover,
#nav li.who-we-are a:focus,
#nav li.who-we-are a:active {
    background-position: -100px -119px;
}

5.6.5 用 CSS 3 实现翻转

CSS 3 包含 text-shadow、box-shadow 和 border-radius 等属性，可以创建样式很丰富的按钮，而不需要任何图像。

修改前：

a {
    display: block;
    width: 6.6em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid #66a300;
    background-color: #8cca12;
    color: #fff;
}

修改后：

a {
    display: block;
    width: 6.6em;
    height: 1.4em;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: 1px solid #66a300;
    -moz-border-redius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #8cca12;
    color: #fff;
    text-shadow: 2px 2px 2px #66a300;
    -moz-box-shadow: 2px 2px 2px #ccc;
    -webkit-box-shadow: 2px 2px 2px #ccc;
    box-shadow: 2px 2px 2px #ccc;
}

5.7 纯 CSS 工具提示 

<p>
    <a href="https://www.liujiajia.me" class="tooltip">Jia Jia<span>This website blogger</span></a> is a software engineer.
</p>
  
a.tooltip {
    position: relative;
}
a.tooltip span {
    display: none;
}
a.tooltip:hover span, a.tooltip:focus span {
    display: block;
    position: absolute;
    top: 1em;
    left: 2em;
    padding: 0.2em 06.em;
    border: 1px solid #996633;
    background-color: #FFFF66;
    color: #000;
    width: 200px;
}

效果如下：

Jia JiaThis website blogger is a software engineer.

附 1. 引用

  1. 《精通 CSS - 高级 Web 标准解决方案（第 2 版）》 - Andy Budd, Simon Collison, Cameron Moll 著；陈剑瓯 译。