Chapter 5 对链接的样式
一、简单的链接样式
a{color: red}
<a></a>中的字体也会变红
所以，最好使用伪类。
a:link{}
a:hover{}
a:visited{}
a:active{}(单击时)
a:focus{}（获得焦点[并不了解什么意思]，在设置hover时,最好加上focus）
睡了，明天继续
一般来说，大家喜欢去下划线，变黑体
a:link,a:visited{text-decoration:none;font-weight:bold;}
a:hover,a:focuse,a:active{text-decoration:underline;font-weight:bold;}
h或加点线：{border-bottom:1 px dotted #000}
由于层叠，后边的代码会覆盖前面的
所以，应该按以下的顺序
link>visited>hover>focus>active
可以个链接加背景图像
- 链接后加"#id",直接跳转到页面指定id处
-
.comment:target{}target伪类可以设置跳转点属性，标黄，或者可以用一个从黄色渐变到无色的图片
外链上右侧加一个图片，指示会打开新的窗口
1.给每个外链一个"class"，CSS中在链接右部空出一定距离，增加一个外链指示图
2.使用属性选择器
a[href^="http:"]:会找到所有a的href中以"http:"开头的链接
[att^="val"]:定位到"att"属性中有以"val"开头的定义
[att$="lue"]:定位到"att"属性中有以"lue"结尾的定义
warning!
小心指向站内的绝对链接被覆盖，需要重新设定指向站内的绝对链接的属性。
让链接从一个行内元素变成一个按钮形式（单击文字周边也能跳转）
<pre>
a {
display: block;
width: 6.6em;
line-height: 1.4;
text-decoration: none;
text-align: center;
border:1px solid #66a300;
background-color: #8cca12;
color: #fff;
}
</pre>
tips:
用line-height控制高度可以让文本垂直居中，如果用height,需要压低内边距模拟垂直居中。但是当文本换行时，用line-height时按钮高度会是所需高度的两倍。
Warning!
Google加速程序会无意删除内容（并不懂这是什么鬼），所以，链接只能用于GET请求，不能用于POST。
翻转效果
- 创建三个背景图像，用于按钮的不同状态下
<pre>
a:link,a:visited{
display: block;
width: 203px;
height: 72px;
text-decoration: none;
text-indent: -1000em;/隐藏文本/
background: url(images/button.gif) left top no-repeat;
}
a:hover,a:focus{
background-image: url(images/button-over.gif);
}
a:active{
background-image: url(images/buttom-active.gif);
}
</pre> - Pixy法
把以上三张图片P成水平并列的一张图
每次都加载同一张图，但是图片对其方式不同
<pre>
a:link,a:visited{
display: block;
width: 203px;
height: 72px;
text-decoration: none;
text-indent: -1000em;/隐藏文本/
background: url(images/pixy-rollover.gif) right no-repeat;
}
a:hover,a:focus{
background-position: left;
}
</pre>
CSS精灵（CSS sprites）
把许多图片放到一张图片，每次加载图片时，定位到需要用的部分。
tips:
- 在建立网站前先创建精灵图片
- 用top和left定位，别用bottom与right(图片大小改变时，会有错误)
- 为每张图片流出足够空间
