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
留言
張貼留言