CSS : Cascading Style Sheets (串聯樣式表)

• W3Schools 此網站用 IE 可能會無法顯示，建議改用其他瀏覽器例如 FireFox 或 Chrome 來瀏覽。
• OECSPACE - Css style 教學「CSS Style簡介」
• CSS 語法教學

選擇器主要有三種：

1. Type(類別)選擇器
2. Class 自訂選擇器
3. ID 自訂選擇器

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

CSS宣告檔內容

<style type="text/css">
<!-- 
H3, H5 {
  color : #999999 ;
  font-family : 細明體 ;
}
-->
</style>

HTML內容

<H3>ABC</H3>
<H5>DEF</H5>

其中的 H3 與 H5 就是選擇器。

CSS宣告檔內容

<style type="text/css">
<!--
.one{
  color : #cc6699 ; /*文字色彩*/
  font-size : 9pt; /*文字大小*/
}
.two{
  color : #336699 ; /*文字色彩*/
  letter-spacing : 3pt;/*字距*/
  font-size : 9pt; /*文字大小*/
}
-->
</style>

HTML內容

<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>

其中的 .one 與 .two 就是選擇器。

CSS宣告檔內容

#one{
  color : #cc6699 ; /*文字色彩*/
  font-size : 9pt; /*文字大小*/
}
#two{
  color : #336699 ; /*文字色彩*/
  letter-spacing : 3pt;/*字距*/
  font-size : 9pt; /*文字大小*/
}

HTML內容

<input id="one" type="text" name="T1" size="20" value="這裡是表單">
<table id="two" width="182"> <tr> <td> 這裡是表格 </td> </tr></table>

其中的 #one 與 #two 就是選擇器。

選擇器 {
  屬性1: 設定值;
  屬性2: 設定值;
  ...
}

讓多個選擇器用相同屬性 (不同選擇器間用 , 分隔)

選擇器1, 選擇器2 {
  屬性1: 設定值;
  屬性2: 設定值;
  ...
}

後代選擇器(Descendant Selectors)宣告 (父子選擇器之間是用空白分隔)

父選擇器 子選擇器 {
  屬性1: 設定值;
  屬性2: 設定值;
  ...
}