【卜維丰】CSS 愈來愈程式化了

CSS 愈來愈程式化了

6/2 10'

CSS 的程式化起源於虛擬類別 (Pseudo-Classes)，由最早期套用在超連結 <a> 標籤上，包括：

a:link -> 以超連結標籤制作的連結
a:visited -> 已經卜造訪過的連結
a:hover -> 滑鼠停在連結上時
a:active -> 按下超連結時

這幾個虛擬組合，是為了符合 HTML 最原始結構：

其中：

link -> 指定連結文字的顏色，一般預設是 #0000FF 藍色
alink -> 按下連結時的文字顏色，一般是 #FF0000 紅色
vlink -> 已經造訪過的連結文字顏色，一般是#990099 紫色

最初 HTML <body> 標籤屬性中，並沒有規範當滑鼠停在連結上時該怎麼處理，當第一版 CSS 規格完成後，為了 <body> 標籤裡的這些特殊屬性，規範了所謂的虛擬類別，並增加了 hover 用於滑鼠停在連結上時的樣式變化。

一開始，這組虛擬類別，算是超連結 <a> 標籤專用，其他標籤並不支援，漸漸的，尤其 hover 這個動作，開始有瀏覽器套用到其他標籤，例如清單 <li> 標籤，於是造就了「CSS 下拉式目錄」的設計。我能找到最早的資料，可以追溯到 2004 年，這篇登在 A List Apart 文章。

hover 動作如果對應到 Javascript ，就相當於是 onMouseOver 這個事件，這代表，CSS 已經邁入動態了！如果 hover 能跳離只支援 <a> 標籤，那就相當於可以很簡單在任何標籤上加上 onMouseOver 事件控制，只不過，能控制的內容有限，只要 CSS 能控制的，大概就可以，例如：



	
		Hello
		
			顯示 Hello hover 後的效果

效果如下；

Hello
顯示 Hello hover 後的效果

CSS 2.1

CSS 2.1 規範的內容就多了點，比較有趣的是 :active 和: focus。 active 是正作用中，時間點也就是點下滑鼠到放開這之間的時間區段，focus 的時間就長了點，用表單文字欄位來說明，點進去文字欄位到放開滑鼠，在文字欄位上產生游標準備輸入文字，這段短短的時間叫作 active，一旦這個動作完成，文字欄位就進入到 focus 的階段，時間長短就看使用者什麼時候讓其他元件或標籤 active 了。

特別注意：按 W3C 規範，focus 只適用在 <a>、<area>、<button>、<select> 、<textarea> 和 <object> 等標籤，以下的 focus 示範，在 <li> 使用了 button，簡單套用點樣式把 button 的外貌改了。。

所以，這兩個虛擬類別，都很有 Javascript onClick 的味道，onClick 是 Javascript 一個很常用的事件控制器，用來設計和使用者之間互動的常用事件控制器，而 CSS 2.1 現在也具備了這個能力，以上例而言，把 hover 改成 active 和 focus 試試看，原始碼就不重複，以下只展示效果：

Active 效果如下；

Active
顯示 Hello active 後的效果

Focus 效果如下；

如果你認為，BINGO ! 可以摸擬 onClick 了，那就高興的太早。active 類別，作用時間很短，一放開滑鼠事控就消失；focus 僅支援少數幾個標籤，但透過 CSS 的舖排，focus 暫時能用來模擬 onClick，接下的 CSS 發展，估計會像 hover 一樣，先把 focus 擴展到更多標籤支援，最終，還是會出現 :click 才對。

同意轉載，不過麻煩看一下轉載需知

geena 2011/2/11 下午 09:24:00

感謝你的分享....

GARFIELD 2011/2/9 下午 07:11:00

真的很多值得學習的地方

manpower 2010/8/30 上午 10:07:00

哇...好多小細節...我要認真學習了...

david 2010/7/7 上午 10:34:00

my email: davidtang@seed.net.tw

david 2010/7/7 上午 10:33:00

解決CSS一定會遇到的111個問題
==> 為何我都買不到這本書??

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

CSS 愈來愈程式化了

CSS 2.1

以下為文章回應區