咨詢服務(wù)熱線:400-099-8848
網(wǎng)站建設(shè)中鏈接的知識 |
| 發(fā)布時間:2026-06-08 文章來源:本站 瀏覽次數(shù):68 |
偽類是什么?偽類(pseudo-class)令你能夠在為HTML元素界說CSS特點(diǎn)的時候?qū)l件和事件考慮在內(nèi)。 咱們來看一個比如。正如你所知道的,在HTML里,鏈接是經(jīng)過a元素來界說的。因此,在CSS里,咱們能夠?qū)作為一個選擇器(selector): a {color: blue;}
一個鏈接能夠有不同的狀況。例如,它能夠是已訪問過的,也能夠是未訪問過的。你能夠經(jīng)過偽類別離為訪問過的鏈接和未訪問過的鏈接設(shè)置不同的款式。 a:link {color: blue;}a:visited {color: red;}
為未訪問過的鏈接和已訪問過的鏈接別離使用偽類a:link和a:visited;顒拥逆溄訉(yīng)的偽類為a:active,有鼠標(biāo)懸停的鏈接對應(yīng)的偽類為a:hover。 咱們將逐個解釋這四個偽類,并給出示例。 偽類:link偽類:link用于閱讀者從未訪問過的鏈接。 在下面的示例代碼中,咱們將未訪問過的鏈接設(shè)為淺藍(lán)色。 a:link {color: #6699CC;}
偽類: visited偽類:visited用于閱讀者已訪問過的鏈接。比方,下面的代碼將已訪問過的鏈接設(shè)為深紫色: a:visited {color: #660099;}
偽類: active偽類:active用于活動的鏈接(即獲得當(dāng)時焦點(diǎn)的鏈接)。 下例將活動的鏈接設(shè)為具有黃色背景: a:active {background-color: #FFFF00;}
偽類: hover偽類:hover用于有鼠標(biāo)懸停的鏈接。 這能制造出有趣的作用。例如,假如你要當(dāng)鼠標(biāo)光標(biāo)移到鏈接上時將鏈接顯示為橙色斜體,那么CSS能夠這樣寫: a:hover {color: orange;font-style: italic;}
例1:有鼠標(biāo)懸停的鏈接的作用為鏈接設(shè)置懸停作用十分盛行。所以,咱們將多看幾個:hover偽類的比如。 例1a:字符距離咱們在第5課學(xué)過,能夠用letter-spacing特點(diǎn)來調(diào)整字符距離,F(xiàn)在為了獲得特殊作用,咱們將它應(yīng)用到鏈接上: a:hover {letter-spacing: 10px;font-weight:bold;color:red;}
例1b:大寫和小寫同樣在第5課咱們學(xué)過,能夠經(jīng)過text-transform特點(diǎn)來轉(zhuǎn)換字母的大小寫。這也可用于為鏈接制造作用: a:hover {text-transform: uppercase;
font-weight:bold; color:blue; background-color:yellow;} 經(jīng)過上面兩個比如你會發(fā)現(xiàn),咱們能夠經(jīng)過特點(diǎn)的組合創(chuàng)造出無數(shù)種作用。你能夠創(chuàng)建自己的作用——試試吧! |
|