自訂 選擇器[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 選擇器是不可重複使用的
- ^ CSS串聯樣式表教學『選擇器運用』
- ^ html online editor
- ^ html online editor-2
- ^ html online editor-3
- ^ remove line break
0 意見:
張貼留言