CSS Styling - Links

Links 可以用如color,font-family,background等來改變style

  • Link有四種狀態
    • a:link           -  就普通正常的link,還沒被點擊過的  a normal, unvisited link 
    • a:visited      -  一個被使用者點擊過的link            a link the user has visited
    • a:hover       -  使用者滑鼠經過時的link               a link when the user mouses over it
    • a:active       -  正被點擊時的link                        a link the moment it is clicked
  • 範例
    • a:link {color:#FF0000;}     /* unvisited link */
    • a:visited {color:#00FF00;}  /* visited link */
    • a:hover {color:#FF00FF;}    /* mouse over link */
    • a:active {color:#0000FF;}   /* selected link */
    • 原W3School的Demo
    • 可以針對"This is a link"去測試上面說的四種狀態!
  • 當要設定數種Link狀態的style時,有些順序要注意!
    • a:hover必須在 a:link跟 a:visited 之後
    • a:active必須在a:hover之後

Text Decoration

  • text-decoration 這個property最常用來去除超連結的底線
  • 範例
    • a:link {text-decoration:none;}          /* 讓一般正常的link沒有底線 */
    • a:visited {text-decoration:none;}       /* 讓被點過的link沒有底線  */
    • a:hover {text-decoration:underline;}    /* 滑鼠移過去時會有底線*/
    • a:active {text-decoration:underline;}   /* 點擊時會有底線     */
    • 原W3School的Demo

Background Color

  • background-color 這個property是指定link的背景顏色
  • 範例
    • a:link {background-color:#B2FF99;}
    • a:visited {background-color:#FFFF85;}
    • a:hover {background-color:#FF704D;}
    • a:active {background-color:#FF704D;}
    • 原W3School的Demo

留言

這個網誌中的熱門文章

[翻譯] 介紹現代網路負載平衡與代理伺服器

[MySQL] schema 與資料類型優化