怎么用CSS控制超鏈接

這篇文章主要介紹“怎么用CSS控制超鏈接”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么用CSS控制超鏈接”文章能幫助大家解決問題。

什么是超鏈接？

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

超鏈接的代碼

<ahrefahref="http://www.divCSS5.com/"target="_blank"  title="關于divCSS的網站">DIV+CSS</a>

解析如下：

href后跟被鏈接地址目標網站地址這里是http://www.neiyidaogou.com/
target
_blank--在新窗口中打開鏈接
_parent--在父窗體中打開鏈接
_self--在當前窗體打開鏈接,此為默認值
_top--在當前窗體打開鏈接，并替換當前的整個窗體(框架頁)

◆title后跟鏈接目標說明，也就是超鏈接被鏈接網址情況簡要說明，或標題

CSS可控制超鏈接樣式-CSS鏈接樣式如下

a:active是超級鏈接的初始狀態
a:hover是把鼠標放上去時的狀況
a:link是鼠標點擊時
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方法

案例超鏈接代碼

<ahrefahref="http://www.divCSS5.com/"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樣式來控制超鏈接的樣式

案例超鏈接代碼

<divclassdivclass="yangshi"> <ahrefahref="http://www.divCSS5.com/"> CSS</a> </a>

對應CSS代碼

.yangshia{color:#333;text-decoration:none;}  .yangshia:hover{color:#CC3300;text-decoration:underline;}

這里值得注意的是a.yangshi與.yangshia的樣式CSS代碼區別，這里就是常見的通過divCSS來對超鏈接樣式設置案例及分析。

關于“怎么用CSS控制超鏈接”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。