Tuesday, March 28, 2006

Class與ID

運用Class與ID可以針對文件的特定區域進行樣式設定

<h1 class="specailtext">This is a heading with the <span >same class</span> as the second paragraph</h>

<p>This tag has no class.</p>
<p class="specialtext">When a tag has a class attribute, we can target it <span>regardless</span> of its position in the hierachy.</p>

如果希望selector影響的範圍更局限在某一條件下, 可以將標籤名稱再結合class名稱(tag+class), 例如:
p.specialtext {color: red;}
則只有第三段的文字變成紅色。

若再加入另一個selector則可指定得更細 (tag+class+tag), 例如:
p.specialtext span {font-style: italic;}
則第三段內span標籤內的字還會變成斜體。

ID的使用放式與Class類似,只是它是以#來表示,例如:
#uniquetext {font-weight: bold;}
<p id="uniquetext">This is the special text</p>

Class與ID的差異
Class可以重複出現很多次,而一個特定的ID則只能在一個頁出現一次。
Class好比西洋棋中的士兵,而ID就像皇后。

Class與Id雖然好用,但小心不要用度使用,否則會落到如同Font tag般的下場。

1 comment:

bwCat said...

another comments test....