首頁 >web前端 >html教學 >整理關於a標籤的使用方法

整理關於a標籤的使用方法

零下一度原創: 2017-06-24 14:05:323127瀏覽

這是個人在做網站的時候整理的關於a標籤的使用方法，整理一下，方便下次使用。

一、a超連結的程式碼

DIV+CSS

#解析如下：

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程式碼區別

##三、基礎認知

介紹這4個常見偽類作用與解釋

1、a:link

設定a物件在未被存取前（未點擊過和滑鼠未經過）的樣式表屬性。也就是html a錨文字標籤的內容初始樣式。

2、a:hover

設定物件在其滑鼠懸停時的樣式表屬性，也就是滑鼠剛經過a標籤並停留在A連結上時樣式。 3、a:active

設定A物件在被使用者啟動（在滑鼠點選與釋放之間發生的事件）時的樣式表屬性。也就是滑鼠左鍵點擊html A連結物件與釋放滑鼠右鍵之間很短暫的樣式效果。

4、a:visited

設定a物件在其連結位址已被存取過時的樣式表屬性。也就是html a超連結文字被點擊訪問過後的CSS樣式效果。

四、應用程式用法案例
我們設定一個超鏈接，對其設定CSS樣式，透過CSS A設定其四種樣式效果。透過一個簡單的對文字設定css a樣式情況了解學習CSS a錨文本樣式。 1、案例css代碼
style>
.divcss5 a:link{ color:#F00}/* 連結預設為紅色 */
.divcss5 a:hover{ color:#000} /* 滑鼠停留黑色 */
.divcss5 a:active{ color:#03F}/* 滑鼠點擊與釋放時藍色 */
##.divcss5 a:visited{ color:#F0F}/* 造訪過為粉紅 */ ##/* divcss5物件內 a超連結設定樣式 */ /* divcss5物件內 a超連結設定樣式 */