精通CSS-链接样式

1. 简单的链接样式

    对链接应用样式最容易的方式是使用锚类型选择器 。如： 以下规则使

   a  {color:red; }

   但是，锚可以作为内部引用，也可以作为外部链接，所以使用类型选择器不总是理想的。例如：下面的第一个锚包含一个片段标识符，当用户单击这个锚时，页面将调到第二个锚的位置:

    <p><a href="#mainContent">Skip to main content</a></p>

    .....

    <h1><a name="mainContent">Welcome</a></h1>

  虽然只想让真正的链接变成红色，但是标题的内容也成了红色的。

   所以我们需要使用两个特殊的选择器，称为链接伪类选择器。：link伪类选择器用来寻找没有被访问的链接，:visited伪类选择器用来寻找被访问过的链接。所以，在下面的示例中，所有没有被访问过的链接将是蓝色的，所有被访问过的链接将是绿色的:

   a:link {color:blue;}

  a:visited  {color:green}

  还有另外两个伪类选择器  :hover   :active

  :hover动态伪类选择器用来讯咋好鼠标悬停处的元素，

  : active动态伪类选择器用来寻找被激活的元素。

   对于链接来说，激活发生在链接被单击时。

  a:hover,  a:focus  {color: red;}

  其他元素也可以使用:hover      :active  或 :focus伪类选择器。例如，可以在表格行上添加 :hover伪类，在提交按钮上添加 ：active伪类，在输入框上添加: focus伪类，从而突出显示各种交互形式。IE7和更低版本不支持在除链接之外的其他元素上使用伪类选择器，但是所有现代浏览器都支持。

 tr:hover {

  background:yellow;

            }

input[type='submit'];active  {

  background:yellow;

          }

input : focus  {

    background:yellow;

         }

去掉下划线

 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   

2.创建类似按钮的链接

锚是行内元素，这意味着只有在单击链接的内容时它们才会激活。但是，有时候希望实现更像按钮的效果，有更大的可单击区域。为此，可以将锚的display属性设置为block,然后修改width,height和其他属性来创建需要的样式和单击区域。 

a  {

   display :block;

  width: 6.6em;

  line-height: 1.4;

  text-align: center;

  text-decorating:none;

  border: 1px solid #66a300;

  background-color:  #8cca12;

  color: #fff;

    }

由于链接现在显示为块即元素，单击块中的任何地方都会激活链接。

简单的翻转

a:hover, a:focus  {

    background-color:  #f7a300;

     border-color:  #ff7400;

   }

图像翻转

对于比较复杂的按钮，可能需要使用背景图像。创建了3个按钮图像，一个用于默认状态，一个用于鼠标悬停和焦点状态，一个用于激活状态

a:link, a:visited {

  display: block;

  width:203px;

  height:72px;

  text-indent: -1000em;

  background:  url(/img/button.png)  left top no-repeat;

 }

a:hover,  a:focus {

background-image:url(/img.button-over.png);

 }

a:active {

background-image: url(/img/button-active.png);

}

这个示例中，把按钮文本放在图像上，然后使用大的负文本缩进隐藏锚文本。

用css3实现翻转

CSS3包含text-shadow, box-shadow  和border-radius等属性，可以创建样式很丰富的按钮，而不需要使用任何图像。

a{

   display : block;

    width: 6.6em;

    height:  1.4em;

    line-height:1.4;

    text-align: center;

    text-decoration:none;

    border: 1px solid #66a300;

   background-color: #8cca12;

   color: #fff;

   }

接下来，添加曲线边框和投影。可以让按钮文本有点儿投影。

a {

   dispaly:  block;

   width: 6.6em;

   height: 1.4em;

   line-height:1.4;

   text-align: center;

   text-decoration: none;

   border:1px solid #66a300;

   -moz-border-radius: 6px;

   -webkit-border-radius: 6px;

   border-radius: 6px;

   background-color: #8cca12;

   color: #fff;

   text-shadow: 2px 2px 2px  #66a300;

   -moz-box-shadow: 2px 2px 2px #ccc;

  -webkit-box-shadow:  2px 2px 2px #ccc;

  box-shadow: 2px 2px 2px #ccc;

   }

纯CSS工具提示

  工具提示是当鼠标悬停在具有title属性的元素上时一些浏览器弹出的黄色小文本框。一些开发人员结合使用JS和CSS创建了样式独特的自定义工具提示。但是，通过使用CSS定位技术，可以创建纯CSS工具提示。这种技术需要符合标准的现代浏览器(FireFox)才能正确地工作。因此，它不是日常使用的技术。但是，它演示了高级CSS的能力。

HTML:

 <p>

 <a href="http://www.andybudd.com/"  class="tooltip">

 Andy Budd<span>(This website rocks)</span></a>is a web developer based in Brighton England.

  </p>

  这个链接设置的类名为tooltip，以便从其他链接中区分出来。在这个链接中，添加希望显示为链接文本的文本，然后添加包围在span中的工具提示文本。

首先需要做的是将锚的position属性设置为relative.这样就可以相对于父元素的位置对span的内容进行绝对定位。

 a.tooltip{

  positon:relative;

  }

  a.tooltip span {

 dispaly: none;

  }

 当鼠标悬停在这个锚上时，表示希望显示span的内容。方法是将span的display属性设置为block,但是只有鼠标悬停在这个链接上时才这样做。

 为了让span的内容出现在锚的右下方，需要将span的positon属性设置为absolute，并且将它定位到距离锚顶部1em,距离左边2em的定位。

  a.tooltip  : hover span {

  display: block;

  positon: absolute;

  top: 1em;

  left: 2em;

  }

绝对定位元素的定位相对于最近的已定位祖先元素(如果没有，就相对于根元素。)