HTML設(shè)置超鏈接字體顏色和點(diǎn)擊后的字體顏色
發(fā)布時(shí)間:2012-12-02 16:00:23 作者:佚名
我要評(píng)論

CSS為一些特殊效果準(zhǔn)備了特定的工具,我們稱之為“偽類”。其中有幾項(xiàng)是我們經(jīng)常用到的,下面我們就詳細(xì)介紹一下經(jīng)常用于定義鏈接樣式的四個(gè)偽類
定義鏈接樣式
CSS為一些特殊效果準(zhǔn)備了特定的工具,我們稱之為“偽類”。其中有幾項(xiàng)是我們經(jīng)常用到的,下面我們就詳細(xì)介紹一下經(jīng)常用于定義鏈接樣式的四個(gè)偽類,它們分別是:
:link
:visited
:hover
:active
因?yàn)槲覀円x鏈接樣式,所以其中必不可少的就是超級(jí)鏈接中的錨標(biāo)簽--a,錨標(biāo)簽和偽類鏈接起來(lái)書寫的方法就是定義鏈接樣式的基礎(chǔ)方法,它們的寫法如下:
a:link,定義正常鏈接的樣式;
a:visited,定義已訪問(wèn)過(guò)鏈接的樣式;
a:hover,定義鼠標(biāo)懸浮在鏈接上時(shí)的樣式;
a:active,定義鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式。
示例:
a:link {
color:#FF0000;
text-decoration:underline;
}
a:visited {
color:#00FF00;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:none;
}
a:active {
color:#FFFFFF;
text-decoration:none;
}
上面示例中定義的鏈接顏色是紅色,訪問(wèn)過(guò)后的鏈接是綠色,鼠標(biāo)懸浮在鏈接上時(shí)是黑色,點(diǎn)擊時(shí)的顏色是白色。
如果正常鏈接和已訪問(wèn)過(guò)的鏈接樣式相同,鼠標(biāo)懸浮和點(diǎn)擊時(shí)的樣式相同,也可以將它們合并起來(lái)定義:
a:link,
a:visited {
color:#FF0000;
text-decoration:underline;
}
a:hover,
a:active {
color:#000000;
text-decoration:none;
}
鏈接定義的順序
沒(méi)有規(guī)矩不成方圓,雖然鏈接定義寫好了,但它也是有規(guī)則的,如果這四項(xiàng)的書寫順序稍有差錯(cuò),鏈接的效果可能就沒(méi)有了,所以每次定義鏈接樣式時(shí)務(wù)必確認(rèn)定義的順序,link--visited--hover-active,也就是我們常說(shuō)到的LoVe HAte原則(大寫字母就是它們的首字母)。
定義局部鏈接樣式
在CSS中寫上a:link{}這樣的定義會(huì)使整個(gè)頁(yè)面的鏈接樣式改變,但有些局部鏈接需要特殊化,這個(gè)問(wèn)題也不難解決,只要在鏈接樣式定義的前面加上指定的id或class就可以了。
示例:
#sidebar a:link,
#sidebar a:visited {
color:#FF0000;
text-decoration:none;
}
#sidebar a:hover,
#sidebar a:active {
color:#000000;
text-decoration:underline;
}
調(diào)用方法:
<div id="sidebar"><a href="http://chabaoo.cn" target="_blank">鏈接到腳本之家<a></div>
class的定義方法和id相同,只要將#sidebar改為.sidebar就行了,還有一種方法是直接定義鏈接的樣式,那樣更直接,不過(guò)調(diào)用時(shí)比較麻煩,需要給每個(gè)特定的鏈接加上定義的代碼。
示例:
a.redlink a:link,
a.redlink a:visited {
color:#FF0000;
text-decoration:none;
}
a.redlink a:hover,
a.redlink a:active {
color:#000000;
text-decoration:underline;
background:#FFFFFF;
}
調(diào)用方法:
<div><a href="http://chabaoo.cn" target="_blank" class="redlink" >鏈接到腳本之家一<a></div>
鏈接的定義主要有三個(gè)屬性,顏色(color)、文本修飾(text-decoration)和背景(background)
CSS為一些特殊效果準(zhǔn)備了特定的工具,我們稱之為“偽類”。其中有幾項(xiàng)是我們經(jīng)常用到的,下面我們就詳細(xì)介紹一下經(jīng)常用于定義鏈接樣式的四個(gè)偽類,它們分別是:
:link
:visited
:hover
:active
因?yàn)槲覀円x鏈接樣式,所以其中必不可少的就是超級(jí)鏈接中的錨標(biāo)簽--a,錨標(biāo)簽和偽類鏈接起來(lái)書寫的方法就是定義鏈接樣式的基礎(chǔ)方法,它們的寫法如下:
a:link,定義正常鏈接的樣式;
a:visited,定義已訪問(wèn)過(guò)鏈接的樣式;
a:hover,定義鼠標(biāo)懸浮在鏈接上時(shí)的樣式;
a:active,定義鼠標(biāo)點(diǎn)擊鏈接時(shí)的樣式。
示例:
復(fù)制代碼
代碼如下:a:link {
color:#FF0000;
text-decoration:underline;
}
a:visited {
color:#00FF00;
text-decoration:none;
}
a:hover {
color:#000000;
text-decoration:none;
}
a:active {
color:#FFFFFF;
text-decoration:none;
}
上面示例中定義的鏈接顏色是紅色,訪問(wèn)過(guò)后的鏈接是綠色,鼠標(biāo)懸浮在鏈接上時(shí)是黑色,點(diǎn)擊時(shí)的顏色是白色。
如果正常鏈接和已訪問(wèn)過(guò)的鏈接樣式相同,鼠標(biāo)懸浮和點(diǎn)擊時(shí)的樣式相同,也可以將它們合并起來(lái)定義:
復(fù)制代碼
代碼如下:a:link,
a:visited {
color:#FF0000;
text-decoration:underline;
}
a:hover,
a:active {
color:#000000;
text-decoration:none;
}
鏈接定義的順序
沒(méi)有規(guī)矩不成方圓,雖然鏈接定義寫好了,但它也是有規(guī)則的,如果這四項(xiàng)的書寫順序稍有差錯(cuò),鏈接的效果可能就沒(méi)有了,所以每次定義鏈接樣式時(shí)務(wù)必確認(rèn)定義的順序,link--visited--hover-active,也就是我們常說(shuō)到的LoVe HAte原則(大寫字母就是它們的首字母)。
定義局部鏈接樣式
在CSS中寫上a:link{}這樣的定義會(huì)使整個(gè)頁(yè)面的鏈接樣式改變,但有些局部鏈接需要特殊化,這個(gè)問(wèn)題也不難解決,只要在鏈接樣式定義的前面加上指定的id或class就可以了。
示例:
復(fù)制代碼
代碼如下:#sidebar a:link,
#sidebar a:visited {
color:#FF0000;
text-decoration:none;
}
#sidebar a:hover,
#sidebar a:active {
color:#000000;
text-decoration:underline;
}
調(diào)用方法:
<div id="sidebar"><a href="http://chabaoo.cn" target="_blank">鏈接到腳本之家<a></div>
class的定義方法和id相同,只要將#sidebar改為.sidebar就行了,還有一種方法是直接定義鏈接的樣式,那樣更直接,不過(guò)調(diào)用時(shí)比較麻煩,需要給每個(gè)特定的鏈接加上定義的代碼。
示例:
復(fù)制代碼
代碼如下:a.redlink a:link,
a.redlink a:visited {
color:#FF0000;
text-decoration:none;
}
a.redlink a:hover,
a.redlink a:active {
color:#000000;
text-decoration:underline;
background:#FFFFFF;
}
調(diào)用方法:
<div><a href="http://chabaoo.cn" target="_blank" class="redlink" >鏈接到腳本之家一<a></div>
鏈接的定義主要有三個(gè)屬性,顏色(color)、文本修飾(text-decoration)和背景(background)
相關(guān)文章
HTML基礎(chǔ)知識(shí)——設(shè)置超鏈接的樣式簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)知識(shí)——設(shè)置超鏈接的樣式簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-11- 這篇文章主要介紹了HTML中的超鏈接標(biāo)簽使用教程,包括郵件鏈接的使用方法,需要的朋友可以參考下2016-07-08
- 這篇文章主要介紹了XHTML中的超鏈接標(biāo)簽使用教程,包括錨鏈接和鏈接相對(duì)地址用法的介紹,需要的朋友可以參考下2016-03-06
- 這篇文章主要介紹了html如何用超鏈接打開(kāi)新窗口其可控制窗口屬性,主要使用到j(luò)s的window.open方法,感興趣的朋友可以看看哦2014-09-06
html超鏈接a標(biāo)簽的href跳轉(zhuǎn)跟onclick之間執(zhí)行順序示例介紹
html超鏈接a標(biāo)簽的href跳轉(zhuǎn)跟onclick之間執(zhí)行關(guān)系:如果onclick返回false,則a不進(jìn)行跳轉(zhuǎn),如果onclick返回true,則a跳轉(zhuǎn),感興趣的朋友可以了解下本文2014-01-07解決html 圖片img加超鏈接后產(chǎn)生難看的藍(lán)色邊框問(wèn)題
html 圖片img加了超鏈接之后產(chǎn)生難看的藍(lán)色邊框該怎么解決呢?在接下來(lái)的文章中將為大家介紹下詳細(xì)的解決方法,感興趣的朋友可以參考下2013-10-14html超鏈接樣式(四種不同狀態(tài))設(shè)置示例
html超鏈接樣式包括:正在連接、訪問(wèn)過(guò)、鼠標(biāo)盤旋,各個(gè)文本字體樣式設(shè)置如下,感興趣的朋友可以學(xué)習(xí)下哦。希望對(duì)大家有所幫助2013-08-09html 中文亂碼 HTML超鏈接中文亂碼問(wèn)題分析及解決方法
Vm中一個(gè)超鏈接URL需要拼接中文作為Get請(qǐng)求的參數(shù)如果直接拼接,傳到后臺(tái)Action的參數(shù)對(duì)象中后取出會(huì)是亂碼,需要編碼后再拼接到URL上,接下來(lái)將和大家分享一下解決方法2012-12-30- 今天我們來(lái)談?wù)凥TML利用超鏈接打開(kāi)鏈接文件的方法介紹2012-07-02
網(wǎng)頁(yè)制作初學(xué)者:學(xué)用HTML的超鏈接A標(biāo)記
超級(jí)鏈接a標(biāo)記代表一個(gè)鏈接點(diǎn),是英文anchor(錨點(diǎn))的簡(jiǎn)寫。它的作用是把當(dāng)前位置的文本或圖片連接到其他的頁(yè)面、文本或圖像,這已是眾所周知了,但關(guān)于它的語(yǔ)法結(jié)構(gòu)可能2009-04-02