2. 如何選擇物件?

我們要如何使用css的程式碼影響網頁中的物件，有以下幾個方式。第一個語法是聲明tag的名稱，例如:

	p{
		color:red;
	}

用這個方式的意思就是網頁中所有的p之內的文字都變成紅色。又或者如下:

	body{
		background:black;
	}

這表示背景顏色為黑色。

使用class

我們可以定義某一個類型的格式，只要定義其class即可，網頁中可以有數個物件使用同一個class名稱。例如:

	<div class="red">
		在div內。
	</div>
	<p class="red">
		在p內。
	</p>

然後在css檔案內定義red類別，如下:

	.red{
		color:red;
	}

顯示如下:

在div內。

在p內。

由上例可知只需要使用.classname{}語法即可。上面例子中一個是div一個是p，若是要強調是其中某一種物件，可以使用以下方式。跟之前類似的先定義兩個物件如下:

	<div class="blue">
		在blue div內。
	</div>
	<p class="blue">
		在blue p內。
	</p>

接下來在css內加上代碼:

	p.blue{
		color:blue;
	}
	div.blue{
		color:blue;
		background: yellow;
	}

顯示如下:

在blue div內。

在blue p內。

除此之外，兩個class可以加乘使用，例如我們有另一個css class如下:

	p.pinkback{
		background:pink;
	}

現在加入一個新的物件如下:

	<p class="blue pinkback">
		在blue pink p內。
	</p>

顯示如下:

在blue pink p內。

很明顯同一個物件可以受到兩個以上的class同時影響，只要將其同時寫入class名稱之內即可。

使用id

另一個方式是設定物件的id，例如:

	<p id="pWithid">有id的p</p>

接下來在css檔案內加上以下程式碼:

	#idp1{
		color: Chocolate;
	}

顯示效果如下:

有id的p

可以看見p內的顏色改變了。注意在css內需要在id之前使用#字號，與class所使用的.有所區別。
這樣看起來跟使用class好像沒有不同，事實上確實是可以達到一樣的效果，不同處是每個網頁的id是唯一的，而class卻是可以有多個，相同的class分享相同的效果內容。那為何要使用id呢?在css中無所謂，不過在JavaScript中就有用了。
那可以同時使用id跟class嗎?答案是肯定的，例如建立以下物件:

	<p id="pWithid2" class="red">有id的p</p>

此處的class借用之前所建立的red。在css中加上以下程式碼:

	#pWithid2{
		background: Cornsilk;
	}

結果顯示如下:可看見兩個效果加乘在一起了。

有id的p