首頁 > web前端 > css教學 > CSS怎麼設定連結樣式

CSS怎麼設定連結樣式

(*-*)浩
發布: 2019-11-30 14:13:25
原創
4271 人瀏覽過

CSS怎麼設定連結樣式

我們能夠以不同的方法為連結設定樣式。

設定連結的樣式                          ( 建議學習:CSS入門樣式 )

## 能夠設定屬性時連結樣式的樣式(#SSS)#」有許多屬性連結風格(#S.例如color, font-family, background 等等)。

連結的特殊性在於能夠根據它們所處的狀態來設定它們的樣式。

連結的四個狀態:

a:link - 普通的、未被訪問的連結

a:visited - 用戶已造訪的連結

a:hover - 滑鼠指標位於連結的上方

a:active - 連結被點擊的時刻

##實例

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */
</style>
</head>

<body>
<p><b><a href="/index.html" 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>
登入後複製

當為連結的不同狀態設定樣式時,請依照以下一個序規則:

a:hover 必須位於a:link 和a:visited 之後

#a:active 必須位於a:hover 之後

以上是CSS怎麼設定連結樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板