css設(shè)置超鏈接樣式的方法是什么

發(fā)布時間：2020-08-31 13:41:51 來源：億速云閱讀：231 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)css設(shè)置超鏈接樣式的方法是什么的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

首先我們來看看初始的超鏈接在瀏覽器上的樣式：

是不是覺得不好看，字體顏色為藍色，還有下劃線，如果在頁面上這樣顯示會很突兀、使得頁面美觀度下降。那么如何修改超鏈接的字體顏色，去掉超鏈接的下劃線呢？下面我們就來介紹一下用css設(shè)置超鏈接樣式的方法。

css設(shè)置超鏈接中的文本文字樣式

通過簡單的代碼示例，來了解一下css設(shè)置超鏈接中文本文字樣式的方法。

<!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: "楷體";/*設(shè)置字體種類*/
				color: red;/*設(shè)置字體顏色*/
				font-size: 30px;/*設(shè)置字體大小*/
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<a href="#">億速云</a><br /><br />
			<a href="#" class="a">億速云</a>
		</div>
	</body>
</html>

效果圖：

css設(shè)置超鏈接樣式的方法是什么

說明：

text-decoration:none; ：清除超鏈接的下劃線

font-*：設(shè)置字體的樣式，如：字體種類、大小、風格（斜體、文字傾斜等）、粗細等等。

css 偽類設(shè)置動態(tài)的超鏈接樣式

:link：選擇未被訪問的鏈接，并設(shè)置其樣式；即：定義正常（未被訪問）鏈接的樣式。

:hover：選擇鼠標指針浮動在其上的元素，并設(shè)置其樣式；即：定義鼠標懸浮在鏈接上時的樣式。

:active：選擇活動鏈接，并設(shè)置其樣式；即：定義鼠標點擊鏈接時的樣式。

:visited：選擇已訪問的鏈接，并設(shè)置其樣式；即：定義已訪問過鏈接的樣式。

通過簡單的代碼示例，來了解一下css 偽類設(shè)置動態(tài)的超鏈接樣式的方法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>超鏈接樣式</title>
		<style>
			.demo a {

				font-size: 30px;
				/*設(shè)置字體大小*/
			}
			
			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 偽類來設(shè)置樣式是需要遵循一定的順序的，我們來看看吧。

css 偽類設(shè)置樣式的順序：

沒有規(guī)矩不成方圓，css 偽類設(shè)置鏈接樣式也是有規(guī)則的，如果這四項的書寫順序稍有差錯，鏈接的效果可能就沒有了，所以每次定義鏈接樣式時務必確認定義的順序，link--visited--hover-active，也就是我們常說到的LoVe HAte原則（大寫字母就是它們的首字母）。

感謝各位的閱讀！關(guān)于css設(shè)置超鏈接樣式的方法是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

css設(shè)置超鏈接樣式的方法是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