宣告 CSS 樣式的語法如下：
選擇器 {
屬性：設定值；
...
}
屬性：設定值；
...
}
例如：
.mmm {
background:#999;
}
在一個選擇器 (Selector) 中，可以設定的屬性數目沒有限制。
選擇器主要有三種：型類 (Type) 選擇器、Class 選擇器、和 ID 選擇器。
型類選擇器是 (X)HTML 標籤，如 <body> 和 <h1>。Class 和 ID 選擇器是使用者自訂的選擇器。
樣式是以『屬性：設定值』的方式來制定。
舉例來說，若我們要設定一個元素內的文字是黃色的，
那就用以下的『屬性：設定值』：
color="#FFFF00"
在以上的宣告內，color 是屬性，而#FFFF00是設定值。
在某些時候，一個屬性可能會有好幾個設定值。這些通常都是因為屬性是一個捷徑。舉例來說，margin 屬性可能會有 4 個設定值，而每一個值代表每一邊的邊界長度。
Class
Class 的宣告法，是先放一個句點 (.)，之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下：
.【Class 名稱】{
屬性：設定值；
...
}
屬性：設定值；
...
}
| .navbar { color:#0000FF; } |
要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼：
| <p class="navbar">這是用 Class 選擇器的例子。</p> |
以上的 HTML 碼會顯現出：
ID
ID 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。設定一個 ID 選擇器的語法如下：
#【ID 名稱】{
屬性：設定值；
...
}
屬性：設定值；
...
}
舉例來說，
| #footer { color:#FF00FF; } |
要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼：
| <p id="footer">這是用 ID 選擇器的例子。</p> |
顯現出的結果為，
Class 跟 ID 的比較
這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。
第二個不同的地方，是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器無法被 Javascript 運用到。
並沒有什麼固定的規則，來決定什麼時候要用 ID 及什麼時候要用 Class。
我們的建議是盡量用 Class，因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。
唯一的例外，是當你要用 Javascript 的 GetElementByID 函數時。在這個情況下，你就應該要用 ID。
Class 名稱及 ID 名稱都是對大小寫敏感的。
舉例來說，.classone 及 .ClassOne 是代表兩個不同的 Class 選擇器。
Grouping
如果有數個選擇器享有同樣的樣式，它們可以同時被宣告。這叫做 "grouping"。舉例來說，如果
<h1>, <h2>, and <h3> 都會有相同的樣式，那它們就可以用以下的方式被宣告：
※<h1> 、 <h2> 、 <h3> 、 <h4> 、 <h5> 、 <h6> 為 HTML 文件的區域元素 (element) ，用作文章中的標題。
預設 <h1> 的字型最大，依次縮小，
<h6> 的字型最小
h1 h2 h3 {
屬性：設定值； ... } |
後代選擇器 (Descendant Selectors)
後代選擇器宣告的語法是：
【父選擇器】【子選擇器】{
屬性：設定值；
...
}
屬性：設定值；
...
}
在以上的宣告中，只有當子選擇器是在父選擇器之內時，樣式才會被用到。這一類的語法可以包括好幾代的選擇器，而不是只有兩代而已。
舉例來說，以下的宣告，
li b {
color:yellow; } |
代表在 <li> <b> 之內的文字是黃色的。不是在
<li> 之內的 <b> 中的文字，就不會套用黃色字體這個樣式。
※ ul、li為CSS中的清單 (list) 屬性。
list-style-type 屬性是用來設定在清單中，每一條之前的記號要用什麼。最常見的 list-style-type 設定值為：
· none (沒有)
· disc (全黑圓圈)
· circle (空心圓圈)
· square (正方形)
· upper-latin (大寫拉丁文)
· lower-latin (小寫拉丁文)
· upper-roman (大寫羅馬文)
· lower-roman (小寫羅馬文)
· upper-alpha (大寫希臘文 )
· lower-alpha (小寫希臘文 )
例 1：
<ul
style='list-style-type:upper-roman;'>
<li>項目 1</li> <li>項目 2</li> </ul> |
結果：
- 項目 1
- 項目 2
例 2：
<ul
style='list-style-type:square;'>
<li>正方形項目 1</li> <li>正方形項目 2</li> </ul> |
結果：
- 正方形項目 1
- 正方形項目 2
list-style-image 屬性是用來將某個圖案設定為記號。這個屬性的用法為，
list-style-image:url([image_url]);
ul {
list-style-image:url("circle.gif");
}
list-style-image:url("circle.gif");
}
沒有留言:
張貼留言