css連結link
阿新 • • 發佈：2019-01-01
連結可以使用任何css屬性，包括字型、顏色、背景等等、
連結有四個狀態，可在四個狀態時設定不同的屬性
a:link - 正常，未訪問過的連結
a:visited - 使用者已訪問過的連結
a:hover - 當用戶滑鼠放在連結上時
a:active - 連結被點選的那一刻
當為連結的不同狀態設定樣式時，需要遵循a:hover 必須位於a:link 和a:visited之後，a:active 必須位於 a:hover 之後
例如編輯一個如下的html檔案
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> a:link {color:red;} /* 未訪問連結*/ a:visited {color:green;background-color：gray} /* 已訪問連結 */ a:hover {color:pink;font-size:20px} /* 滑鼠移動到連結上 */ a:active {color:yellow;} /* 滑鼠點選時 */ </style> </head> <body> <p><b><a href="http://www.baidu.com" target="_blank">這是一個連結</a></b></p> <p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 之後，需要嚴格按順序才能看到效果。</p> <p><b>注意：</b> a:active 必須在 a:hover 之後。</p> </body> </html>
初次點開時顯示如下，將滑鼠放在連結上顯示粉色，並且字型變大；點選時顯示黃色；點選之後顯示綠色，並且背景為灰色
連結還可以使用text-decoration:none來設定去掉連結的下劃線