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

1、css a link hover active visited偽類超鏈接錨文本樣式教程用css控制超鏈接樣式-css超鏈接本文將講解通過css樣式或通過css來控制超鏈接樣式。這里主要講文字類型的超鏈接，超鏈接的樣式包括通過css來控制設(shè)置超鏈接有無下劃線、超鏈接文字色彩等樣式。什么是超鏈接？超鏈接通俗地指從一個網(wǎng)頁指向一個目標的銜接關(guān)系,這個目標可以是另一個網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置，還可以是一個，一個電子郵件地址，一個文件，甚至是一個應(yīng)用程序。而在一個網(wǎng)頁中用來超鏈接的對象，可以是一段文本或者是一個。當掃瞄者單擊已經(jīng)鏈接的文字或后,鏈接目標將顯示在掃瞄器上，并且按照目標的類型來打開

2、或運行。超鏈接的代碼div+css解析如下：href 后跟被鏈接地址目標網(wǎng)站地址這里是target_blank - 在新窗口中打開鏈接_parent - 在父窗體中打開鏈接_self - 在當前窗體打開鏈接,此為默認值_top - 在當前窗體打開鏈接，并替換當前的囫圇窗體(框架頁)title 后跟鏈接目標解釋，也就是超鏈接被鏈接網(wǎng)址狀況簡要解釋，或標題css可控制超鏈接樣式-css鏈接樣式如下a:link是超級鏈接的初始狀態(tài)a:hover是把鼠標放上去時懸停的情況a:active 是鼠標點擊時a:visited是拜訪過后的狀況一、容易超鏈接樣式案例 - top1、通常對全站超鏈接樣式化辦法ac

3、olor:333;text-decoration:none; /對全站有鏈接的文字色彩樣式為color:333;并立刻無下劃線text-decoration:none;a:hover color:cc3300;text-decoration:underline;/對鼠標放到超鏈接上文字色彩樣式變?yōu)閏olor:cc3300;并文字鏈接加下劃線text-decoration:underline;2、通過鏈接內(nèi)設(shè)置類控制超鏈接樣式css辦法案例超鏈接代碼css對應(yīng)css代碼a.yangshicolor:333;text-decoration:none; a.yangshi:hover color:c

4、c3300;text-decoration:underline;通過這樣的設(shè)置可以控制鏈接內(nèi)的css類名為yangshi超鏈接的樣式3、通過對應(yīng)超鏈接外的父級的css類的css樣式來控制超鏈接的樣式案例超鏈接代碼css對應(yīng)css代碼.yangshi acolor:333;text-decoration:none; .yangshi a:hover color:cc3300;text-decoration:underline;這里值得注重的是a.yangshi與.yangshi a的樣式css代碼區(qū)分你可能希翼了解：html a,html超鏈接,html錨文本這里就是頻繁的通過div css來對

5、超鏈接樣式設(shè)置案例及分析。以下為具體css a超鏈接錨文本樣式教程css a:link hover active visited偽類樣式教程篇divcss5這里講解html a超鏈接標簽，a:hover、a:link、a:active、a:visited偽類樣式閱歷教程，通過css設(shè)置這幾種a錨文本的css樣式。無論控制超鏈接文本文字各種鼠標大事樣式，可以控制超鏈接對象背景的變幻。擴展閱讀：1、html a標簽語法結(jié)構(gòu)2、css a錨文本樣式二、基礎(chǔ)熟悉 - top介紹這4個常見偽類作用與說明1、a:link設(shè)置a對象在未被拜訪前（未點擊過和鼠標未經(jīng)過）的樣式表屬性。也就是html a錨文本標

6、簽的內(nèi)容初始樣式。2、a:hover設(shè)置對象在其鼠標懸停時的樣式表屬性，也就是鼠標剛剛經(jīng)過a標簽并停歇在a鏈接上時樣式。3、a:active設(shè)置a對象在被用戶激活（在鼠標點擊與釋放之間發(fā)生的大事）時的樣式表屬性。也就是鼠標左鍵點擊html a鏈接對象與釋放鼠標右鍵之間很短暫的樣式效果。4、a:visited設(shè)置a對象在其鏈接地址已被拜訪過時的樣式表屬性。也就是html a超鏈接文本被點擊拜訪過后的css樣式效果。三、應(yīng)用使用案例 - top我們設(shè)置一個超鏈接，對其設(shè)置css樣式，通過css a設(shè)置其四種樣式效果。通過一個容易的對文本設(shè)置css a樣式狀況了解學(xué)習(xí)css a錨文本樣式。1、案例c

7、ss代碼 .divcss5 a:link color:f00/* 鏈接默認為紅色 */ .divcss5 a:hover color:000/* 鼠標懸停黑色 */ .divcss5 a:active color:03f/* 鼠標點擊與釋放時藍色 */ .divcss5 a:visited color:f0f/* 拜訪過為粉紅 */ /* divcss5對象內(nèi) a超鏈接設(shè)置樣式 */ 2、案例html代碼 divcss5關(guān)于 css a樣式案例 這里為了排版截圖，專門對有的地方舉行換行3、案例軟件中截圖css a鏈接樣式案例截圖4、掃瞄器實際各種樣式截圖掃瞄器中各種a樣式截圖小結(jié)：普通a:ac

