科技知識動態:html超鏈接字體顏色怎么改?超鏈接字體顏色的更改方法總結

導讀跟大家講解下有關html超鏈接字體顏色怎么改?超鏈接字體顏色的更改方法總結,相信小伙伴們對這個話題應該也很關注吧,現在就為小伙伴們說說

跟大家講解下有關html超鏈接字體顏色怎么改?超鏈接字體顏色的更改方法總結,相信小伙伴們對這個話題應該也很關注吧,現在就為小伙伴們說說html超鏈接字體顏色怎么改?超鏈接字體顏色的更改方法總結,小編也收集到了有關html超鏈接字體顏色怎么改?超鏈接字體顏色的更改方法總結的相關資料,希望大家看到了會喜歡。

本篇文章主要的講述了一個關于HTML超鏈接文本字體顏色的更改方法,說了一個是純a標簽的文本更改,還有一種是把a標簽放在div標簽中進行css樣式更改。現在我們一起來看文章的內容吧

首先我們先從一個例子開始改超鏈接的字體顏色:

我們要做的是未被點擊時超鏈接文字無下劃線,顯示為灰色;當鼠標在鏈接上時有下劃線,鏈接文字顯示為紅色;當點擊鏈接后,鏈接無下劃線,顯示為黃色。

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

<html> <head> <title>PHP中文網:取消下劃線實例</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>

效果圖有三個:

tuyi.png

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

tuer.png

這個是鼠標一上去的樣式,有下劃線,顯示為紅色。

tusan.png

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

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

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

a:link 指正常的未被訪問過的鏈接;

a:active 指正在點的鏈接;

a:hover 指鼠標在鏈接上;

a:visited 指已經訪問過的鏈接;

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

none參數表示超鏈接文字不顯示下劃線;

underline參數表示超鏈接的文字有下劃線

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

現在還有個實例,就是超鏈接在div標簽中,我們要把div標簽內的超鏈接的文本變顏色,怎么變呢?

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

1.CSS代碼:

a{ color:#00F}a:hover{ color:#F00}.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>

這個代碼的效果如下圖:

tusi.png

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

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

【小編推薦】

html空格代碼怎么寫?html空格代碼的表現方式總結

html圖片怎么等比例縮放?html img圖片縮放方法總結(附實例)

以上就是html超鏈接字體顏色怎么改?超鏈接字體顏色的更改方法總結的詳細內容,更多請關注php中文網其它相關文章!

來源:php中文網

免責聲明:本文由用戶上傳,如有侵權請聯系刪除!