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

---

可以个链接加背景图像

---

1. 链接后加"#id",直接跳转到页面指定id处
2. .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。

---

翻转效果

1. 创建三个背景图像，用于按钮的不同状态下
   <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>
2. 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:

1. 在建立网站前先创建精灵图片
2. 用top和left定位，别用bottom与right(图片大小改变时，会有错误)
3. 为每张图片流出足够空间