怎樣用css操作鏈結接樣式

這篇文章將詳細的講解通過css來控制超連結樣式。我們主要講文字類型的超連結，包括超連結有無底線、超連結顯示文字顏色等樣式。

什麼是超連結？

超連結通俗地指從一個網頁指向一個目標的串連關係,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個檔案，甚至是一個應用程式。而在一個網頁中用來超連結的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經連結的文字或圖片後,連結目標將顯示在瀏覽器上，並且根據目標的類型來開啟或運行。

超連結的代碼

<a href="http://www.php.cn/" target="_blank" title="關於div css的網站">DIV+CSS</a>

解析如下：

href 後跟被連結地址目標網站地址這裡是http://www.php.cn/

target

_blank -- 在新視窗中開啟連結

_parent -- 在父表單中開啟連結

_self -- 在當前表單開啟連結,此為預設值

_top -- 在當前表單開啟連結，並替換當前的整個表單(架構頁)

title 後跟連結目標說明，也就是超連結被連結網址情況簡要說明，或標題

CSS可控制超連結樣式-css連結樣式如下

a:link是超級連結的初始狀態

a:hover是把滑鼠放上去時懸停的狀況

a:active 是滑鼠點擊時

a:visited是訪問過後的情況

1、通常對全站超連結樣式化方法

a{color:#333;text-decoration:none; } //對全站有連結的文字顏色樣式為color:#333;並立即無底線text-decoration:none;

a:hover {color:#CC3300;text-decoration:underline;}//對滑鼠放到超連結上文字顏色樣式變為color:#CC3300;並文字連結加底線text-decoration:underline;

2、通過連結內設定類控制超連結樣式css方法

案例超連結代碼<a href="http://www.php.cn/" class="yangshi">CSS</a>

對應CSS代碼

a.yangshi{color:#333;text-decoration:none; }

a.yangshi:hover {color:#CC3300;text-decoration:underline;}

通過這樣的設定可以控制連結內的css類名為“yangshi”超連結的樣式

3、通過對應超連結外的父級的css類的css樣式來控制超連結的樣式

案例超連結代碼<div class="yangshi"><a href="http://www.php.cn/">CSS</a></a>

對應CSS代碼

.yangshi a{color:#333;text-decoration:none; }

.yangshi a:hover {color:#CC3300;text-decoration:underline;}

這裡值得注意的是a.yangshi與.yangshi a的樣式css代碼區別

這裡就是常css來對超連結樣式設定的方法，有需要的朋友可以儲存一下，也請大家持續關注本站的其他更新。

相關閱讀：

html為什麼有亂碼以及解決方案

Div和CSS 該怎樣學習

css的position怎麼使用