這篇文章將詳細的講解透過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程式碼
.yangshi a{color:#333;text-decoration:none; }
.yangshi a:hover {color:#CC3300;text-decoration:underline ;}
這裡值得注意的是a.yangshi與.yangshi a的樣式css代碼區別
這裡就是常css來對超鏈接樣式設置的方法,有需要的朋友可以保存一下,也請大家持續關注本站的其他更新。
相關閱讀:
以上是怎樣用css操作連結樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!