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;
}
絕對定位元素的定位相對於最近的已定位祖先元素(如果沒有，就相對於根元素。)