福彩幸运武林开奖 ?
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > DIV+CSS實例 >

CSS A link hover active visited偽類超鏈接錨文本樣式教程

CSS控制超鏈接樣式-css超鏈接

本文將講解通過css樣式或通過css來控制超鏈接樣式。這里主要講文字類型的超鏈接,超鏈接的樣式包括通過CSS來控制設置超鏈接有無下劃線、超鏈接文字顏色等樣式。

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

超鏈接的代碼
<a href="http://www.mcowk.com.cn/" target="_blank" title="關于div css的網站">DIV+CSS</a>
解析如下:
href 后跟被鏈接地址目標網站地址這里是http://www.mcowk.com.cn/
target
_blank -- 在新窗口中打開鏈接
_parent -- 在父窗體中打開鏈接
_self -- 在當前窗體打開鏈接,此為默認值
_top -- 在當前窗體打開鏈接,并替換當前的整個窗體(框架頁)

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

CSS可控制超鏈接樣式-css鏈接樣式如下
a:link是超級鏈接的初始狀態
a:hover是把鼠標放上去時懸停的狀況
a:active 是鼠標點擊時
a:visited是訪問過后的情況

一、簡單超鏈接樣式案例   -   TOP

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.mcowk.com.cn/" 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.mcowk.com.cn/">CSS</a></a>
對應CSS代碼
.yangshi a{color:#333;text-decoration:none; }
.yangshi a:hover {color:#CC3300;text-decoration:underline;}

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

你可能希望了解html a,html超鏈接,html錨文本

這里就是常見的通過div css來對超鏈接樣式設置案例及分析。

以下為詳細CSS A超鏈接錨文本樣式教程

css a:link hover active visited偽類樣式教程篇

DIVCSS5這里講解html a超鏈接標簽,a:hovera:linka:activea:visited偽類樣式經驗教程,通過CSS設置這幾種a錨文本的CSS樣式。無論控制超鏈接文本文字各種鼠標事件樣式,可以控制超鏈接對象背景圖片的變化。

擴展閱讀:
1、html a標簽語法結構
2、css a錨文本樣式

二、基礎認識   -   TOP

介紹這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樣式效果。

三、應用用法案例   -   TOP

我們設置一個超鏈接,對其設置CSS樣式,通過CSS A設置其四種樣式效果。通過一個簡單的對文本設置css a樣式情況了解學習CSS a錨文本樣式。

1、案例css代碼

  1. <style> 
  2. .divcss5 a:link{ color:#F00}/* 鏈接默認為紅色 */ 
  3. .divcss5 a:hover{ color:#000}/* 鼠標懸停黑色 */ 
  4. .divcss5 a:active{ color:#03F}/* 鼠標點擊與釋放時藍色 */ 
  5. .divcss5 a:visited{ color:#F0F}/* 訪問過為粉紅 */ 
  6. /* divcss5對象內 a超鏈接設置樣式 */ 
  7. </style> 

2、案例html代碼

  1. <div class="divcss5"> 
  2. DIVCSS5關于 
  3. <a href="http://www.mcowk.com.cn/shili/s57.shtml">CSS a樣式</a>案例 
  4. </div> 

這里為了排版截圖,特地對有的地方進行換行

3、案例軟件中截圖

css設置a鏈接樣式截圖
CSS A鏈接樣式案例截圖

4、瀏覽器實際各種樣式截圖

瀏覽器中各種css A樣式截圖
瀏覽器中各種A樣式截圖

小結:
一般a:active樣式效果是瞬間效果觀察不了,所以使用時候可以不用設置。同時超鏈接默認情況下是自動加下劃線的,如果要去掉或再增加下劃線可以設置css text-decorationhttp://www.mcowk.com.cn/rumen/r129.shtml)。

擴展閱讀:
1、css 下劃線
2、css text-decoration下劃線
3、html a標簽
4、a標簽結構

四、常用CSS A應用   -   TOP

為了大家靈活掌握css a錨文本樣式設置,我們整理三種使用情況的A超鏈接樣式控制設置案例,分別為:帶超鏈接文字本身css color顏色樣式與訪問后顏色樣式相同,沒有下劃線,鼠標懸停時候文字顏色color變化,并添加下劃線;未訪問時候帶超鏈接文本文字顏色是一種并且沒有下劃線,鼠標懸停經過時候是另外一種顏色有下劃線,激活或訪問(過)后文本顏色為另外一種并有下劃線(三種情況三種顏色);還有一種情況,本身一個圖片背景,鼠標經過懸停另外一種背景圖片。通過這三種情況案例教程讓大家通過對css a錨文本超鏈接樣式控制掌握其知識。

1、帶超鏈接文字本身css color顏色樣式與訪問后顏色樣式相同,沒有下劃線,鼠標懸停時候文字顏色color變化,并添加下劃線

1)、CSS樣式代碼:

  1. .divcss5 a{ color:#F00; text-decoration:none}/* 鏈接默認為紅色 */ 
  2. .divcss5 a:hover{ color:#000; text-decoration:underline}/* 鼠標懸停黑色 */ 
  3. /* divcss5對象內 a超鏈接設置樣式 */ 
  4. 這里可以不用a:link偽類,可以直接對象“CSS命名+空格+a{}”即可。 

2)、案例html div代碼片段:

  1. <div class="divcss5"> 
  2. DIVCSS5關于 
  3. <a href="http://www.mcowk.com.cn/shili/s57.shtml">CSS a樣式</a>案例 
  4. </div> 

3)、截圖

對文字加超鏈接設置其css樣式截圖
css a樣式說明圖

瀏覽器測試結果需要大家動手測試觀察,這樣利用學習與掌握,DIVCSS5在這里就不給出瀏覽器測試結果截圖了。

2、未訪問時候帶超鏈接文本文字顏色是一種并且沒有下劃線,鼠標懸停經過時候是另外一種顏色有下劃線,激活或訪問(過)后文本顏色為另外一種并有下劃線(三種情況三種顏色)

此實例與我們教程第二大點“二、應用用法案例”相同,大家可以查看根據實例進行實踐,此案例提到了css下劃線樣式設置,大家可靈活試著CSS添加下劃線text-decoration:underline)或CSS去掉下劃線text-decoration:none)應用。

3、本身一個圖片背景,鼠標經過懸停另外一種背景圖片
此種情況常常用于網站導航條,本身一種CSS背景樣式,鼠標經過背景圖片又變另外圖片。

擴展閱讀:
1)、html img圖片
2)、css 背景
3)、css background
4)、css 背景顏色
5)、css 背景圖片