8、tive樣式效果是眨眼效果觀看不了，所以用法時候可以不用設(shè)置。同時超鏈接默認狀況下是自動加下劃線的，假如要去掉或再增強下劃線可以設(shè)置css text-decoration （擴展閱讀：1、css 下劃線2、css text-decoration下劃線3、html a標簽4、a標簽結(jié)構(gòu)四、常用css a應(yīng)用 - top為了大家靈便把握css a錨文本樣式設(shè)置，我們收拾三種用法狀況的a超鏈接樣式控制設(shè)置案例，分離為：帶超鏈接文字本身css color色彩樣式與拜訪后色彩樣式相同，沒有下劃線，鼠標懸停時候文字色彩color變幻，并添加下劃線；未拜訪時候帶超鏈接文本文字色彩是一種并且沒有下劃線，鼠標懸

9、停經(jīng)過時候是另外一種色彩有下劃線，激活或拜訪（過）后文本色彩為另外一種并有下劃線（三種狀況三種色彩）；還有一種狀況，本身一個背景，鼠標經(jīng)過懸停另外一種背景。通過這三種狀況案例教程讓大家通過對css a錨文本超鏈接樣式控制把握其學(xué)問。1、帶超鏈接文字本身css color色彩樣式與拜訪后色彩樣式相同，沒有下劃線，鼠標懸停時候文字色彩color變幻，并添加下劃線1）、css樣式代碼：.divcss5 a color:f00; text-decoration:none/* 鏈接默認為紅色 */ .divcss5 a:hover color:000; text-decoration:underline

10、/* 鼠標懸停黑色 */ /* divcss5對象內(nèi) a超鏈接設(shè)置樣式 */ 這里可以不用a:link偽類，可以挺直對象css命名+空格+a即可。2）、案例html div代碼片段： divcss5關(guān)于 css a樣式案例 3）、截圖css a樣式解釋圖掃瞄器測試結(jié)果需要大家動手測試觀看，這樣利用學(xué)習(xí)與把握，divcss5在這里就不給出掃瞄器測試結(jié)果截圖了。2、未拜訪時候帶超鏈接文本文字色彩是一種并且沒有下劃線，鼠標懸停經(jīng)過時候是另外一種色彩有下劃線，激活或拜訪（過）后文本色彩為另外一種并有下劃線（三種狀況三種色彩）此實例與我們教程其次大點二、應(yīng)用使用案例相同，大家可以查看按照實例舉行實踐，此

11、案例提到了css下劃線樣式設(shè)置，大家可靈便試著css添加下劃線（text-decoration:underline）或css去掉下劃線（text-decoration:none）應(yīng)用。3、本身一個背景，鼠標經(jīng)過懸停另外一種背景此種狀況經(jīng)常用于網(wǎng)站導(dǎo)航條，本身一種css背景樣式，鼠標經(jīng)過背景又變另外。擴展閱讀：1）、html img2）、css 背景3）、css background4)、css 背景色彩5）、css 背景a超鏈接設(shè)置背景變幻效果圖這個案例我們需要預(yù)備2張一張是鼠標未經(jīng)過時候，另外一張鼠標經(jīng)過時候。divcss5提供應(yīng)大家a鏈接案例需要預(yù)備素材截圖一張命名為a.gif,另外一張命

12、名hover.gif(這里顯示擴展名.gif)打包下載：詳細實踐步驟如下：1）、新建一個文件夾桌面，命名為"divcss5"新建文件夾截圖2)、打開新建的divcss5文件夾，再里新建一個命名為images裝文件夾新建裝images文件夾截圖3)、將下載2張素材放入images文件夾內(nèi)素材放入images文件夾里4）、dw新建一個html文件并且命名為index.html，保存于divcss5文件夾下新建html文件夾5）、css代碼片段li,ul border:0; padding:0; margin:0; list-style:none /* css初始化標簽 */ u

13、l.divcss5-img margin-top:10px ul.divcss5-img litext-align:center; float:left;width:121px; height:71px; line-height:70px;font-size:14px; font-weight:bold /* 這里為了便于截圖所以對li列表樣式代碼舉行css換行，實際中可以css不換行 */ ul.divcss5-img li a display:block; width:100%; height:100%; font-size:14px; color:fff; text-decoration:none; background:url(images/a.gif) no-repeat 0 0 /* 默認鏈接設(shè)置色彩為白色，背景，字體加粗，字體大小為14px */ ul.divcss5-img li a:hoverbackground:url(images/hover.gif) no-repeat 0 0 /* 由于寬度字體大小字體加粗繼承a樣式，所以我們只設(shè)