以下為本站文章分類清單

  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 才對。

 

以下為文章回應區

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

how to stop a foot pain   2017/7/3 下午 09:18:00

Hello there, You've done an excellent job.
I will definitely digg it and individually recommend to my friends.
I'm confident they'll be benefited from this web site.

foot pain big toe joint   2017/7/2 下午 03:49:00

First off I would like to say fantastic blog! I had a quick question that I'd like to ask if
you do not mind. I was curious to know how you center yourself and clear your thoughts before writing.
I've had a hard time clearing my thoughts in getting my thoughts
out. I truly do enjoy writing however it just seems like the first 10 to 15 minutes are generally wasted
simply just trying to figure out how to begin. Any recommendations or tips?
Many thanks!

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

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