App下載

如何修改HTML超鏈接樣式?

猿友 2021-03-12 14:58:07 瀏覽數(shù) (7670)
反饋

在網(wǎng)頁(yè)開(kāi)發(fā)中,我們不免會(huì)用到超鏈接,將內(nèi)容鏈接到原網(wǎng)頁(yè)上。如果不對(duì)超鏈接進(jìn)行設(shè)置,鏈接默認(rèn)以固定樣式顯示,過(guò)于單一。那么我們要如何修改 HTML 中的超鏈接呢?這篇文章 W3Cschool 小編為大家介紹一下。

我們都知道,超鏈接是用<a></a>標(biāo)簽來(lái)顯示的。如果我們需要修改樣式,則需要通過(guò) CSS 修改它的樣式。<a></a>標(biāo)簽的樣式還分為四個(gè)類(lèi)型,分別為未訪(fǎng)問(wèn)、已訪(fǎng)問(wèn)、鼠標(biāo)滑過(guò)、點(diǎn)擊。

  • a:link:未被訪(fǎng)問(wèn)的鏈接
  • a:visited:已經(jīng)訪(fǎng)問(wèn)過(guò)的鏈接
  • a:hover:鼠標(biāo)滑過(guò)鏈接
  • a:active:鏈接被點(diǎn)擊
需要注意的是:a:hover 必須在 ?a:link ?和 ?a:visited? 之后,a:active 必須在 ?a:hover? 之后,需要嚴(yán)格按順序才能看到效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>w3cschool - 編程獅,隨時(shí)隨地學(xué)編程</title> 
<style>
    a:link {text-decoration: none; color:blue;}/*未訪(fǎng)問(wèn)的鏈接顯示為藍(lán)色,text-decoration:none將下劃線(xiàn)隱藏*/
    a:visited {color:black;} /*用戶(hù)已訪(fǎng)問(wèn)過(guò)的鏈接顯示黑色*/
    a:hover {color:pink;}   /*鼠標(biāo)放置在鏈接上時(shí)顯示為粉色*/
    a:active {color:yellow;}  /* 鏈接被點(diǎn)擊那一刻顯示黃色 */
</style>
</head>
<body>
    <p><b><a href="/css/" target="_blank">這是一個(gè)鏈接</a></b></p>
</body>
</html>  

try

以上就是 W3Cschool 小編為大家介紹的如何修改 HTML 超鏈接樣式的全部?jī)?nèi)容。更多 HTML 相關(guān)內(nèi)容請(qǐng)學(xué)習(xí) HTML 教程


1 人點(diǎn)贊