CSS对链接应用样式

参考：

• 《精通CSS高级Web标准解决方案（第2版）》
• http://www.w3school.com.cn/html/html_links.asp
• http://www.w3school.com.cn/tags/tag_a.asp

1.<a>基础

注意："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

常用属性：

属性名	属性值	说明
href	内部链接、外部链接、同一个页面中不同位置	规定链接指向的页面的 URL。
name		HTML5 中不支持。规定锚的名称。创建文档内的书签。
rel		规定当前文档与被链接文档之间的关系。
target	_blank、 _parent、 _self、 _top 、framename	规定在何处打开链接文档。

  需要说明的：

1. <a> 元素最重要的属性是 href 属性，它指示链接的目标。如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
2. 被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
3. 在 HTML 4.01 中，<a> 标签可以是超链接或锚。在 HTML5 中，<a> 标签始终是超链接，但是如果未设置 href 属性，则只是超链接的占位符。
4.  name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

例1：指向本网站中的一个页面的链接。

<a href="/index.html">本文本</a> 

例2：指向万维网上的页面的链接。

<a href="http://www.microsoft.com/">

例3：链接到同一个页面的不同位置，参考：http://www.w3school.com.cn/tiy/t.asp?f=html_link_locations

<a href="#mainContent">Skip to main content</a>
<h1><a name="mainContent">Welcome</a></h1>

例4：在新窗口中打开链接

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

2.对<a>添加样式

2.1  简单的链接样式

    在a:link和a:visited时去掉默认下划线，在a:hover、a:focus、a:active时加上下划线。

/*简单的链接样式*/
a:link,a:visited {
    text-decoration: none;
}
a:hover,a:focus,a:active {
    text-decoration: underline;
}

      注意：选择器的次序非常重要，如果顺序改为下面，那么a:link,a:visited样式将会覆盖a:hover,a:focus,a:active，这是因为当两个规则特殊性相同时，后定义的规则优先（后来居上）。

a:hover,a:focus,a:active {
    text-decoration: underline;
}
a:link,a:visited {
    text-decoration: none;
}

    因此最好依照以下次序应用链接样式： a:link，a:visited，a:hover，a:focus，a:active

    关于几个伪类选择器的说明：

     :link和:visited只作用于<a>，称为链接伪类选择器。:hover，:active，:focus可以作用在其他元素上，称为动态伪类选择器。

1. :link 寻找没有被访问过的链接
2. :visited 寻找被访问过的链接
3. :hover 寻找鼠标悬停处的元素
4. :active 寻找被激活的元素，对于链接来说，激活发生在链接被单击时。
5. :focus 通过键盘移动到链接上时。一般情况下，最好让a:hover和a:focus的样式相同，提高页面的可访问性。

2.2 创建类似按钮的链接

   

<a href="javasript:">Book now</a>

a {
      display: block;
      width:6.6em;
      line-height: 1.4;
      text-align: center;
      text-decoration: none;
      background-color: #8cca12;
      color:#fff;
}
a:hover,a:focus,a:active {
      background-color: #f7a300;
      border-color: #ff7400;
}

2.3  用CSS3实现翻转

1. -moz：firefox浏览器私有属性
2. -ms：IE浏览器私有属性
3. -webkit：chrome、safari私有属性
4. -o：opera私有属性

http://www.w3school.com.cn/css/css_selector_child.asp

在2.2代码的基础上添加border-radius、box-shadow、text-shadow来实现圆角按钮样式的链接。

 a {
       display: block;
       width:6.6em;
       line-height: 1.4;
       text-align: center;
       text-decoration: none;
       border:1px solid #66a300;
       background-color: #8cca12;
       color:#fff;
       text-shadow: 2px 2px 2px #66a300;
       border-radius: 6px;
       -moz-border-radius: 6px;
       -webkit-border-radius: 6px;
       box-shadow: 2px 2px 2px #ccc;
       -moz-box-shadow: 2px 2px 2px #ccc;
       -webkit-box-shadow: 2px 2px 2px #ccc;
}
a:hover,a:focus,a:active {
       background-color: #f7a300;
       border-color: #ff7400;
}

2.4 纯CSS工具提示

      这种方法不是日常的技术，因为需要符合标准的现代浏览器（比如Firefox）才能正确地工作。这只是一个演示，说明了高级CSS的强大。实现工具提示的常规技术是结合javascript和CSS来创建。

<p>
     <a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span>(This is website rocks)</span></a>is a web developer based in Brighton England.
</p>

a.tooltip {
      position: relative;
}
a.tooltip>span {
     display: none;
}
a.tooltip:hover span,a.tooltip:focus span {
     display: block;
     position: absolute;
     top:1em;
     left:2em;
     padding: 0.2em 0.6em;
     border: 1px solid #996633;
     background-color: #FFFF66;
     color:#000;
}