css a鏈接背景圖片變化案例效果圖
A超鏈接設置背景圖片變化效果圖

這個案例我們需要準備2張圖片一張是鼠標未經過時候圖片,另外一張鼠標經過時候圖片。

DIVCSS5提供給大家

案例素材圖片截圖
A鏈接案例需要準備素材圖片截圖

一張命名為a.gif,另外一張命名hover.gif
(這里顯示擴展名“.gif”)

圖片打包下載:http://pan.baidu.com/share/link?shareid=313316&uk=268571848

具體實踐步驟如下:
1)、新建一個文件夾桌面,命名為"divcss5"

新建文件夾DIVCSS5
新建文件夾截圖

2)、打開新建的“divcss5”文件夾,再里新建一個命名為“images”裝圖片文件夾

新建裝圖片素材images文件夾
新建裝圖片images文件夾截圖

3)、將下載2張圖片素材放入“images”文件夾內

拷入圖片素材到images文件夾
圖片素材放入images文件夾里

4)、DW新建一個html文件并且命名為index.html,保存于“divcss5”文件夾下

新建html文件
新建html文件夾

5)、CSS代碼片段

  1. li,ul{ border:0; padding:0; margin:0; list-style:none} 
  2. /* CSS初始化標簽 */ 
  3. ul.divcss5-img{ margin-top:10px} 
  4. ul.divcss5-img li{text-align:center; float:left;width:121px; 
  5. height:71px; line-height:70px;font-size:14px; font-weight:bold} 
  6. /* 這里為了便于截圖所以對li列表樣式代碼進行CSS換行,實際中可以CSS不換行 */ 
  7.  
  8. ul.divcss5-img li a{ display:block; width:100%; height:100%; font-size:14px; 
  9. color:#FFF; text-decoration:none; background:url(images/a.gif) no-repeat 0 0} 
  10.  
  11. /* 默認鏈接設置顏色為白色,背景圖片,字體加粗字體大小為14px */ 
  12. ul.divcss5-img li a:hover{background:url(images/hover.gif) no-repeat 0 0} 
  13. /* 因為寬度字體大小字體加粗繼承a樣式,所以我們只設置變化圖片即可 */ 

6)、HTML代碼片段

  1. <ul class="divcss5-img"> 
  2. <li><a href="#">公司介紹</a></li> 
  3. <li><a href="#">服務項目</a></li> 
  4. <li><a href="#">成功案例</a></li> 
  5. </ul> 

7)、截圖

a鏈接背景圖片改變
CSS A鏈接的圖片背景改變案例截圖 Html a超鏈接樣式圖片背景變化案例截圖

瀏覽器測試結果需要大家動手測試觀察,這樣利用學習與掌握,DIVCSS5在這里就不給出瀏覽器測試結果截圖了。

8)、在線樣式:
http://www.mcowk.com.cn/yanshi/2013022302/

9)、完整CSS A超鏈接錨文本案例打包下載:

百度網盤下載 (DIVCSS5整理到百度網盤,大家直接進入點擊即可高速放心下載)

如需轉載,請注明文章出處和來源網址:http://www.mcowk.com.cn/shili/s57.shtml

我要分享到:

必備CSS教程 Essential CSS Tutorials

必備HTML基礎教程 Essential HTML Tutorials

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2013-02-23 12:12 原創:DIVCSS5
本文www.mcowk.com.cn DIVCSS5版權所有。

福彩幸运武林开奖