回首頁 與我們連絡 網站地圖 加入我的最愛



 





所謂的虛擬類別就是讓我們可以很輕易的控制被包括在
<A>與</A>鏈結標籤中的文字鏈結字串的變化的CSS標準性質。包括了:尚未瀏覽過的鏈結字串顏色、正要開始瀏覽的鏈結字串顏色、已經瀏覽過的鏈結字串顏色及滑鼠指標移至鏈結字串時所顯現的文字外觀顏色等四種,特別要注意的是:前三種屬性設定不管是 NetScapt4、IE3、IE4 都有支援解析;但是第四種屬性也就是:設定滑鼠指標移至鏈結字串時所顯現的文字外觀顏色屬性,這個虛擬類別屬性目前只有IE4 有支援解析!
A:link 尚未瀏覽過的鏈結字串顏色。
A:active 正要開始瀏覽的鏈結字串顏色。
A:visited 已經瀏覽過的鏈結字串顏色。
A:hover 滑鼠指標移至鏈結字串時所顯現的文字外觀顏色。

標準用法:
以下是一個簡短的HTML網頁範例,
我們宣告CSS的虛擬類別控制被包括在<A>與</A>鏈結標籤中的文字鏈結字串:尚未瀏覽過的鏈結字串顏色為綠色正要開始瀏覽的鏈結字串顏色為藍色已經瀏覽過的鏈結字串顏色為咖啡色滑鼠指標移至鏈結字串時所顯現的文字外觀顏色為紅色

<html><head>
<STYLE>
<!--

A:link {color:Green}
A:active {color:Blue}
A:visited {color:#772B1A}
A:hover {color:Red}
-->
</STYLE>

<title>虛擬類別控制範例1</title>
</head><body>
<a class=lin href="webuseaex1.htm">虛擬類別測試1</a>
</body></html>

[實例展示]


進階用法:

我們除了可以控制被包括在<A>與</A>鏈結標籤中的文字鏈結字串顏色外還可以加上鏈結文字的字型與文字大小的控制:尚未瀏覽過的鏈結字串顏色為綠色字體大小為14pt正要開始瀏覽的鏈結字串顏色為藍色已經瀏覽過的鏈結字串顏色為咖啡色字體大小為16pt滑鼠指標移至鏈結字串時所顯現的文字外觀顏色為紅色大小為16pt字型為標楷體

<html><head>
<STYLE>
<!--

A:link {color:Green;font-size:14pt}
A:active {color:Blue}
A:visited {color:#772B1A;font-size:16pt}
A:hover {color:Red;font-size:16pt;font-family:標楷體}
-->
</STYLE>

<title>虛擬類別控制範例2</title>
</head><body>
<a class=lin href="webuseaex2.htm">虛擬類別測試2</a>
</body></html>

[實例展示]


特殊用法:

  • 經過上列的範例演練後你應該了解了CSS的威力了吧!告訴你!這樣還算遜啦!有沒有看到鏈結字串下方還有一條底線?很醜對吧?!有沒有發覺本網頁中的鏈結字串就少了那醜醜的底線?

  • 要如何消除那醜醜的底線呢?告訴你一個CSS的文字裝飾屬性: text-decoration ,這個屬性有五個屬性值,列表如下:

    none 無變化,什麼都沒有。
    underline 加上底線。
    overline 加上頂線。
    line-through 加上刪除線。
    blink 閃爍文字。
  • 好的!知道了這個CSS的文字裝飾屬性: text-decoration後,只要你加入 text-decoration:none 這組CSS屬性與屬性值之後就可以消除鏈結字串下方那醜醜的底線啦!

下面這個範例不僅使滑鼠指標移至鏈結字串時所顯現的文字外觀顏色為紅色大小為16pt字型為標楷體外還消除了鏈結文字的底線,同時我們還設定了已經瀏覽過的鏈結字串顏色為咖啡色字體大小為16pt並且還幫它劃上了一條刪除線呦!

<html><head>
<STYLE>
<!--

A:link {color:Green;font-size:14pt}
A:active {color:Blue}
A:visited {color:#772B1A;font-size:16pt;text-decoration:line-through}
A:hover {color:Red;font-size:16pt;font-family:標楷體;text-decoration:none}
-->
</STYLE>

<title>虛擬類別控制範例3</title>
</head><body>
<a class=lin href="webuseaex3.htm">虛擬類別測試3</a>
</body></html>

[實例展示]

 

CSS 教學文件
CSS入門講座
基礎網頁應用
進階網頁應用
結合JavaScript應用
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為