6.27日音訊,網(wǎng)頁細(xì)節(jié)之超鏈接的用處和提高

發(fā)布日期：2013-06-27文章來源：首創(chuàng)網(wǎng)絡(luò)瀏覽次數(shù)：751次

6.27日音訊,網(wǎng)頁細(xì)節(jié)之超鏈接的用處和提高。超鏈接是一個網(wǎng)站的靈魂，無論哪一種網(wǎng)站它都離不開，它的用處和出現(xiàn)率也是最高的，那么在網(wǎng)頁設(shè)計中如何才能做出高質(zhì)量和外觀的網(wǎng)站，它的運用可少不了。下面由邯鄲網(wǎng)......

本文關(guān)鍵字：6.27日,音訊,網(wǎng)頁,細(xì)節(jié),之超,鏈接,的,用處,和,

　　6.27日音訊,網(wǎng)頁細(xì)節(jié)之超鏈接的用處和提高。超鏈接是一個網(wǎng)站的“靈魂”，無論哪一種網(wǎng)站它都離不開，它的用處和出現(xiàn)率也是最高的，那么在網(wǎng)頁設(shè)計中如何才能做出高質(zhì)量和外觀的網(wǎng)站，它的運用可少不了。下面由邯鄲網(wǎng)站建設(shè)首創(chuàng)網(wǎng)絡(luò)小編來給大家講解一下，網(wǎng)頁細(xì)節(jié)之超鏈接的運用和提高，這里主要講文字類型的超鏈接，超鏈接的樣式包括通過CSS來控制設(shè)置超鏈接有無下劃線、超鏈接文字顏色等樣式。

　　什么是超鏈接？

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

　　超鏈接的代碼

　　解析如下：

　　href后跟被鏈接地址目標(biāo)網(wǎng)站地址這里是http://34611.cn/sense/282.html

　　target

　　_blank--在新窗口中打開鏈接

　　_parent--在父窗體中打開鏈接

　　_self--在當(dāng)前窗體打開鏈接,此為默認(rèn)值

　　_top--在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個窗體(框架頁)

　　title后跟鏈接目標(biāo)說明，也就是超鏈接被鏈接網(wǎng)址情況簡要說明，或標(biāo)題

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

　　a:link是超級鏈接的初始狀態(tài)

　　a:hover是把鼠標(biāo)放上去時懸停的狀況

　　a:active是鼠標(biāo)點擊時

　　a:visited是訪問過后的情況

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

　　1、通常對全站超鏈接樣式化方法

