怎樣用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方法

案例超連結程式碼CSS

對應CSS程式碼

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

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

#透過這樣的設定可以控制連結內的css類別名為「yangshi」超連結的樣式

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

案例超連結程式碼

CSS

對應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怎麼使用

以上是怎樣用css操作連結樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！