您現在的位置: 365建站網 > 365學習 > html如何設置超鏈接顏色?設置超鏈接字體顏色的方法

html如何設置超鏈接顏色?設置超鏈接字體顏色的方法

文章來源:365jz.com     點擊數:1723    更新時間:2018-11-03 20:35   參與評論

HTML設置超鏈接字體顏色的方法一:


基本語法:

<body link="顏色">:它對網頁中所有未單獨設置的元素起作用。

<body alink="顏色">:使用alink可以設置鼠標單擊超鏈接時的顏色

<body vlink="顏色">:使用vlink可以設置已訪問過的超鏈接文字的顏色

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>設置鏈接文字的顏色</title>

</head>

<body link="pink" alink="blue" vlink="red">

    <a href="http://www.PHP.cn">php中文網</a>

</body>

</html>

html設置超鏈接字體顏色的方法二:

使用CSS設置HTML中超鏈接字體顏色:一種是對html全部a超鏈接內字體設置統一的字體顏色,另外一種是對指定對象內的錨文本超鏈接字體設置單獨顏色。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<style>

a{ color:#00F}

a:hover{ color:#F00}/* 鼠標經過懸停字體顏色 */

/* css 注釋說明:以上代碼為設置html中超鏈接統一字體顏色 */

.div a{ color:#090}

.div a:hover{ color:#090}

/* css注釋說明:以上代碼為設置html中.div對象內超鏈接字體顏色 */

</style>

</head>

<body>

<p>測試內容我是統一設置的顏色藍色<a href="http://www.php.cn">php中文網</a></p>

<div class="div">我在div對象內,超鏈接顏色為<a href="http://www.php.cn">php中文網</a></div>

</body>

</html>


定義鏈接樣式

  CSS為一些特殊效果準備了特定的工具,我們稱之為“偽類”。其中有幾項是我們經常用到的,下面我們就詳細介紹一下經常用于定義鏈接樣式的四個偽類,它們分別是:


    :link

    :visited

    :hover

    :active


  因為我們要定義鏈接樣式,所以其中必不可少的就是超級鏈接中的錨標簽--a,錨標簽和偽類鏈接起來書寫的方法就是定義鏈接樣式的基礎方法,它們的寫法如下:


    a:link,定義正常鏈接的樣式;

    a:visited,定義已訪問過鏈接的樣式;

    a:hover,定義鼠標懸浮在鏈接上時的樣式;

    a:active,定義鼠標點擊鏈接時的樣式。


示例:


a:link {

    color:#FF0000;

    text-decoration:underline;

    }

    a:visited {

    color:#00FF00;

    text-decoration:none;

    }

    a:hover {

    color:#000000;

    text-decoration:none;

    }

    a:active {

    color:#FFFFFF;

    text-decoration:none;

    }


上面示例中定義的鏈接顏色是紅色,訪問過后的鏈接是綠色,鼠標懸浮在鏈接上時是黑色,點擊時的顏色是白色。


    如果正常鏈接和已訪問過的鏈接樣式相同,鼠標懸浮和點擊時的樣式相同,也可以將它們合并起來定義:


a:link,

    a:visited     {

    color:#FF0000;

    text-decoration:underline;

    }

    

    a:hover,

    a:active    {

    color:#000000;

    text-decoration:none;

    }


鏈接定義的順序

  沒有規矩不成方圓,雖然鏈接定義寫好了,但它也是有規則的,如果這四項的書寫順序稍有差錯,鏈接的效果可能就沒有了,所以每次定義鏈接樣式時務必確認定義的順序,link--visited--hover-active,也就是我們常說到的LoVe HAte原則(大寫字母就是它們的首字母)。 


定義局部鏈接樣式

  在CSS中寫上a:link{}這樣的定義會使整個頁面的鏈接樣式改變,但有些局部鏈接需要特殊化,這個問題也不難解決,只要在鏈接樣式定義的前面加上指定的id或class就可以了。


  示例:


#sidebar a:link,

    #sidebar a:visiteid  {

    color:#FF0000;

    text-decoration:none;

    }

    #sidebar a:hover,

    #sidebar a:active  {

    color:#000000;

    text-decoration:underline;

    }


調用方法:


<div id="sidebar"><a href="http://www.hugecrab.com" target="_blank">365建站<a></div>


class的定義方法和id相同,只要將#sidebar改為.sidebar就行了,還有一種方法是直接定義鏈接的樣式,那樣更直接,不過調用時比較麻煩,需要給每個特定的鏈接加上定義的代碼。


  示例:


a.redlink a:link,

    a.redlink a:visited  {

    color:#FF0000;

    text-decoration:none;

    }

    a.redlink a:hover,

    a.redlink a:active  {

    color:#000000;

    text-decoration:underline;

    background:#FFFFFF;

    } 


調用方法:


<div><a href="http://www.hugecrab.com" target="_blank" class="redlink" >365建站一<a></div>


示例一:

定義全局鏈接,定義鏈接是黑色,訪問后的鏈接是紫色,鼠標懸浮在鏈接上是藍色,點擊時是白色。

a:link{
color:#000;
text-decoration:none;
}
a:visited{
color:#F0F;
text-decoration:none;}
a:hover{
color:#00F;
text-decoration:none;}
a:active{
color:#FFF;
text-decoration:none;}


 示例二:


如果正常鏈接和已訪問鏈接樣式相同,鼠標懸浮和點擊時的樣式相同,也可以將它們合并起來定義:

a:link,
a:visited{
color:#F0F;
text-decoration:none;}
a:hover,
a:active{
color:#000;
text-decoration:none;}


示例三:

定義局部鏈接樣式,在CSS中寫上a:link這樣的定義會使整個頁面的鏈接樣式改變,如果有些局部鏈接需要特殊化,則在鏈接樣式定義的前面加上指定的id或class。


#s a:link,
#s a:visited{
color:#F0F;
text-decoration:none;}
#s a:hover,
#s a:active{
color:#000;
text-decoration:none;}


調用:

<ul id="s">
<li><a href="#">蘋果</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">番茄</a></li>
</ul>


如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (1723人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 精品无码av人妻受辱| 嫩草影院网站进入| 欧美高清大屁股xxxxx| 国产精品尹人在线观看| 一本大道中文日本香蕉| 亚洲欧洲日产国码在线| 亚洲精品高清国产一线久久| 把老师强奷到舒服的动态图| 国产a在线不卡| 无码午夜福利视频1000集0..| 成年美女黄又污网站色大免费全看| 一小时处破之好疼高清视频| 天天色情| 在办公室里揉护士的胸| 大杳蕉便八在线综合网络 | 免费人做人爱视频| 无遮挡色视频真人免费下载| freesex呦交| 亲胸揉胸膜下刺激视频免费看| 国产高清在线精品一区不卡| 夜间男生福利免费网站| 四虎最新紧急更新地址| 琪琪电影网午夜理论片| 公和我做好爽添厨房在线观看| 免费全部高h视频无码| 午夜永久免费爽爽爽影院| 同桌白丝袜双腿夹得我好爽好紧| zozozo另类人禽交| 高潮床戏有娇喘声视频大全| 国产av无码专区亚洲av毛片| 啦啦啦视频在线观看免费观看1| http://www.lwjskz.com