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




Lelio Vieira Carneiro Junior   2017/11/10 上午 08:10:00

Woah! I'm really enjoying the template/theme of this website.
It's simple, yet effective. A lot of times it's difficult to get that "perfect balance" between usability and visual appearance.
I must say you have done a excellent job with this.
Also, the blog loads super fast for me on Safari.
Excellent Blog!

How do I stretch my Achilles tendon?   2017/8/21 下午 05:08:00

I have been surfing online more than 4 hours today, yet I never found any
interesting article like yours. It's pretty worth enough for me.
Personally, if all site owners and bloggers made good content as you did, the internet will
be much more useful than ever before.

fantasticbandan76.exteen.com   2017/8/12 下午 07:43:00

Greetings! I've been reading your blog for some
time now and finally got the courage to go ahead and give you a shout out from New
Caney Tx! Just wanted to say keep up the great job!

What do eccentric heel drops do?   2017/8/4 上午 09:18:00

Excellent beat ! I would like to apprentice while
you amend your website, how can i subscribe for a weblog site?

The account helped me a applicable deal. I were tiny bit familiar of this your broadcast provided vivid transparent idea

Can you stretch to get taller?   2017/7/31 下午 12:26:00

This article will assist the internet users for setting up new webpage
or even a blog from start to end.

http://walterlarman.hatenablog.com/about   2017/7/31 上午 03:28:00

I have to thank you for the efforts you have put in writing this site.
I am hoping to check out the same high-grade content from you in the future as well.

In truth, your creative writing abilities has encouraged me to get my own, personal blog
now ;)

What do you do for Achilles tendonitis?   2017/7/28 上午 11:18:00

I'm curious to find out what blog system you're utilizing?
I'm experiencing some small security problems with my latest website
and I would like to find something more safeguarded.
Do you have any suggestions?

Can better posture make you taller?   2017/7/23 下午 07:59:00

Spot on with this write-up, I honestly think this site needs much more attention. I'll probably be returning to
see more, thanks for the advice!

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

==> 為何我都買不到這本書??

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