溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css設置超鏈接樣式的方法是什么的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
首先我們來看看初始的超鏈接在瀏覽器上的樣式：
是不是覺得不好看，字體顏色為藍色，還有下劃線，如果在頁面上這樣顯示會很突兀、使得頁面美觀度下降。那么如何修改超鏈接的字體顏色，去掉超鏈接的下劃線呢？下面我們就來介紹一下用css設置超鏈接樣式的方法。
css設置超鏈接中的文本文字樣式
通過簡單的代碼示例，來了解一下css設置超鏈接中文本文字樣式的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超鏈接樣式</title>
<style>
.demo {
width: 300px;
height: 300px;
margin: 100px auto;
}
.demo .a{
text-decoration:none; /*清除下劃線 */
font-family: "楷體";/*設置字體種類*/
color: red;/*設置字體顏色*/
font-size: 30px;/*設置字體大小*/
}
</style>
</head>
<body>
<div class="demo">
<a href="#">億速云</a><br /><br />
<a href="#" class="a">億速云</a>
</div>
</body>
</html>效果圖：
說明：
text-decoration:none; ：清除超鏈接的下劃線
font-*：設置字體的樣式，如：字體種類、大小、風格（斜體、文字傾斜等）、粗細等等。
css 偽類設置動態的超鏈接樣式
:link：選擇未被訪問的鏈接，并設置其樣式；即：定義正常（未被訪問）鏈接的樣式。
:hover：選擇鼠標指針浮動在其上的元素，并設置其樣式；即：定義鼠標懸浮在鏈接上時的樣式。
:active：選擇活動鏈接，并設置其樣式；即：定義鼠標點擊鏈接時的樣式。
:visited：選擇已訪問的鏈接，并設置其樣式；即：定義已訪問過鏈接的樣式。
通過簡單的代碼示例，來了解一下css 偽類設置動態的超鏈接樣式的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超鏈接樣式</title>
<style>
.demo a {
font-size: 30px;
/*設置字體大小*/
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #00FF00;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
a:active {
color: #0081EF;
text-decoration: none;
}
</style>
</head>
<body>
<div class="demo">
<a href="#" class="a">億速云</a>
</div>
</body>
</html>上面示例中定義的鏈接顏色是黑色，訪問過后的鏈接是綠色，鼠標懸浮在鏈接上時是紅色，點擊時的顏色是藍色。大家可以自己動手看看效果。用css 偽類來設置樣式是需要遵循一定的順序的，我們來看看吧。
css 偽類設置樣式的順序：
沒有規矩不成方圓，css 偽類設置鏈接樣式也是有規則的，如果這四項的書寫順序稍有差錯，鏈接的效果可能就沒有了，所以每次定義鏈接樣式時務必確認定義的順序，link--visited--hover-active，也就是我們常說到的LoVe
HAte原則（大寫字母就是它們的首字母）。
感謝各位的閱讀！關于css設置超鏈接樣式的方法是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
