如我們在盒子模式那一頁看到的，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以我們可以對這四個邊逐一設定：
- Feb 12 Tue 2008 21:12
邊界
- Feb 12 Tue 2008 21:11
盒子模式
盒子模式 (box model) 是在 CSS 中一個很重要的觀念。它是用來描述一個元素是如何組成的。以下是盒子模式的式樣：
在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。
相關的 CSS 指令為 margin、border、以及 padding。在下面的三頁我們會一一介紹。
- Feb 12 Tue 2008 21:10
長度單位
在 CSS ，長度單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位。
相對單位包括：
絕對單位包括：
- Feb 12 Tue 2008 20:26
CSS Div 與 CSS Span
Div
Div 這個標籤目的是將內容分為不同的區域，而每一個區域可以根據 CSS 中的宣告而有自己的樣式。Div 是一個區塊級容器 (block-level container)，這代表在 </div> 標籤後會換行。
舉例來說，如果我們有以下的 CSS 樣式：
|
.large { |
- Feb 12 Tue 2008 20:25
CSS Class 與 CSS ID
Class 及 ID 都是使用者設定的選擇器 (selector)。以下分別介紹：
Class
Class 的宣告法，是先放一個句點 (.)，之後再列出選擇器名稱。設定一個 Class 選擇器的語法如下：
.【Class 名稱】{
屬性：設定值；
...
}
- Feb 12 Tue 2008 20:24
繼承
一個 HTML 文件中，標籤之間有所謂的親子關係。舉例來說，<title> 這個標籤一定都是在 <head> 這個標籤之內，所以我們就說 <title> 是 <head> 的子標籤。繼承 (inheritance) 的意思就是說子標籤的樣式會跟父標籤一樣，除非子標籤本身另有自訂的樣式。
舉例來說，如果我們有以下的樣式：
| p { color: #00FF00; } strong { font-size:20px; } |
下面這行 HTML 碼，
| <p>這是一個 <strong>繼承的例子。</strong></p> |
- Feb 12 Tue 2008 20:24
串接
CSS 的全名為 Cascading Style Sheets。如果只有一個樣式表，那『串接』(cascade) 這個部分就不重要。若一個 HTML 文件中包含有多個樣式表，那串接這個概念就非常重要了。
串接是指當不同樣式表中對相同屬性有不同定義時，應該要用哪一個樣式表中的定義的規則。
最基本的規則是，越接近 HTML 本身的樣式越有優先權。因此，內行套用的樣式通常會有最高的優先權，因為它最接近 HTML 的元素。接下來的是嵌入套用的樣式表；這一類的樣式表是在 <head> 內宣告的。再下來是匯入套用的樣式表。若有多個樣式表被匯入，越後被匯入的越有優先權。優先權最低的是外部連接套用的樣式表。若有多個外部樣式表被連接，越後被匯入的越有優先權。
另外，每一個瀏覽器也都有自己的樣式表 (這就是為什麼超連接文字通常會是藍色，而且下面有一條線)。這一類的樣式表優先權比以上的幾種都低。
所以，從最高優先權到最低優先權的排名如下：
- Feb 12 Tue 2008 20:22
媒體類別
不同的媒體類別可以用不同的 CSS 樣式表。舉例來說，在螢幕上的文件可能適用某一個 CSS 樣式表，而同一份文件在被列印時，可以用一個不同的 CSS 樣式表。標出一個 CSS 樣式表媒體類別的語法如下：
外部連接套用
<link rel="stylesheet" href="style.css" type="text/css" media="【媒體類別】">
嵌入套用
<style type="text/css" media="【媒體類別】">
- Feb 12 Tue 2008 20:19
CSS 套用方式
我們可以用以下四種方式，將 CSS 套用入 HTML 文件中：
行內套用
我們可以在 HTML 文件內直接宣告樣式。舉例來說，
|
<p style='font-family:verdana; font-size:16;'>This is font size 16.</p> |
- Feb 12 Tue 2008 19:12
CSS介紹
CSS 的全名為 Cascading Style Sheets，是一種樣式表 (Stylesheet) 語言。它的目的是為了對像 XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層。有了 CSS，我們就可以將資料層及顯示層分開：HTML 文件就只包括資料，而 CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。
現在由於個人部落格的興起，CSS 已成為了一個眾人須知的電腦語言。無論您是自己設站寫部落格，或是您是利用 BSP (如無名、天空、Pixnet、Xuite、Blogger、及 Wordpress 等)，甚至您已經從網路上CSS無名樣式分享的網站找到了您想要的 CSS 樣式，您都很有可能需要修改一下 CSS ，這樣子才能夠讓您的部落格有自己的特色。這個 CSS 語法教學，正是學習基礎 CSS 最佳的地方。
這個 CSS 語法教學分為以下三個部分：
- 基礎概念: 討論 CSS 的基礎概念，包括 語法、套用方式、串連的概念、繼承、Class 與 ID 選擇器、以及div 與 span 選擇器。
- 屬性: 討論常用到的 CSS 屬性。
- CSS 樣式: 列出所有在這個教學中有提到的 CSS 屬性。
設計。教學 (4)