CSS - 超連結樣式語法應用

滑鼠的連結狀態有四種
link:就是一般的連結狀態
hover:當滑鼠移到連結上時的狀態
active:當滑鼠按下時的連結狀態
visited:當連結按過時的狀態

最簡單的連結樣式作法
就是在＜head＞＜/head＞之間插入以下語法

<style type="text/css">
a:link {
    font-size: 12px;
    color: #FF9966;
    text-decoration: none;
}

a:visited {
    font-size: 12px;
    color: #FF9966;
    text-decoration: none;

}

a:hover {
    font-size: 12px;
    color: #FF9966;
    text-decoration: underline;
}
</style>


但這種方法會作用於所有網頁中的連結，無法替不同的連結制定不同的樣式了

下面就介紹另一種方法
在相同網頁製作不同類型的連結
.linkstyle - 先定義單純的文字樣式表
.linkstyle a - 表示當文字成為連結時的樣式
.linkstyle a:visited - 表示已經拜訪過的連結樣式
.linkstyle a:hover - 表示這個連結滑鼠移過時的樣式
.linkstyle a:active - 表示作用中的連結樣式
所以透過這種方法你可以設定很多種連結樣式
在一個網頁套用不同性質的連結

.linkstyle-1 {
    font-size: 12px;
    color: #FF9966;
}

.linkstyle-1 a{
    font-size: 12px;
    color: #FF9966;
    text-decoration: none;
}

.linkstyle-1 a:hover{
    font-size: 12px;
    color: #FF9966;
    text-decoration: underline;
}

-雲遊山水為知已逍遙一生而忘齡- 電腦神手