超連接標籤的CSS僞類link,visited,hover,active

時間 2019-12-09

標籤連接標籤 css link visited hover active 欄目 CSS 简体版

原文原文鏈接

CSS僞類，是一種特殊的類，它針對到CSS選擇器起做用，使選中的標籤或元素產生特定的效果。css

CSS僞類的語法就是：選擇器 : 僞類名 { 屬性 : 屬性值 }html

用的最多的僞類就是超連接a的僞類，有:link，:visited，:hover，:active，並且須要按照這個順序設置，有個簡單的記法是，取首字母組成 love hate，記住「愛恨」就好了。瀏覽器

1，查看超連接a標籤的默認樣式字體

新建一個網頁a.html，複製下面的內容：網站

<html>url

<head>htm

</head>blog

<body >事件

<a>沒有href的a標籤,字體沒有修飾，鼠標放上去也沒反應</a> </br>get

<a href="#" target="_blank"> href爲#的a標籤，默認藍色，帶下劃線，鼠標放上去變成手 </a> </br>

<a href="http://www.a.com" target="_blank" >href爲網址的a標籤，效果同上</a>

</body>

</html>

在瀏覽器中查看，效果以下：

2，去掉超連接的下劃線

通常咱們看到的超連接都是沒有下劃線的，這裏經過css去掉下劃線。

<html>

<head>

a { text-decoration:none;}

</style>

</head>

<body >

<a>沒有href的a標籤,字體沒有修飾，鼠標放上去也沒反應</a> </br>

<a href="#" target="_blank"> href爲#的a標籤，默認藍色，帶下劃線，鼠標放上去變成手 </a> </br>

<a href="http://www.a.com" target="_blank" >href爲網址的a標籤，效果同上</a>

</body>

</html>

效果圖以下：

經過 a { text-decoration:none;} 去掉下劃線。

這句話的意思是「設置a標籤的文本修飾爲none，就是沒有樣式」

3，給a標籤添加上僞類，代碼以下：

<html>

<head>

a { text-decoration:none;}

a:link { color: red;}

a:visited { color: green;}

a:hover { color: blue;}

a:active { color: yellow;}

</style>

</head>

<body >

<a>沒有href的a標籤,字體沒有修飾，鼠標放上去也沒反應</a> </br>

<a href="#" target="_blank"> href爲#的a標籤，默認藍色，帶下劃線，鼠標放上去變成手 </a> </br>

<a href="http://www.a.com" target="_blank" >href爲網址的a標籤，效果同上</a>

</body>

</html>

效果圖以下：

此時，CSS起做用的是a:link { color: red;}

若是a標籤具備href屬性，而且沒有被瀏覽器打開過，超連接就會顯示爲紅色；

第一個a標籤沒有href屬性，顯示效果和文本同樣。

第二個雖然是個無效的href值，href=」#」，可是這種狀況也經常使用，能夠經過腳本寫一些事件；

第三個是有效的連接地址，顯示正常。

瀏覽器彷佛會記憶很長時間，只要你曾經打開過這個href中寫的url，它都會認爲你打開過這個連接。

4，單擊a標籤，查看訪問過的樣式

效果圖以下：

此時能夠看出，a標籤中的文本都變爲綠色了。

此時起做用的是a:visited { color: green;}

它的做用就是設置被訪問過的超連接a的樣式。

並且只要被瀏覽器訪問過，瀏覽器會記憶好久。

5，把鼠標放到超連接上，查看效果

此時，第一個標籤顯示爲藍色，由於我用的是qq截圖，因此沒有把「鼠標手」截圖下來。

a:hover { color: blue;}

這是設置當鼠標放到標籤a的上方的時候，應用的樣式，這裏設置字體爲藍色；當鼠標移走，就又恢復了原本的樣式。

6，單擊一下超連接，看看效果

此時能夠看到，超連接字體變爲了黃色。

a:active { color: yellow;}

這個就是設置當單擊(也就是激活)a標籤時，超連接的樣式。這裏設置字體黃色。

2、著名網站對a標籤的設置

1，網站導航hao123.com

該網站首先對a標籤進行統一的設置，代碼以下：

a {

color: #333;

text-decoration: none;

outline: 0px none;

}

設置了字體顏色，去掉了下劃線。

而後，當把鼠標放到超連接上時，效果以下：

字體設置爲紅色，帶有下劃線。

代碼以下：

a:hover { color: red; text-decoration:underline}

對hao123來講，他只設置了這a標籤的通用樣式，和鼠標懸浮狀態，這樣，咱們看着導航網也比較正常，不然會致使一個網頁上，超連接顏色不一樣，很差看。

2，騰訊qq網

a{color:#172c45;text-decoration:none}

a:hover{color:#cd0200;text-decoration:underline}

3，淘寶網

color:#6d6d6d;

text-decoration:none

}

a:hover{

color:#ff4200;

text-decoration:underline

}

由於IE6對 : hover 是支持的，而對其餘的僞類不是太支持，所以設置一個 a 的通用樣式和 : hover樣式就足夠了。

並且也沒有必要對a標籤設置4中狀態，上面的例子就能夠看出。

文章在百度經驗的地址：

http://jingyan.baidu.com/article/0320e2c1f7a5741b87507bf0.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。