您好,登錄后才能下訂單哦!
這篇文章主要介紹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.5655pk.com/" target="_blank">HuluMiao</a> </body> </html>
注釋:本實例演示了更高級的示例,結合了若干種 CSS 屬性,來把鏈接顯示為方框。
以上是“CSS如何為鏈接設置樣式”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。