CSS中通過四個偽類來定義鏈接的樣式,分別是:

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、象州網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為象州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
a:link ? ? ? ? 鏈接默認(rèn)的樣式
a:visited ? ?鏈接已被訪問過時的樣式
a:hover ? ? 鼠標(biāo)懸浮在鏈接上的樣式
a:active ? ? 點擊鏈接時候的樣式
一般定義這四種樣式的是“LVHA”的順序來寫樣式,不然可能出現(xiàn)樣式覆蓋問題;
定義class樣式一般分兩種,一種在a標(biāo)簽上,一種在a標(biāo)簽外面,實例如下:
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
設(shè)定圖片超鏈接,用css樣式來實現(xiàn),其實就是給這個圖片的塊添加超鏈接,我們可以通過在這個塊的前面添加一個a標(biāo)簽來實現(xiàn),然后填寫上你所需要的鏈接地址就行了,通過代碼來理解:
html
head
style
#div1{
width:660px;
height:400px;
border:1px soild #f00;
}
/style
/head
body
div id='div1'
a href=""img src='圖片地址'/a
/div
/body
/html
鏈接是從一個網(wǎng)頁到另一個網(wǎng)頁的連接,CSS可通過不同屬性以各種不同方式來設(shè)置鏈接的樣式。下面本篇文章就來給大家介紹一下CSS設(shè)置鏈接的樣式的方法,希望對大家有所幫助。
在討論CSS屬性之前,先了解鏈接的狀態(tài)是非常重要的。鏈接可以存在于不同的狀態(tài),并且可以使用偽類進(jìn)行樣式設(shè)置。
下面給出了四種鏈接狀態(tài):
● a:link =這是一個正常的,未訪問過的鏈接。
● a:visited =這是用戶至少訪問過一次的鏈接
● a:hover =當(dāng)鼠標(biāo)懸停在它上面時,這是一個鏈接
● a:active =這是一個剛剛點擊的鏈接。
語法:
color_name可以采用任何格式,如顏色名稱(green)、十六進(jìn)制值(#5570f0)或RGB值-rgb(25, 255, 2)。還有另一個狀態(tài)“a:focus”,用于在用戶使用Tab鍵瀏覽鏈接時進(jìn)行聚焦。
鏈接的默認(rèn)值:
● 默認(rèn)情況下,創(chuàng)建的鏈接帶有下劃線。
● 當(dāng)鼠標(biāo)懸停在鏈接上方時,它會變?yōu)槭中螆D標(biāo)。
● 正常/未訪問的鏈接為藍(lán)色。
● 訪問過的鏈接有紫色。
● 活動鏈接為紅色。
● 鏈接聚焦時,它周圍有一個輪廓。
例:
效果圖:
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前端 知識,請查閱 HTML中文網(wǎng) !!
css可以使用下面的幾種偽類來設(shè)置鏈接樣式:
鏈接的四種狀態(tài):
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標(biāo)指針位于鏈接的上方
a:active - 鏈接被點擊的時刻
當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時,要按照如下規(guī)則:
a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后
html超鏈接樣式包括:正在連接、訪問過、鼠標(biāo)盤旋,各個文本字體樣式設(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
當(dāng)前名稱:css怎么創(chuàng)建超鏈接樣式,超鏈接復(fù)合css樣式
URL分享:http://chinadenli.net/article5/dsiepii.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計公司、微信小程序、自適應(yīng)網(wǎng)站、定制網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站維護
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)