利用css設(shè)置四種不同樣式超鏈接的方法

html超鏈接樣式包括：正在連接、訪問(wèn)過(guò)、鼠標(biāo)盤(pán)旋，各個(gè)文本字體樣式設(shè)置如下

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有唐山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

style type="text/css"

!-- 超鏈接文本字體設(shè)置--

A {

FONT-SIZE: 16px; FONT-FAMILY: 宋體

}

!-- 超鏈接正在連接的文本字體設(shè)置--

A:link {

COLOR: #0055bb; TEXT-DECORATION: none

}

!-- 超鏈接訪問(wèn)過(guò)的文本字體設(shè)置--

A:visited {

COLOR: #0077bb; TEXT-DECORATION: none

}

!-- 超鏈接鼠標(biāo)盤(pán)旋的文本字體設(shè)置--

A:hover {

COLOR: #ff0000; TEXT-DECORATION: none

}

/style

css鏈接樣式怎么設(shè)置

css可以使用下面的幾種偽類(lèi)來(lái)設(shè)置鏈接樣式：

鏈接的四種狀態(tài)：

a:link - 普通的、未被訪問(wèn)的鏈接

a:visited - 用戶(hù)已訪問(wèn)的鏈接

a:hover - 鼠標(biāo)指針位于鏈接的上方

a:active - 鏈接被點(diǎn)擊的時(shí)刻

當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時(shí)，要按照如下規(guī)則：

a:hover 必須位于 a:link 和 a:visited 之后

a:active 必須位于 a:hover 之后

CSS設(shè)置鏈接的樣式

鏈接是從一個(gè)網(wǎng)頁(yè)到另一個(gè)網(wǎng)頁(yè)的連接，CSS可通過(guò)不同屬性以各種不同方式來(lái)設(shè)置鏈接的樣式。下面本篇文章就來(lái)給大家介紹一下CSS設(shè)置鏈接的樣式的方法，希望對(duì)大家有所幫助。

在討論CSS屬性之前，先了解鏈接的狀態(tài)是非常重要的。鏈接可以存在于不同的狀態(tài)，并且可以使用偽類(lèi)進(jìn)行樣式設(shè)置。

下面給出了四種鏈接狀態(tài)：

●　a：link =這是一個(gè)正常的，未訪問(wèn)過(guò)的鏈接。

●　a：visited =這是用戶(hù)至少訪問(wèn)過(guò)一次的鏈接

●　a：hover =當(dāng)鼠標(biāo)懸停在它上面時(shí)，這是一個(gè)鏈接

●　a：active =這是一個(gè)剛剛點(diǎn)擊的鏈接。

語(yǔ)法：

color_name可以采用任何格式，如顏色名稱(chēng)（green）、十六進(jìn)制值（#5570f0）或RGB值-rgb(25, 255, 2)。還有另一個(gè)狀態(tài)“a:focus”，用于在用戶(hù)使用Tab鍵瀏覽鏈接時(shí)進(jìn)行聚焦。

鏈接的默認(rèn)值：

●　默認(rèn)情況下，創(chuàng)建的鏈接帶有下劃線(xiàn)。

●　當(dāng)鼠標(biāo)懸停在鏈接上方時(shí)，它會(huì)變?yōu)槭中螆D標(biāo)。

●　正常/未訪問(wèn)的鏈接為藍(lán)色。

●　訪問(wèn)過(guò)的鏈接有紫色。

●　活動(dòng)鏈接為紅色。

●　鏈接聚焦時(shí)，它周?chē)幸粋€(gè)輪廓。

例：

效果圖：

CSS如何設(shè)置鏈接的樣式？

下面是鏈接的一些基本CSS屬性：

●　color屬性

●　font-family屬性

●　text-decoration屬性

●　background-color屬性

1、color屬性： 此CSS屬性用于更改鏈接文本的顏色。

語(yǔ)法：

例：

效果圖：

2、font-family屬性 ：此屬性用于使用font-family屬性更改鏈接的字體類(lèi)型。

語(yǔ)法：

3、text-decoration屬性： 此屬性主要用于向鏈接刪除或添加下劃線(xiàn)等修飾。

語(yǔ)法：

例：

效果圖：

4、background-color屬性 ：此屬性用于設(shè)置鏈接的背景顏色。

語(yǔ)法：

例：使用以下css屬性

效果圖：

更多 web前端 知識(shí)，請(qǐng)查閱 HTML中文網(wǎng) ！！

如何用CSS控制超鏈接字體樣式？

先一個(gè)例子，比如說(shuō)下面這段代碼：

style type="text/css"

a:link {text-decoration:none;color:blue;}

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

a:active {text-decoration:none;color:yellow;}

a:visited {text-decoration:none;color:green;}/style其效果是：未被點(diǎn)擊時(shí)超鏈接文字無(wú)下劃線(xiàn)，顯示為藍(lán)色；當(dāng)鼠標(biāo)放在鏈接上時(shí)有下劃線(xiàn)，鏈接文字顯示為紅色；當(dāng)點(diǎn)擊鏈接時(shí)，即鏈接被激活，鏈接無(wú)下劃線(xiàn)，顯示為黃色；當(dāng)點(diǎn)擊鏈接后，也就是鏈接已被訪問(wèn)過(guò)后，鏈接無(wú)下劃線(xiàn)，顯示為綠色。其中：

a:link 指正常的未被訪問(wèn)過(guò)的鏈接；

a:hover 指鼠標(biāo)在鏈接上；

a:active 指正在點(diǎn)的鏈接；

a:visited 指已經(jīng)訪問(wèn)過(guò)的鏈接。參數(shù)設(shè)置：

text-decoration是文字修飾效果的意思；none參數(shù)表示超鏈接文字不顯示下劃線(xiàn)；underline參數(shù)表示超鏈接的文字有下劃線(xiàn)；如果是overline則給超鏈接文字加上劃線(xiàn)；換成line-through則是給超鏈接文字加上刪除線(xiàn)；blink則使文字在閃爍。

color:blue，color:red等是給鏈接文字加顏色。

還可以添加其他參數(shù)，如：

font-weight:bold給鏈接文字加粗；font-size:16pt設(shè)置鏈接文字字體大?。籦ackground:#ffd306給鏈接文字加背景顏色；font-style:italic鏈接文字傾斜；border-bottom:1px dashed #51bfe0給鏈接文字加虛線(xiàn)，其中1px是虛線(xiàn)的粗細(xì)度，數(shù)值越大越粗，dashed表示虛線(xiàn)，#51bfe0是虛線(xiàn)顏色，如果要給鏈接文字加虛線(xiàn)的話(huà)，就不用加下劃線(xiàn)了。

例如下面這兩段代碼：

style type="text/css"

a:hover {text-decoration:none;border-bottom:1px dashed red;}/style

其效果是當(dāng)鼠標(biāo)放在鏈接上的時(shí)候鏈接出現(xiàn)紅色虛下劃線(xiàn)。

style type="text/css"

a:hover {text-decoration:underline;font-weight:bold;color:red;background:blue;font-style:italic;}/style

其效果就是當(dāng)鼠標(biāo)放在鏈接上的時(shí)候，鏈接有下劃線(xiàn)，字體加粗，鏈接文字為紅色，背景為藍(lán)色，文字傾斜。

如果要去掉所有鏈接的下劃線(xiàn)則可以用下面這段代碼：

本文題目：css鏈接樣式例子怎么打,如何鏈接css樣式
網(wǎng)頁(yè)網(wǎng)址：http://www.rwnh.cn/article36/phpepg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、虛擬主機(jī)、品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器、面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)