CSS 的全名為 Cascading Style Sheets，是一種樣式表 (Stylesheet) 語言。它的目的是為了對像 XHTML 及 HTML
之類的標記語言 (markup language) 提供一個顯示層。有了 CSS，我們就可以將資料層及顯示層分開：HTML 文件就只包括資料，而 CSS
則是告訴瀏覽器這些資料應該要如何顯現出來
宣告 CSS 樣式的語法如下：
選擇器 {
屬性：設定值；
...
}
在一個選擇器 (Selector) 中，可以設定的屬性數目沒有限制。
選擇器主要有三種：型類 (Type) 選擇器、Class 選擇器、和 ID 選擇器。
型類選擇器是 (X)HTML 標籤，如 <body> 和 <h1>。Class 和 ID 選擇器是使用者自訂的選擇器。
Grouping
如果有數個選擇器享有同樣的樣式，它們可以同時被宣告。這叫做 "grouping"。舉例來說，如果 <h1>, <h2>, and <h3>
都會有相同的樣式，那它們就可以用以下的方式被宣告：
h1 h2 h3 {
屬性：設定值；
...
}
後代選擇器 (Descendant Selectors)
我們可以設定說，只有當甲元素在乙元素之內時，甲元素才會用某個樣式。若甲元素不在乙元素內的話，那甲元素就可以有其他的樣式。要達到這個目標，我們就要利用後代選擇器的方式。
後代選擇器宣告的語法是：
父選擇器】【子選擇器】{
屬性：設定值；
...
}
在以上的宣告中，只有當子選擇器是在父選擇器之內時，樣式才會被用到。這一類的語法可以包括好幾代的選擇器，而不是只有兩代而已。
舉例來說，以下的宣告:
li b {
color:yellow;
}
代表在 <li> <b> 之內的文字是黃色的。不是在 <li> 之內的 <b> 中的文字，就不會套用黃色字體這個樣式。
將 CSS 套用入 HTML 文件中的四種方式
嵌入套用
樣式可以嵌入於 HTML 文件中 (通常是在 <head> 內)。舉例來說，
<head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>
<body>
<div>
背景顏色是紅色
</div>
</body>
以上的 HTML 會顯現出：
背景顏色是紅色
外部連接套用
在這種方式下，所有的 CSS 樣式宣告都是存在另外一個檔案中。該檔案通常名稱為 .css。在 HTML 文件的 <header> .. </header>
之中，我們將用以下的程式碼將這個 .css 檔案連接進入：
<link rel=stylesheet type="text/css" href="external-stylesheet.css">
以上這一行會將在 external-stylesheet.css 這個檔案內所宣告的樣式加入 HTML 文件內。
匯入套用
外部的 CSS 樣式也可以被匯入進 HTML 文件。匯入的做法為利用 @import 這個指令。@import 的語法為：
<STYLE TYPE="text/css">
<!--
@import url(http://www.mysite.com/style.css);
-->
</STYLE>
@import 指令最初的用意，是為了能夠針對不同的瀏覽器而運用不同的樣式。不過，現在已經沒有這個必要。現在用 @import 的目的，最常是要加入多個 CSS
樣式。當多個 CSS 樣式被 @import 的方式加入，而不同 CSS 樣式互相有衝突時，後被加入的 CSS 樣式有優先的順位 (詳情請見 CSS 串接)。
CSS 媒體類別
不同的媒體類別可以用不同的 CSS 樣式表。舉例來說，在螢幕上的文件可能適用某一個 CSS 樣式表，而同一份文件在被列印時，可以用一個不同的 CSS
樣式表。標出一個 CSS 樣式表媒體類別的語法如下：
外部連接套用
<link rel="stylesheet" href="style.css" type="text/css" media="【媒體類別】">
嵌入套用
<style type="text/css" media="【媒體類別】">
匯入套用
@import url("style.css") 【媒體類別】;
媒體類別】可以有以下的值：
| 值 |
適用於 |
| all |
所有媒體類別 |
| aural |
言語合成器 |
| braille |
布拉耶點字法 (盲人用) 媒體 |
| handheld |
掌上型媒體 |
| print |
列印 |
| projection |
投射媒體 |
| screen |
電腦螢幕 |
| tty |
固定字寬 (fixed-pitch) 的媒體 |
| tv |
電視類的媒體 |
CSS 串接
CSS 的全名為 Cascading Style Sheets。如果只有一個樣式表，那『串接』(cascade) 這個部分就不重要。若一個 HTML
文件中包含有多個樣式表，那串接這個概念就非常重要了。串接是指當不同樣式表中對相同屬性有不同定義時，應該要用哪一個樣式表中的定義的規則。
最基本的規則是，越接近 HTML 本身的樣式越有優先權。
另外，每一個瀏覽器也都有自己的樣式表 (這就是為什麼超連接文字通常會是藍色，而且下面有一條線)。這一類的樣式表優先權比以上的幾種都低。
所以，從最高優先權到最低優先權的排名如下：
- 內行套用的樣式表 (Inline stylesheet)
- 嵌入套用的樣式表 (Embedded stylesheet)
- 匯入套用的樣式表 (Imported stylesheet)
- 外部連接套用的樣式表 (Linked stylesheet)
- 瀏覽器本身的樣式表 (Browser's own stylesheet)
CSS 繼承
在一個 HTML 文件中，標籤之間有所謂的親子關係。舉例來說，<title> 這個標籤一定都是在 <head> 這個標籤之內，所以我們就說 <title> 是
<head> 的子標籤。繼承 (inheritance) 的意思就是說子標籤的樣式會跟父標籤一樣，除非子標籤本身另有自訂的樣式
舉例來說，如果我們有以下的樣式：
p { color: #00FF00; }
strong { font-size:20px; }
下面這行 HTML 碼，<p>這是一個 <strong>繼承的例子。</strong></p>
就會顯現出為:
這是一個繼承的例子。
在以上的例子中，雖然我們並沒有對 <strong> 設定顏色，可是我們可以看到，整個句子的顏色都是綠色的。這是因為， <strong> 是 <p>
的子標籤，所以 <strong> 繼承了 <p> 的樣式，而在 <p> 的樣式中，文字顏色是設定為綠色的。
CSS Class 與 CSS ID Class 及 ID 都是使用者設定的選擇器 (selector)。
Class
Class 的宣告法，是先放一個句點 (.)，之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下：
.【Class 名稱】{
屬性：設定值；
...
}
舉例來說
.navbar {
color:#0000FF;
}
要將以上的樣式套用在 HTML 內，我們用以下的 HTML 碼：
<p class="navbar">這是用 Class 選擇器的例子。</p>
以上的 HTML 碼會顯現出：
這是用 Class 選擇器的例子。
一個 Class 選擇器可以同時有好幾個不同的物件 (instance)。這是靠以下的語法：
【型類選擇器】.【選擇器名稱】{
屬性：設定值；
...
}
舉例來說，若有以下的 CSS 宣告
b.special {
color:#0000FF;
}
i.special {
color:#FF0000;
}
以下的 HTML 碼
這個例子顯示出 <b class="special">同一個選擇器</b>可以<i class="special">有不同的 instance。</i>.
就会顯現出: 這個例子顯示出同一個選擇器可以有不同的 instance。.
多重 Class
我們也可以同時套用數個 class。舉例來說，若我們有以下的 CSS 宣告，
.applylarge {
font-size:20px;
}
.applyred {
color:#FF0000;
}
那以下的 HTML 碼，
<p class="applylarge applyred">這是多重 Class 的例子。</p>
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 選擇器。
CSS Div 與 CSS Span
Div
這個標籤目的是將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。Div 是一個區塊級容器 (block-level
container)，這代表在 </div> 標籤後會換行。
舉例來說，如果我們有以下的 CSS 樣式：
.large {
color: #00FF00;
font-family:arial;
font-size: 4pt;
}
以下的 HTML 碼
<div class="large">
這是 DIV 範例。
</div>
Span
Span 跟 Div 類似的地方是，這兩個標籤的目的都是將內容分為不同的區域。不同的是，Span 可以涵蓋更細層的元素。所以，我們甚至可以用 <span>
來調整單一文字的樣式。另外，在 </span> 之後並不會換行。。。。
舉例來說，如果我們有以下的 CSS 樣式：
.largefont {
color: #0066FF;
font-family:arial;
font-size: 6px;
}
以下的 HTML 碼
Span 不是<span class="largefont">區塊級的</span>.
CSS 長度單位
在 CSS ，長度單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位。
相對單位包括：
px: pixels
em: em
ex: x 字母的高度
絕對單位包括：
in: 吋
cm: 公分
mm: 公厘
pt: points, 1 pt = 1/72 吋
pc: picas, 1 pc = 12 pt
如果沒有註明單位，那預設的單位是 px。
以下是每一種單位的例子：
| CSS 樣式 |
顯現結果 |
|
p {font-size:9px;}
|
文字大小為 9px。
|
|
p {font-size:3em;}
|
文字大小為 3em。
|
|
p {font-size:3ex;}
|
文字大小為 3ex。
|
|
p {font-size:0.2in;}
|
文字大小為 0.2 inch。
|
|
p {font-size:0.5cm;}
|
文字大小為 0.5 cm。
|
|
p {font-size:12mm;}
|
文字大小為 12 mm。
|
|
p {font-size:24pt;}
|
文字大小為 24 pt。
|
|
p {font-size:2pc;}
|
文字大小為 2 pc。
|
在大部分的情況下，用相對長度單位會比較適合。這是因為，這樣子您能讓使用者依自己的喜好來加大或減小字體。如果您用絕對長度單位的話，使用者就無法改變字體的大小了。
學會當個愛情的建築師, 學會為所愛的人努力.
