html超連結字體顏色怎麼改？超連結字體顏色的更改方法總結-html教學-PHP中文網

首頁

web前端

html教學

html超連結字體顏色怎麼改？超連結字體顏色的更改方法總結

寻∝梦

Sep 03, 2018 pm 05:28 PM

adivhtml

本篇文章主要的講述了一個關於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>

效果圖有三個：

html超連結字體顏色怎麼改？超連結字體顏色的更改方法總結

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

html超連結字體顏色怎麼改？超連結字體顏色的更改方法總結

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

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>

這個程式碼的效果如下圖：

html超連結字體顏色怎麼改？超連結字體顏色的更改方法總結上面的文字程式設計了藍色，下面的文字變成了綠色。效果很明顯。

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

【小編推薦】

html空格程式碼怎麼寫？ html空格程式碼的表現方式總結

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

以上是html超連結字體顏色怎麼改？超連結字體顏色的更改方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

See all articles