怎么在CSS里定義超鏈接的樣式？

CSS中通過(guò)四個(gè)偽類來(lái)定義鏈接的樣式，分別是：

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、網(wǎng)站建設(shè)、禮縣網(wǎng)絡(luò)推廣、小程序設(shè)計(jì)、禮縣網(wǎng)絡(luò)營(yíng)銷、禮縣企業(yè)策劃、禮縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供禮縣建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：aaarwkj.com

a:link ? ? ? ? 鏈接默認(rèn)的樣式

a:visited ? ?鏈接已被訪問(wèn)過(guò)時(shí)的樣式

a:hover ? ? 鼠標(biāo)懸浮在鏈接上的樣式

a:active ? ? 點(diǎn)擊鏈接時(shí)候的樣式

一般定義這四種樣式的是“LVHA”的順序來(lái)寫樣式，不然可能出現(xiàn)樣式覆蓋問(wèn)題；

定義class樣式一般分兩種,一種在a標(biāo)簽上，一種在a標(biāo)簽外面，實(shí)例如下：

style?type="text/css"LVHA

.aaa?a:link{color:red;text-decoration:none;font-size:14px;}

.aaa?a:visited{color:yellow;text-decoration:none;font-size:14px;}

.aaa?a:hover{color:blue;text-decoration:none;font-size:14px;}

.aaa?a:active{color:green;text-decoration:none;font-size:14px;}

/style

div?class="aaa"a?href="#"在a標(biāo)簽外的標(biāo)簽加class/a/divbr?/

style?type="text/css"LVHA

a.bbb:link{color:red;text-decoration:none;font-size:14px;}

a.bbb:visited{color:yellow;text-decoration:none;font-size:14px;}

a.bbb:hover{color:blue;text-decoration:none;font-size:14px;}

a.bbb:active{color:green;text-decoration:none;font-size:14px;}

/style

a?href="#"?class="bbb"在a標(biāo)簽加/a

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

html超鏈接樣式包括：正在連接、訪問(wèn)過(guò)、鼠標(biāo)盤旋，各個(gè)文本字體樣式設(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)盤旋的文本字體設(shè)置--

A:hover {

COLOR: #ff0000; TEXT-DECORATION: none

}

/style

CSS如何設(shè)置超鏈接?

由于超鏈接有四種不同的狀態(tài)，CSS用偽類來(lái)標(biāo)識(shí)它們。

(1) :link：設(shè)置a對(duì)象在未被訪問(wèn)前的樣式表屬性。

(2) :visited：設(shè)置a對(duì)象在其鏈接地址已被訪問(wèn)過(guò)時(shí)的樣式表屬性。

(3) :hover：設(shè)置對(duì)象在其鼠標(biāo)懸停時(shí)的樣式表屬性。

(4) :active：設(shè)置對(duì)象在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式表屬性。

定義超鏈接的樣式：

定義超鏈接樣式的一般格式是：

選擇符:偽類名 { 樣式表 }

css中關(guān)于超鏈接的四個(gè)屬性正確順序?yàn)椋?/p>

a:link {}

a:visited {}

a:hover {}

a:active {}

偽類名字對(duì)大小寫不敏感，但在定義順序上有要求。:hover必須被置于:link和:visited之后才是有效的，:active必須被置于:hover之后才是有效的。

如果沒(méi)有指定偽類，則默認(rèn)為 :link。

超鏈接默認(rèn)情況下是始總有下滑線的，如果要去掉下劃線，則需要添加樣式 text-decoration: none;

例子：

a:link { color:#dd3409;text-decoration:none; font-size:13px; }/**//* 超鏈接的樣式 */

a:visited { color:#9f301d;text-decoration:none; }

a:visited:hover { color:#9f301d;text-decoration:underline; }

a:hover { color:#dd3409;text-decoration:underline; }

a:active { color:#ff3300;text-decoration:underline; }

如何用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ú)下劃線，顯示為藍(lán)色；當(dāng)鼠標(biāo)放在鏈接上時(shí)有下劃線，鏈接文字顯示為紅色；當(dāng)點(diǎn)擊鏈接時(shí)，即鏈接被激活，鏈接無(wú)下劃線，顯示為黃色；當(dāng)點(diǎn)擊鏈接后，也就是鏈接已被訪問(wèn)過(guò)后，鏈接無(wú)下劃線，顯示為綠色。其中：

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ù)表示超鏈接文字不顯示下劃線；underline參數(shù)表示超鏈接的文字有下劃線；如果是overline則給超鏈接文字加上劃線；換成line-through則是給超鏈接文字加上刪除線；blink則使文字在閃爍。

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

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

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

例如下面這兩段代碼：

style type="text/css"

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

其效果是當(dāng)鼠標(biāo)放在鏈接上的時(shí)候鏈接出現(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í)候，鏈接有下劃線，字體加粗，鏈接文字為紅色，背景為藍(lán)色，文字傾斜。

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

網(wǎng)站名稱：css樣式超鏈接,css樣式超鏈接的4種狀態(tài)如何設(shè)置
轉(zhuǎn)載來(lái)源：http://aaarwkj.com/article10/dssjego.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站、標(biāo)簽優(yōu)化、ChatGPT、

廣告

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