關於超級鏈接的一些樣式

超級連接是指從一個網頁指向一個目標的連接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。在網頁中能成爲超級連接的元素能夠是一段文本或者是一個圖片。當瀏覽者選擇已經連接的文字或圖片後，連接目標將顯示在瀏覽器上，而且根據目標的類型打開或運行。

改變超級連接的基本樣式：網頁上使用的超級連接一般是文字或圖片。 使用文字和圖片實現超級連接的語法：

<a href=」http://www.sina.com.cn」>新浪網</a>

<a href=」picture.jpg」><img src=」picture.jpg」 /></a>

超連接僞類表

a:link 設置超連接在未被訪問前的樣式

a:active 設置超連接在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式

a:visited 設置超連接在其連接地址已被訪問過期的樣式

a:hover 設置超連接在其鼠標懸停時的樣式

僞類的CSS樣式定義：

<style type=」text/css」>

a:link{color:green;} /*設置超連接的未被訪問前文字顏色爲綠色*/ a:active{color:red;} /*設置超連接在被用戶激活時文字顏色爲紅色*/ a:visited{color:orange;} /*設置超連接已被訪問過期文字的顏色爲橘色*/ a:hover{color:blue;} /*設置超連接在其鼠標懸停時文字的顏色爲藍色*/ </style>

在默認狀況下，文字做爲超級連接時會帶有下劃線，用於提示該文字可連接。若要消除該超級連接的下劃線，就要將text-decoration屬性設置爲none。

使用text-decoration屬性設置超級連接無下劃線：

a{text-decoration:none;} /*設置超級連接無下劃線*/

超級連接背景圖的應用：使用background給超級連接添加背景圖片。 使用background給超級連接添加背景圖片：

a{text-decoration:none; /*設置超級連接無下劃線。

url(dot.jpg ) repeat-x bottom; /*使用圖片dot.jpg爲超級連接的背景圖片，以橫向平鋪，底部對齊。*/

}

超級連接翻轉效果：除了能給a標籤設置背景圖片，也能給超級連接的僞類設置背景圖片。若給a:hover設置背景圖片，那麼當鼠標滑過該超級連接就能使圖片產生翻轉效果。 使用顏色實現超級連接的翻轉效果：

a{red;} /*設置超級連接背景顏色爲紅色*/

a:hover{blue;} /*設置鼠標滑過超級連接時背景顏色爲藍色*/

使用背景圖片實現超級連接翻轉效果：使用背景圖片同超級連接的翻轉效果須要準備兩張圖片。一張圖片應用在a標籤上，另外一張圖片應用在hover僞類上。當鼠標沒有接觸超級連接時，超級連接的背景就是應用a標籤上的背景圖片；當鼠標滑過超級連接時，背景圖片會更換爲應用在hover僞類上的背景圖片，從而實現翻轉效果。

使用背景圖片實現超級連接翻轉效果：

a{url(p_w_picpath1.jpg ) repeat-x;} /*設置超級連接的背景圖片爲p_w_picpath1.jpg，橫向方式平鋪。*/

a:hover{url(p_w_picpath2.jpg ) repeat-x;} /*設置鼠標滑過超級連接時背景圖片爲p_w_picpath2.jpg，橫向方式平鋪。