第五章 对链接应用样式
1.简单的连接样式
锚可以作为内部引用,也可以作为外部链接,所以使用类型选择器总是不理想的,所以提供CSS提供了伪类选择器.
- :link 用来寻找没有被访问过的链接
- :visited 用来寻找被访问过的链接
- :hover 悬停,为了提高页面的可访问性,在定义悬停时,最好添加:focus伪类,这样通过键盘点击链接时,与鼠标一样.
- :active 被激活
a:link{
color: blue;
}
a:visited{
color: red;
}
a:hover,a:focus{
color: yellow;
}
a:active{
color: rgb(223, 8, 115);
}
以上的次序不可乱
2.让下划线更加有趣
奇特链接下划线
- 通过使用图像创建链接下划线
.sty2:link, .sty2:visited{
color: blueviolet;
text-decoration: none;
background: url("./images/1.jpg") repeat-x left bottom;
}
- 已访问的链接的样式
3.为链接目标设置样式
除了链接到特定的文档之外,还可以使用包含片段标识符的链接到页面的特定部分
- 实现方法:在href的末尾加一个#字符,然后加上要链接的元素的ID,并允许使用:target伪类为目标元素设置样式.
<a href = "baidu.com/story.htm#comment3">
文本
</a>
.comment:target{
background-color:yellow;
}
4.突出显示不同的链接
- 让用户是自己选择离开当前的站点,还是在新窗口或标签页中打开这个链接,为此可以在外部链接旁加个小图标.
- 方法:匹配指向自己域名的链接,删除外部链接图标,重新设置右内边距.
a[href^ = "http://www.yoursite.com"], a[href^ = "http://yoursite.com"]{ backgroung-iamge:none; padding-right:0; }
5.突出显示可下载的文档和提要
- CSS可以帮助区分类型链接,使用[att$=val]属性选择器,寻找特定值结尾的属性,比如.pdf或.doc--添加不同的图标显word文档和PDF
6.创建类似按钮的链接
锚是行内元素,意味着只有在单击链接内容时他们才会激活,但是有时候希望实现按钮的效果,有更大的单击区域.因为可以这样设置:
a{
display:block;
width:2em;
line-height:1.4;
text-align:center;
text-decoration:none;
border:1px solid #66a300;
background-color:#8cca12;
color:#fff;
}
-
如果要选用这种技术,要确保元素时真正的链接,而不是更i性能服务器,否则可能会删除数据.链接应该只用于GET请求,绝不要用于post请求.
-
简单的翻转:hover
a:hover,a:focus{
background-color: #f7a300;
border-color: #ff7400;
}
- 图像 翻转 使用背景图像而不是背景颜色
- pixy样式的翻转
- 多图像:会闪烁,一种方法:不切换多个背景图像,而是使用同一个图像,并切换他的背景位置,好处时减少了服务器请求的数量,而且,可以将所有按钮状态放在一个地方,但是还是有点儿闪烁,所以仍需将翻转图像应用于链接的父元素,消除另一种方式时在IE专用的CSS文件中包含以下代码:
html{
filter:expression(document.execCommand("BackgroundImageCache",false,true));
}
