CSS串聯樣式表教學『選擇器運用』
基礎中我們有提到何謂選擇器，例如：table{font-size:9pt}裡面的table就稱為選擇器，就是選用table(表格)在{}裡定義樣式，這個選擇器當然你可以自己設定為別的名稱，讓網頁指定的地方來使用，或者你想每行用不同的文字顏色或不同的表格顏色，沒問題，用自訂選擇器一定讓你更容易掌握。種類一：CLASS="名稱"
<style type="text/css"><!--
.ABC{
color : #cc6699 ; /*文字色彩*/
font-size : 9pt /*文字大小*/
}
.DEF{
color : #336699 ; /*文字色彩*/
letter-spacing : 3pt;/*字距*/
font-size : 9pt /*文字大小*/
}
-->
</style>
</head><body>
<p class="ABC">這裡的文字是粉色9pt的大小</p>
<p class="DEF">這裡的文字是藍色9pt字的距離4pt的大小</p>
<input class="ABC" type="text" name="T1" size="20" value="這裡是表單">
<table class="DEF" width="182"> <tr> <td> 這裡是表格 </td> </tr></table>
種類二：ID="名稱"
還有一種方式就是使用ID，其實這跟上方的意思是相同的，CLASS選擇器是在前方加上小數點，不同的是ID是在前方加上#，來看下面的範例：可以試試看是不是跟class選擇器範例結果是一樣的#ABC{
color : #cc6699 ; /*文字色彩*/
font-size : 9pt /*文字大小*/
}
#DEF{
color : #336699 ; /*文字色彩*/
letter-spacing : 3pt;/*字距*/
font-size : 9pt /*文字大小*/
}
<p id="ABC">這裡的文字是粉色9pt的大小</p>
<p id="DEF">這裡的文字是藍色9pt字的距離4pt的大小</p>
<input id="ABC" type="text" name="T1" size="20" value="這裡是表單">
<table id="DEF" width="182"> <tr> <td> 這裡是表格 </td> </tr></table>
注意:
CLASS選擇器可以在同一個網頁重複運用
ID選擇器是不可重複使用的
CLASS選擇器可以在同一個網頁重複運用
ID選擇器是不可重複使用的