當在設計網頁的時候，橙子經常都要設定連結，而連結的位置和風格並非都是一樣的，有時要多種改變，就必須做點設定，像是平常未點連結時是一個顏色，當滑鼠滑過後，是另外個顏色，當連結過後，連結又是另一個顏色...等，在以前的網頁設計中，無法很容易改變其性質，現在可以利用虛擬類別選擇器來設定！
橙子先寫個html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>魚和橙的結合</title> </head> <body> <p><a href="http://goliimage.pixnet.net/blog">魚與橙的結合</a></p> </body> </html>
執行結果：
結果可得以上畫面，各位可看到"魚與橙的結合"的字樣變成藍色的，我們將滑鼠移到連結上，不按任何鍵，發現沒有任何變化，再當我們在連結上，點住滑鼠右鍵不放，可發現以下結果
連結的地方變成了紅色的字了，在放開後完成了連結，就連結到別得位置，橙子再將回到原連結畫面，可發現當下的連結字樣變成了紫色了。
現在橙子就開始說明了，裡面包含了4個動作，
1、原連結（滑鼠不在連結上）- a:link。
2、滑鼠滑過（滑鼠在連結上）- a:hover。
3、滑鼠點下（滑鼠在連結上）- a:active。
4、連結已點過（表示連結已參訪過）- a:visited。
就以上4個動作，咋使用呢？就以下程式來說明，橙子先來想一個風格
1、連結的字為白字粗體
2、連結剛開始是背景是灰色
3、滑鼠滑過後，背景為黑色
4、滑鼠點下連結，背景為紅色
5、連結連過後，連結變成藍色的
我將以上的程式一次寫完，再來說明
<!doctype html> <html> <head> <metacharset="utf-8"> <title>魚和橙的結合</title> <style type="text/css"> a:link { color: white; background-color: gray; } a:hover { background-color: black; } a:active { background-color: red; } a:visited { background-color: blue; } </style> </head> <body> <p><a href="http://goliimage.pixnet.net/blog">魚與橙的結合</a></p> </body> </html>
CSS部份
<style type="text/css"> a:link { color: white; background-color: gray; } a:hover { background-color: black; } a:active { background-color: red; } a:visited { background-color: blue; } </style>
也就是說1~2的要求，是由 a:link設定，設定連結的基本設定。
3的要求，為a:hover設定，設定連結在滑鼠滑過時，產生的動作變化。
4的要求，為a:active設定，設定連結在滑鼠左鍵點下去時，產生的動作變化。
5的要求，為a:visited設定，設定連結在點下去過，產生的動作變化。
結果如下：
1.未作任何動作
2.滑鼠遊標在連結上時
3.滑鼠點下不放時的情況
4.連結過後的結果
結論：
當你在設定這幾個條件後，你就可在上面做連結上的變化，你也無須學習flash的動化，即可完成滑鼠動作的改變，其實是很容易的。
各位在第4個動作是否有些疑問，就是為何字體會變成紫色，不是定義成白色的嗎？因為系統內定為紫色的，如果還是要一樣是白色的話，那就在a:visited裡面，在加上 color= white; 的css ，就行了。
沒有留言:
張貼留言