一. 基于层叠对链接选择器进行排序:
L :link V :visited H :hover F :focus A a:active
锚链接选择器:L、V。只适用于锚点。
动态选择器:H、F、A。兼容性问题考虑。
选择器的次序之所以重要是由CSS的层叠引起的,当两个选择器具有相同的特殊性时,后定义的会覆盖前面的。
二. 创建应用了样式的链接下划线:
1.简单的:加粗、加下划线、自定义下划线的样式(变成虚线)
2.奇特的:添加背景图片。
三. 使用属性选择器对外部链接应用样式:
:target伪类为目标元素设置样式。IE9及其以上的现代浏览器支持。
以...开始:[attr^=val] 例如:a[href^="http:"],对要链接到外部的链接进行标记,也是对用户的提示
以...结尾:[attr$=val] 例如:a[href$=".doc"],对要下载的文档进行标记,提醒用户点击即进行下载文件
四. 使链接表现得像按钮:
display: block;
1. 简单的翻转:通过改变背景颜色或者边框颜色、字体颜色等
2. 图像翻转:通过改变背景图片-------这有个问题:在浏览器第一个加载鼠标悬停的图像时有短暂的延迟,会造成闪烁效果。
3. Pixy样式的翻转:解决上述的问题,使用单个图像(好处:减少了服务器请求的数量)。
在IE下仍然会向服务器请求新的图像,这会产生轻微的闪烁。为了避免闪烁,可以将其应用到父元素;另一种避免闪烁的办法是在IE专用的css文件中包含一下代码:
html { filter: expression(document.execCommand("BackgroundImageCache",false,true)); }
4. CSS精灵:包含许多不用的图标、按钮或图形的单个图像。-----好处:减少web浏览器发出的服务器请求,显著加快下载速度;另外,将所有按钮、图片和各种图形集中在一个地方可以提高可维护性。
5. 用CSS3实现翻转:两个新属性 gradient 和 box-reflect
五. 创建已访问链接样式:要注意在链接被访问后的样式,这样可以避免不必要的“回溯”操作。
六. 创建纯CSS的工具提示:可以利用title属性,也可以自己写利用display:block/none