日本三级免费网站,日本精品久久久久久久久久 ,97av中文字幕

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

在前端網站的開發中，超鏈接是一個重要的組成部分，而好看的超鏈接樣式可以為前端頁面加分。那么如何來設置超鏈接樣式？本篇文章就給大家簡單介紹一下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="#">php中文網</a><br /><br />
			<a href="#" class="a">php中文網</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">php中文網</a>
		</div>
	</body>

</html>

上面示例中定義的鏈接顏色是黑色，訪問過后的鏈接是綠色，鼠標懸浮在鏈接上時是紅色，點擊時的顏色是藍色。大家可以自己動手看看效果。用css 偽類來設置樣式是需要遵循一定的順序的，我們來看看吧。

css 偽類設置樣式的順序：

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

總結：以上就是介紹css設置超鏈接樣式的方法的全部內容，需要注意的就是使用偽類來設置樣式時的順序了。希望能對大家的學習有所幫助，更多相關教程請訪問： CSS基礎視頻教程， HTML視頻教程，bootstrap視頻教程！

以上就是css如何設置超鏈接樣式？css設置超鏈接樣式的方法（代碼示例）的詳細內容，更多請關注php中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

css如何設置超鏈接樣式？css設置超鏈接樣式的方法（代碼示例）

本類教程下載

系統下載排行