html超鏈接樣式包括:正在連接、訪問過、鼠標(biāo)盤旋,各個(gè)文本字體樣式設(shè)置如下
10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗(yàn),可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(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
}
!-- 超鏈接訪問過的文本字體設(shè)置--
A:visited {
COLOR: #0077bb; TEXT-DECORATION: none
}
!-- 超鏈接鼠標(biāo)盤旋的文本字體設(shè)置--
A:hover {
COLOR: #ff0000; TEXT-DECORATION: none
}
/style
css可以使用下面的幾種偽類來設(shè)置鏈接樣式:
鏈接的四種狀態(tài):
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
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 之后
鏈接是從一個(gè)網(wǎng)頁到另一個(gè)網(wǎng)頁的連接,CSS可通過不同屬性以各種不同方式來設(shè)置鏈接的樣式。下面本篇文章就來給大家介紹一下CSS設(shè)置鏈接的樣式的方法,希望對大家有所幫助。
在討論CSS屬性之前,先了解鏈接的狀態(tài)是非常重要的。鏈接可以存在于不同的狀態(tài),并且可以使用偽類進(jìn)行樣式設(shè)置。
下面給出了四種鏈接狀態(tài):
● a:link =這是一個(gè)正常的,未訪問過的鏈接。
● a:visited =這是用戶至少訪問過一次的鏈接
● a:hover =當(dāng)鼠標(biāo)懸停在它上面時(shí),這是一個(gè)鏈接
● a:active =這是一個(gè)剛剛點(diǎn)擊的鏈接。
語法:
color_name可以采用任何格式,如顏色名稱(green)、十六進(jìn)制值(#5570f0)或RGB值-rgb(25, 255, 2)。還有另一個(gè)狀態(tài)“a:focus”,用于在用戶使用Tab鍵瀏覽鏈接時(shí)進(jìn)行聚焦。
鏈接的默認(rèn)值:
● 默認(rèn)情況下,創(chuàng)建的鏈接帶有下劃線。
● 當(dāng)鼠標(biāo)懸停在鏈接上方時(shí),它會(huì)變?yōu)槭中螆D標(biāo)。
● 正常/未訪問的鏈接為藍(lán)色。
● 訪問過的鏈接有紫色。
● 活動(dòng)鏈接為紅色。
● 鏈接聚焦時(shí),它周圍有一個(gè)輪廓。
例:
效果圖:
CSS如何設(shè)置鏈接的樣式?
下面是鏈接的一些基本CSS屬性:
● color屬性
● font-family屬性
● text-decoration屬性
● background-color屬性
1、color屬性: 此CSS屬性用于更改鏈接文本的顏色。
語法:
例:
效果圖:
2、font-family屬性 :此屬性用于使用font-family屬性更改鏈接的字體類型。
語法:
3、text-decoration屬性: 此屬性主要用于向鏈接刪除或添加下劃線等修飾。
語法:
例:
效果圖:
4、background-color屬性 :此屬性用于設(shè)置鏈接的背景顏色。
語法:
例:使用以下css屬性
效果圖:
更多 web前端 知識(shí),請查閱 HTML中文網(wǎng) ?。?/p>
先一個(gè)例子,比如說下面這段代碼:
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í)超鏈接文字無下劃線,顯示為藍(lán)色;當(dāng)鼠標(biāo)放在鏈接上時(shí)有下劃線,鏈接文字顯示為紅色;當(dāng)點(diǎn)擊鏈接時(shí),即鏈接被激活,鏈接無下劃線,顯示為黃色;當(dāng)點(diǎn)擊鏈接后,也就是鏈接已被訪問過后,鏈接無下劃線,顯示為綠色。其中:
a:link 指正常的未被訪問過的鏈接;
a:hover 指鼠標(biāo)在鏈接上;
a:active 指正在點(diǎn)的鏈接;
a:visited 指已經(jīng)訪問過的鏈接。參數(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)色,文字傾斜。
如果要去掉所有鏈接的下劃線則可以用下面這段代碼: