首頁 > web前端 > css教學 > 主體

怎樣用css操作連結樣式

php中世界最好的语言
發布: 2017-11-22 13:45:38
原創
2017 人瀏覽過

這篇文章將詳細的講解透過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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板