CSS連結(Link)

介紹 CSS對連結屬性設定與屬性值應用


範例::CSS 連結屬性的檢視

範例觀測重點 :

動手實驗一下 : 將 屬性值改變看看哪列連結文字大小變化

說明:

a:link {color:#BB0000;} /* 設定尚未點閱過的連結樣式顏色 */

a:visited {color:#00BB00;} /* 設定過去曾經閱過的連結顏色 */

a:hover {color:#BB00FF;} /* 設定滑鼠游標指在連結位置上的樣式顏色 */

a:active {color:#0000BB;} /* 設定上點擊過的連結樣式顏色 */

只改變顏色不過癮嗎?還記得改變文字大小屬性吧!, 動手copy做個實驗:

a:link {color:#BB0000; font-size:16px;} /* 設定尚未點閱過的連結樣式顏色、文字大小16px */

a:hover {color:#BB00FF; font-size:22px;} /* 設定滑鼠游標指在連結位置上的樣式顏色、文字大小22px */

a:hover {color:#1100FF; background:#d0e4fe;} /* 設定滑鼠游標指在連結位置上的背景顏色、文字大小22px */


同時使用不同的超連結文字顏色

說明:

在標籤元素加不同的 class名稱,再定義其css

示範 HTML

<a href="http://www.google.com" class="class1">Google</a>
<a href="http://tw.yahoo.com" class="class2">雅虎</a>

示範 CSS

A.class1 {color:red;}
A.class1:link  {text-decoration: none; color: red;}
A.class1:visited {text-decoration: none; color: red;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: red;}


A.class2 {color:#000;}
A.class2:link {text-decoration: none; color: #000;}
A.class2:visited {text-decoration: none; color: #000;}
A.class2:hover {text-decoration: underline; color: #000;}
A.class2:active {text-decoration: none; color: #000;}