css超連結樣式

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方法

案例超連結代碼<a href="http://www.divcss5.com/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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樣式來控制超連結的樣式

案例超連結代碼<div class="yangshi"><a href="http://www.divcss5.com/" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >CSS</a></a>

對應CSS代碼

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

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

這裡值得注意的是a.yangshi與.yangshi a的樣式css代碼差別

這裡就是常見的通過div css來對超連結樣式設定案例及分析。經驗總結：

1.當通過css設定将a标簽的展現樣式修改為block時，依舊隻能在滑鼠觸碰到文字時才能出發跳轉操作（firefox類型浏覽器在塊區域内都可以觸控，但是IE不能），為相容IE的塊級觸控可将a元素設定高度;

2.關于各狀态的css設定順序，遵從先普遍再特殊的規律即a:link,a:visited,a:hover,a:active一次設定，防止狀态之間的幹擾

3.css樣式中border的範圍為所在邊到中心的一個三角形