CSS標籤選擇器&類選擇器

基本選擇器包括標籤選擇器、類選擇器和ID選擇器三類,其他選擇器都是在這三類選擇器的基礎上組合形成 ##標籤選擇器

示例:

    <style type="text/css">
        p{
            font-size:12px;
            color:red;
         }
    </style>

##類選擇器 標籤選擇器雖然方便,但是也存在缺陷,因爲每個標籤選擇器所定義的樣式不僅僅影響某一個特定對象,而且會影響到頁面中所有同名的標籤。 類選擇器可以爲網頁對象定義不同的樣式類,實現不同元素擁有相同的樣式、相同的元素擁有不同的樣式。 類選擇器以一個"."爲前綴開頭,讓後跟隨一個自定義的類名 如圖: 示例1:

<!doctype html>
<html>
<head>
	<style type="text/css">
		p{
			font-size: 12px;
			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
			color: aqua;
		 }
	</style>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
	<p>問君能有幾多愁,恰似一江春水向東流</p>
	<p>剪不斷,理還亂,是離愁,別是一番滋味在心頭</p>
	<p>獨自莫憑欄,無限江山,別時容易見時難。流水落花春去也,天上人間</p>
</body>
</html>

運行結果: 示例2: 示例3:

<!doctype html>
<html>
<head>
	<style type="text/css">
		p{
			font-size: 12px;
			font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
			color: aqua;
		 }
		.font18px{font-size: 18px;}
		.underline{text-decoration: underline;}
		.italic{font-style: italic;}
	</style>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
	<p class="underline">問君能有幾多愁,恰似一江春水向東流</p>
	<p class="font18px">剪不斷,理還亂,是離愁,別是一番滋味在心頭</p>
	<p class="italic">獨自莫憑欄,無限江山,別時容易見時難。流水落花春去也,天上人間</p>
</body>
</html

類選擇器可以精確控制界面中的每一個對象樣式,而不管這個對象屬於是什麼類型的標籤,同一個類樣式可以被多個對象引用,也不管這個對象是屬於什麼類型的標籤。 通過類選擇器指定的標籤範圍,能夠更精確的控制頁面元素的樣式,避免類樣式對於所有元素的影響。

<!doctype html>
<html>
<head>
	<style type="text/css">
		p{
			font-size: 12px;
			color:brown;
		 }
		.font18px{font-size: 18px;}
		.underline{text-decoration: underline;}
		.italic{font-style: italic;}
		p.font18px{/*指定段落的類樣式*/font-size: 24px;}
	</style>
<meta charset="utf-8">
<title>示例</title>
</head>
<body>
	<div class="font18px">問君能有幾多愁,恰似一江春水向東流</div>
	<p class="font18px">剪不斷,理還亂,是離愁,別是一番滋味在心頭</p>
	<p class="italic">獨自莫憑欄,無限江山,別時容易見時難。流水落花春去也,天上人間</p>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章