武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介:本文將講解通過(guò)css樣式或通過(guò)css來(lái)控制超鏈接樣式。這里主要講文字類型的超鏈接,超鏈接的樣式包括通過(guò)CSS來(lái)控制設(shè)置超鏈接有無(wú)下劃線、超鏈接文字顏色等樣式。
用CSS控制超鏈接樣式-css超鏈接
本文將講解通過(guò)css樣式或通過(guò)css來(lái)控制超鏈接樣式。這里主要講文字類型的超鏈接,超鏈接的樣式包括通過(guò)CSS來(lái)控制設(shè)置超鏈接有無(wú)下劃線、超鏈接文字顏色等樣式。
什么是超鏈接?
超鏈接通俗地指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè),也可以是相同網(wǎng)頁(yè)上的不同位置,還可以是一個(gè)圖片,一個(gè)電子郵件地址,一個(gè)文件,甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁(yè)中用來(lái)超鏈接的對(duì)象,可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上,并且根據(jù)目標(biāo)的類型來(lái)打開(kāi)或運(yùn)行。
超鏈接的代碼
<a href="" target="_blank" title="關(guān)于div css的網(wǎng)站">DIV+CSS</a>
解析如下:
href 后跟被鏈接地址目標(biāo)網(wǎng)站地址這里是
target
_blank -- 在新窗口中打開(kāi)鏈接
_parent -- 在父窗體中打開(kāi)鏈接
_self -- 在當(dāng)前窗體打開(kāi)鏈接,此為默認(rèn)值
_top -- 在當(dāng)前窗體打開(kāi)鏈接,并替換當(dāng)前的整個(gè)窗體(框架頁(yè))
title 后跟鏈接目標(biāo)說(shuō)明,也就是超鏈接被鏈接網(wǎng)址情況簡(jiǎn)要說(shuō)明,或標(biāo)題
CSS可控制超鏈接樣式-css鏈接樣式如下
a:link是超級(jí)鏈接的初始狀態(tài)
a:hover是把鼠標(biāo)放上去時(shí)懸停的狀況
a:active 是鼠標(biāo)點(diǎn)擊時(shí)
a:visited是訪問(wèn)過(guò)后的情況
超鏈接樣式案例
1、通常對(duì)全站超鏈接樣式化方法
a{color:#333;text-decoration:none; } //對(duì)全站有鏈接的文字顏色樣式為color:#333;并立即無(wú)下劃線text-decoration:none;
a:hover {color:#CC3300;text-decoration:underline;}//對(duì)鼠標(biāo)放到超鏈接上文字顏色樣式變?yōu)閏olor:#CC3300;并文字鏈接加下劃線text-decoration:underline;
2、通過(guò)鏈接內(nèi)設(shè)置類控制超鏈接樣式css方法
案例超鏈接代碼<a href="" class="webjxcom">CSS</a>
對(duì)應(yīng)CSS代碼
a.webjxcom{color:#333;text-decoration:none; }
a.webjxcom:hover {color:#CC3300;text-decoration:underline;}
通過(guò)這樣的設(shè)置可以控制鏈接內(nèi)的css類名為“webjxcom”超鏈接的樣式
3、通過(guò)對(duì)應(yīng)超鏈接外的父級(jí)的css類的css樣式來(lái)控制超鏈接的樣式
案例超鏈接代碼<div class="webjxcom"><a href="">CSS</a></a>
對(duì)應(yīng)CSS代碼
.webjxcom a{color:#333;text-decoration:none; }
.webjxcom a:hover {color:#CC3300;text-decoration:underline;}
這里值得注意的是a.webjxcom與.webjxcom a的樣式css代碼區(qū)別
這里就是常見(jiàn)的通過(guò)div css來(lái)對(duì)超鏈接樣式設(shè)置案例及分析。
|
新聞熱點(diǎn)
疑難解答
圖片精選