CSS - 自訂 物件

自訂 選擇器^[1][2]

Number of elements

種類一：CLASS="名稱"

<style type="text/css">

<!--

.one{

color : #cc6699 ; /*文字色彩*/

font-size : 9pt; /*文字大小*/

}

.two{

color : #336699 ; /*文字色彩*/

letter-spacing : 3pt;/*字距*/

font-size : 9pt; /*文字大小*/

}

-->

</style>



<p class="one">這裡的文字是粉色9pt的大 小</p>

<p class="two">這裡的文字是藍色9pt字的距離4pt的大 小</p>

<input class="one" type="text" name="T1" size="20" value="這裡是表單">

<table class="two" width="182"> <tr> <td> 這裡是表格 </td> </tr></table>

種類一：CLASS="名稱"

這裡的文字是粉色9pt的大小

這裡的文字是藍色9pt字的距離4pt的大小

這裡是表格

種類二：ID="名稱"

還有一種方式就是使用 ID，其實這跟上方的意思是相同的，CLASS 選擇器是在前方加上小數點，不同的是ID是在前方加上#，來看下面的範例：可以試試看是不是跟class選擇器範例結果是一樣的

#one{

color : #cc6699 ; /*文字色彩*/

font-size : 9pt; /*文字大小*/

}

#two{

color : #336699 ; /*文字色彩*/

letter-spacing : 3pt;/*字距*/

font-size : 9pt; /*文字大小*/

}



<input id="one" type="text" name="T1" size="20" value="這裡是表單">

<table id="two" width="182"> <tr> <td> 這裡是表格 </td> </tr></table>

這裡是表格

注意 : class 選擇器可以在同一個網頁重複運用, id 選擇器是不可重複使用的

1. ^ CSS串聯樣式表教學『選擇器運用』


2. ^ html online editor


3. ^ html online editor-2


4. ^ html online editor-3


5. ^ remove line break