HTML 連結 - 不同顏色
HTML 連結根據其是否被訪問、未被訪問或處於活動狀態,會以不同的顏色顯示。
HTML 連結顏色
預設情況下,連結將如下所示(在所有瀏覽器中):
- 未訪問過的連結顯示為藍色下劃線
- 已訪問過的連結顯示為紫色下劃線
- 活動的連結顯示為紅色下劃線
您可以使用 CSS 更改連結狀態的顏色:
示例
在這裡,未訪問的連結將是綠色且沒有下劃線。已訪問的連結將是粉色且沒有下劃線。活動連結將是黃色並帶有下劃線。此外,當滑鼠懸停在連結上時(a:hover),它將變為紅色並帶有下劃線:
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
自己動手試一試 »
連結按鈕
連結也可以透過使用 CSS 設定樣式,使其看起來像一個按鈕:
這是一個連結示例
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
自己動手試一試 »
要了解更多關於 CSS 的資訊,請訪問我們的 CSS 教程。
HTML 連結標籤
標籤 | 描述 |
---|---|
<a> | 定義超連結 |
有關所有可用 HTML 標籤的完整列表,請訪問我們的 HTML 標籤參考。