bestlong.Wiki

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得這是誤判，請詢問管理員。
====== CSS : Cascading Style Sheets (串聯樣式表) ======
  * [[http://www.w3schools.com/|W3Schools]] 此網站用 IE 可能會無法顯示，建議改用其他瀏覽器例如 [[http://moztw.org/|FireFox]] 或 [[http://www.google.com/chrome/|Chrome]] 來瀏覽。
  * [[http://css.1keydata.com/tw/|OECSPACE - Css style 教學「CSS Style簡介」]]
  * [[http://www.hsiu28.net/style/|CSS 語法教學]]

===== CSS 語法 =====

選擇器主要有三種：

  - Type(類別)選擇器
  - Class 自訂選擇器
  - ID 自訂選擇器

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

==== Type(類別)選擇器 ====

CSS宣告檔內容

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

HTML內容

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

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


==== Class 自訂選擇器 ====

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 就是選擇器。

==== ID 自訂選擇器 ====

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 就是選擇器。


===== CSS 語法格式 =====
  選擇器 {
    屬性1: 設定值;
    屬性2: 設定值;
    ...
  }

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

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

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

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

用戶工具

網站工具

頁面工具