　　a{color:#333;text-decoration:none;}//對全站有鏈接的文字顏色樣式為color:#333;并立即無下劃線text-decoration:none;

　　a:hover{color:#CC3300;text-decoration:underline;}//對鼠標(biāo)放到超鏈接上文字顏色樣式變?yōu)閏olor:#CC3300;并文字鏈接加下劃線text-decoration:underline;

　　2、通過鏈接內(nèi)設(shè)置類控制超鏈接樣式css方法

　　案例超鏈接代碼<ahref="#"class="yangshi">CSS</a>

　　對應(yīng)CSS代碼

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

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

　　通過這樣的設(shè)置可以控制鏈接內(nèi)的css類名為“yangshi”超鏈接的樣式

　　3、通過對應(yīng)超鏈接外的父級的css類的css樣式來控制超鏈接的樣式

　　案例超鏈接代碼<divclass="yangshi"><ahref="/">CSS</a></a>

　　對應(yīng)CSS代碼

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

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

　　這里值得注意的是a.yangshi與.yangshia的樣式css代碼區(qū)別

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

　　這里就是常見的通過divcss來對超鏈接樣式設(shè)置案例及分析。

　　以下為詳細(xì)CSSA超鏈接錨文本樣式教程

　　cssa:linkhoveractivevisited偽類樣式教程篇

　　DIVCSS5這里講解htmla超鏈接標(biāo)簽，a:hover、a:link、a:active、a:visited偽類樣式經(jīng)驗教程，通過CSS設(shè)置這幾種a錨文本的CSS樣式。無論控制超鏈接文本文字各種鼠標(biāo)事件樣式，可以控制超鏈接對象背景圖片的變化。

　　擴(kuò)展閱讀：

　　1、htmla標(biāo)簽語法結(jié)構(gòu)

　　2、cssa錨文本樣式

　　二、基礎(chǔ)認(rèn)識-TOP

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

　　1、a:link

　　設(shè)置a對象在未被訪問前（未點擊過和鼠標(biāo)未經(jīng)過）的樣式表屬性。也就是htmla錨文本標(biāo)簽的內(nèi)容初始樣式。

　　2、a:hover

　　設(shè)置對象在其鼠標(biāo)懸停時的樣式表屬性，也就是鼠標(biāo)剛剛經(jīng)過a標(biāo)簽并停留在A鏈接上時樣式。

　　3、a:active

　　設(shè)置A對象在被用戶激活（在鼠標(biāo)點擊與釋放之間發(fā)生的事件）時的樣式表屬性。也就是鼠標(biāo)左鍵點擊htmlA鏈接對象與釋放鼠標(biāo)右鍵之間很短暫的樣式效果。

　　4、a:visited

　　設(shè)置a對象在其鏈接地址已被訪問過時的樣式表屬性。也就是htmla超鏈接文本被點擊訪問過后的CSS樣式效果。

　　三、應(yīng)用用法案例-TOP

　　我們設(shè)置一個超鏈接，對其設(shè)置CSS樣式，通過CSSA設(shè)置其四種樣式效果。通過一個簡單的對文本設(shè)置cssa樣式情況了解學(xué)習(xí)CSSa錨文本樣式。

　　1、案例css代碼

　　<style>

　　.divcss5a:link{color:#F00}/*鏈接默認(rèn)為紅色*/

　　.divcss5a:hover{color:#000}/*鼠標(biāo)懸停黑色*/

　　.divcss5a:active{color:#03F}/*鼠標(biāo)點擊與釋放時藍(lán)色*/

　　.divcss5a:visited{color:#F0F}/*訪問過為粉紅*/

　　/*divcss5對象內(nèi)a超鏈接設(shè)置樣式*/

　　</style>

　　2、案例html代碼

　　<divclass="divcss5">

　　DIVCSS5關(guān)于

　　<ahref="#">CSSa樣式</a>案例

　　</div>

　　這里為了排版截圖，特地對有的地方進(jìn)行換行

　　3、案例軟件中截圖

　　CSSA鏈接樣式案例截圖

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

　　瀏覽器中各種A樣式截圖

　　小結(jié)：

　　一般a:active樣式效果是瞬間效果觀察不了，所以使用時候可以不用設(shè)置。同時超鏈接默認(rèn)情況下是自動加下劃線的，如果要去掉或再增加下劃線可以設(shè)置csstext-decoration。

　　擴(kuò)展閱讀：

　　1、css下劃線

　　2、csstext-decoration下劃線

　　3、htmla標(biāo)簽

　　4、a標(biāo)簽結(jié)構(gòu)

　　四、常用CSSA應(yīng)用-TOP

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

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

　　1）、CSS樣式代碼：

　　.divcss5a{color:#F00;text-decoration:none}/*鏈接默認(rèn)為紅色*/

　　.divcss5a:hover{color:#000;text-decoration:underline}/*鼠標(biāo)懸停黑色*/

　　/*divcss5對象內(nèi)a超鏈接設(shè)置樣式*/

　　這里可以不用a:link偽類，可以直接對象“CSS命名+空格+a{}”即可。

　　2）、案例htmldiv代碼片段：

　　<divclass="divcss5">

　　DIVCSS5關(guān)于

　　<ahref="#">CSSa樣式</a>案例

　　</div>

　　3）、截圖

　　cssa樣式說明圖

　　瀏覽器測試結(jié)果需要大家動手測試觀察，這樣利用學(xué)習(xí)與掌握，DIVCSS5在這里就不給出瀏覽器測試結(jié)果截圖了。

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

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

　　3、本身一個圖片背景，鼠標(biāo)經(jīng)過懸停另外一種背景圖片

　　此種情況常常用于網(wǎng)站導(dǎo)航條，本身一種CSS背景樣式，鼠標(biāo)經(jīng)過背景圖片又變另外圖片。

　　仔細(xì)研究我們也發(fā)現(xiàn)了，原來超鏈接還有這么多的用處，如何使用它的功能和如何才能使它運用恰到好處，是我們要根據(jù)實際情況來定論的。如當(dāng)前的欄目，那么我們可以使它加一種亮點的顏色或下劃線使它與其它欄目以區(qū)分，如果是藝術(shù)類的網(wǎng)站，那我們也可以通過改變背景來實現(xiàn)，總之這些細(xì)節(jié)一定要用到恰好，才能彰顯出一個設(shè)計者是否用心和認(rèn)真來制作的態(tài)度和嚴(yán)謹(jǐn)。

本文由邯鄲網(wǎng)絡(luò)公司首創(chuàng)網(wǎng)絡(luò)整理編輯發(fā)布，請勿轉(zhuǎn)載、復(fù)制、摘抄等！