以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

CSS 愈來愈程式化了

6/2 10' icon

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

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

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

<body bgcolor="..." background="..." link="..." alink="..." vlink="..." >

其中:

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 能控制的,大概就可以,例如:



效果如下;

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 效果如下;

Focus 效果如下;

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

 

以下為文章回應區

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

manicure   2017/5/4 上午 04:14:00

Great delivery. Outstanding arguments. Keep up the good effort.

manicure   2017/4/11 下午 06:17:00

I am in fact pleased to glance at this weblog posts which carries lots of useful
data, thanks for providing such information.

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個問題
==> 為何我都買不到這本書??

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