html超連結字型顏色怎麼改?超連結字型顏色的更改方法總結

來源:互聯網
上載者:User
本篇文章主要的講述了一個關於HTML超連結文本字型顏色的更改方法,說了一個是純a標籤的文本更改,還有一種是把a標籤放在div標籤中進行css樣式更改。現在我們一起來看文章的內容吧

首先我們先從一個例子開始改超連結的字型顏色:

我們要做的是未被點擊時超連結顯示文字無底線,顯示為灰色;當滑鼠在連結上時有底線,連結文字顯示為紅色;當點選連結後,連結無底線,顯示為黃色。

我們來看完整的實驗代碼:

<html> <head> <title>topic.alibabacloud.com:取消底線執行個體</title> <style> a:link{text-decoration: none;color: gray}a:active{text-decoration:blink}a:hover{text-decoration:underline;color: red}a:visited{text-decoration: none;color: yellow}</style> </head> <body> 歡迎來到<a href="www.php.cn">php中文網</a></body> </html>

有三個:

這個是未被點擊的樣子,無底線,顯示為灰色。

這個是滑鼠一上去的樣式,有底線,顯示為紅色。

這個是被點擊之後的樣式,無底線,顯示為黃色文本。

以上就是上代碼的實驗結果。算是把剛才的任務完成了,讓我們更容易理解上面的代碼。

現在我們來理解一下上述代碼的具體含義:

  • a:link 指正常的未被訪問過的連結;

  • a:active 指正在點的連結;

  • a:hover 指滑鼠在連結上;

  • a:visited 指已經訪問過的連結;

  • text-decoration是文字修飾效果的意思;

  • none參數表示超連結顯示文字不顯示底線;

  • underline參數表示超連結的文字有底線

現在理解出來了,這是不是更好理解了上面的那些代碼,就是把這些一個個的往裡面帶入進去。

現在還有個執行個體,就是超連結在div標籤中,我們要把div標籤內的超連結的文本變顏色,怎麼變呢?

讓我們一起來看解釋代碼:

1.CSS代碼:

a{ color:#00F}a:hover{ color:#F00}/* 滑鼠經過懸停字型顏色 *//* css 注釋說明:以上代碼為設定html中超連結統一字型顏色 */.div a{ color:#090}.div a:hover{ color:#090}/* css注釋說明:以上代碼為設定html中.div對象內超連結字型顏色

2.html代碼:

<p>測試內容我是統一設定的顏色藍色<a href="http://www.php.cn">php中文網</a></p><div class="div">我在div對象內,超連結顏色為<a href="#">我是超連結綠色</a></div>

這個代碼的效果如:

上面的文本編程了藍色,下面的文本變成了綠色。效果很明顯。

這就是用css樣式來改變html中的超連結文本的方法了。有問題的可以在下方提問

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.