精通CSS-高级web标准解决方案（第2版）--读书笔记04-对链接应用样式

第5章 对链接应用样式

1、简单的样式

//点击第一个锚时，跳转到第二个锚
<p><a href="#mainContent">Skip to main content</a></p>
<h1><a name="mainContent">Welcome</a></h1>

//将未访问和已访问的链接取消默认下划线，添加点线
a:link,a:visited {
    text-decoration:none;
    border-bottom:1px dotted #000;
}
//当鼠标悬停（focus是键盘移动悬停）在链接上或激活链接时，变实线
a:hover, a:focus, a:active {
    border-bottom-style:solid;
}

2、为链接目标设置样式

在href的末尾加一个#字符，加上要链接的元素的ID，可链接到页面的特定部分

<a href="http://example.com/story.htm#comment3">
    A great comment by Simon
</a>

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

.comment:target {
    background-color: yellow; //黄色背景突出显示
    background-image: url("./img/fade.gif");
}

3、突出显示不同类型的链接

子字符串匹配[att^=val]为外部链接加图标提示这是一个外部链接
首先寻找所有链接，在右上角加上提示的小图标

a[href^="http:"] {
    background: url("./img/externalLink.gif") 
    no-repeat right top; //将图标作为背景图像应用
    padding-right: 10px; //为图标留出空间
}

但此举会选中内部链接，所以匹配指向自己域名的链接，删除外部链接图标，重新设置右内边距

a[href^="http://www.yoursite.com"],
a[href^="http://yoursite.com"] {
    background-image: none;
    padding-right: 0;
}

[att$=val]寻找特定值（如.pdf或.doc）结尾的属性，突出显示可下载的文档等

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

4、创建类似按钮的链接

将锚的display属性设置为block;修改宽高等来扩大可单击区域

a {
    display: block;
    width: 6.6em;
    line-height: 1.4;//可以使按钮中的文本垂直居中，height则不能
    text-align: center;
    text-decoration: none;
    border: 1px solid #66a300;
    background-color: #8cca12;
    color: #fff;
}

：hover实现简单翻转效果

//鼠标悬停时变橙色
a:hover {
    background-color: #f7a300;
    border-color: #ff7400;
}

图像翻转
使用背景图像而不是颜色使链接在不同操作时翻转样式

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

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

若要避免闪烁，可以将翻转状态应用于链接的父元素，例如包含它的段落

p {
    background: url("./img/buttons.png")
    no-repeat right top;
}

CSS精灵
把所有图标导航等都包含在一个图像，减少服务器请求数量，提高站点性能，提高可维护性。

用CSS3实现翻转
text-shadow:h-shadow v-shadow blur color; 水平阴影的位置，垂直阴影的位置，模糊的距离，阴影的颜色。
box-shadow: h-shadow v-shadow blur spread color inset;spread是阴影的尺寸，inset是内部阴影，outset是外部阴影

a {
    display: block;
    width: 6.6em;
    line-height: 1.4;//可以使按钮中的文本垂直居中，height则不能
    text-align: center;
    text-decoration: none;
    border: 1px solid #66a300;
    background-color: #8cca12;
    color: #fff;
    box-shadow: 2px 2px 2px #ccc;//盒子投影
    text-shadow: 2px 2px 2px #66a300;//文本投影
    border-radius: 6px;//曲线边框
}

box-reflect创建对象的倒影