溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS如何為鏈接設置樣式，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
CSS 鏈接
我們能夠以不同的方法為鏈接設置樣式。
能夠設置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。
鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式。
鏈接的四種狀態：
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位于鏈接的上方
a:active - 鏈接被點擊的時刻
實例
a:link {color: #FF0000;} /* 未被訪問的鏈接 */
a:visited {color: #00FF00;} /* 已被訪問的鏈接 */
a:hover {color: #FF00FF;} /* 鼠標指針移動到鏈接上 */
a:active {color: #0000FF;} /* 正在被點擊的鏈接 */提示：當為鏈接的不同狀態設置樣式時，請按照以下次序規則：
a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后
文本修飾
text-decoration 屬性大多用于去掉鏈接中的下劃線：
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
背景色
background-color 屬性規定鏈接的背景色：
a:link {background-color: #B2FF99;}
a:visited {background-color: #FFFF85;}
a:hover {background-color: #FF704D;}
a:active {background-color: #FF704D;}
更多鏈接樣式
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}
a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: "微軟雅黑";}
a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}
</style>
</head>
<body>
<p>請把鼠標指針移動到下面的鏈接上，看看它們的樣式變化。</p>
<p><b><a class="one" href="#">這個鏈接改變顏色</a></b></p>
<p><b><a class="two" href="#">這個鏈接改變字體尺寸</a></b></p>
<p><b><a class="three" href="#">這個鏈接改變背景色</a></b></p>
<p><b><a class="four" href="#">這個鏈接改變字體</a></b></p>
<p><b><a class="five" href="#">這個鏈接改變文本的裝飾</a></b></p>
</body>
</html>
高級 - 創建鏈接框
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>
</head>
<body>
<a href="http://www.neiyidaogou.com/" target="_blank">HuluMiao</a>
</body>
</html>注釋：本實例演示了更高級的示例，結合了若干種 CSS 屬性，來把鏈接顯示為方框。
以上是“CSS如何為鏈接設置樣式”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
