精通CSS

精通CSS

第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=".htm#comment3">A great comment by Simon
</a>

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

ment: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^=""],
a[href^=""] {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创建对象的倒影