差異處

這裏顯示二個版本的差異處。

--- css [2009/08/26 21:46]
bestlong
+++ css [2010/08/23 15:30] (目前版本)
@@ 行 1: / 行 1: @@
 ====== CSS : Cascading Style Sheets (串聯樣式表) ======
-  * http://css.1keydata.com/tw/
+  * [[http://www.w3schools.com/|W3Schools]] 此網站用 IE 可能會無法顯示，建議改用其他瀏覽器例如 [[http://moztw.org/|FireFox]] 或 [[http://www.google.com/chrome/|Chrome]] 來瀏覽。
-  * http://www.hsiu28.net/style/
+  * [[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">
@@ 行 16: / 行 22: @@
   H3, H5 {
     color : #999999 ;
-    font-family : 細明體
+    font-family : 細明體 ;
   }
   -->
   </style>
+HTML內容
+  <H3>ABC</H3>
+  <H5>DEF</H5>
 其中的 H3 與 H5 就是選擇器。
@@ 行 52: / 行 63: @@
 ==== ID 自訂選擇器 ====
-例如 #one {color : #cc6699; font-size : 9pt;} 其中的 #one 就是選擇器。
+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

用戶工具

網站工具

差異處

頁面工具