css
差異處
這裏顯示二個版本的差異處。
|
css [2009/08/26 21:43] bestlong |
css [2010/08/23 15:30] (目前版本) |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| ====== CSS : Cascading Style Sheets (串聯樣式表) ====== | ====== 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 語法 ===== | ===== CSS 語法 ===== | ||
| 選擇器主要有三種： | 選擇器主要有三種： | ||
| + | |||
| - Type(類別)選擇器 | - Type(類別)選擇器 | ||
| - Class 自訂選擇器 | - Class 自訂選擇器 | ||
| - ID 自訂選擇器 | - ID 自訂選擇器 | ||
| + | |||
| + | 注意 : Class 選擇器可以在同一個網頁重複運用, ID 選擇器是不可重複使用的。 | ||
| ==== Type(類別)選擇器 ==== | ==== Type(類別)選擇器 ==== | ||
| + | |||
| + | CSS宣告檔內容 | ||
| <style type="text/css"> | <style type="text/css"> | ||
| 行 16: | 行 22: | ||
| H3, H5 { | H3, H5 { | ||
| color : #999999 ; | color : #999999 ; | ||
| - | font-family : 細明體 | + | font-family : 細明體 ; |
| } | } | ||
| --> | --> | ||
| </style> | </style> | ||
| + | |||
| + | HTML內容 | ||
| + | |||
| + | <H3>ABC</H3> | ||
| + | <H5>DEF</H5> | ||
| 其中的 H3 與 H5 就是選擇器。 | 其中的 H3 與 H5 就是選擇器。 | ||
| 行 25: | 行 36: | ||
| ==== Class 自訂選擇器 ==== | ==== Class 自訂選擇器 ==== | ||
| - | 例如 .one {color : #cc6699; font-size : 9pt;} 其中的 .one 就是選擇器。 | + | |
| + | 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 自訂選擇器 ==== | ==== 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 語法格式 ===== | ===== CSS 語法格式 ===== | ||
| 選擇器 { | 選擇器 { | ||
| + | 屬性1: 設定值; | ||
| + | 屬性2: 設定值; | ||
| + | ... | ||
| + | } | ||
| + | |||
| + | 讓多個選擇器用相同屬性 (不同選擇器間用 , 分隔) | ||
| + | |||
| + | 選擇器1, 選擇器2 { | ||
| + | 屬性1: 設定值; | ||
| + | 屬性2: 設定值; | ||
| + | ... | ||
| + | } | ||
| + | |||
| + | 後代選擇器(Descendant Selectors)宣告 (父子選擇器之間是用空白分隔) | ||
| + | |||
| + | 父選擇器 子選擇器 { | ||
| 屬性1: 設定值; | 屬性1: 設定值; | ||
| 屬性2: 設定值; | 屬性2: 設定值; | ||
css.1251294235.txt.gz · 上一次變更: 2010/08/23 15:30 (外部編輯)
若未特別註明，此維基上的內容都是採用以下授權方式： CC Attribution-Noncommercial-Share Alike 3.0 Unported
