一個在大型網站常見的格式，就是將文字繞著一個圖案顯現。這是用 float (浮動) 這個屬性來達成的。
float 屬性有三個可能的值：left、right、和 none。來看看以下的例子：
例 1：若有以下的 CSS 宣告，
|
#leftfloat { |
目前分類：css (22)
- Feb 12 Tue 2008 21:34
浮動
- Feb 12 Tue 2008 21:33
文字
以下是幾個最常被用到與文字樣式有關的 CSS 屬性。
direction
direction 屬性是用來設定文字的方向。可能的值為 'ltr' 及 'rtl'。
舉例來說，若 CSS 宣告是，
|
p { |
- Feb 12 Tue 2008 21:30
位置
在 CSS 中常見的位置 (position) 屬性有以下幾種：
position
position 屬性制定出要用哪一類的位置。可能的值有：
- static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話，那 top、bottom、left、和 right 的值就都沒有意義了。
- absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時，元素也會跟著改變位置。
- Feb 12 Tue 2008 21:28
表格
在 HTML 中，常看到 <table> 之內加了 border、cellpadding、及 cellspacing 的屬性。如果我們有透過 CSS 來制定表格的樣式，那就不需要在 HTML 之內用到這些屬性了。
table、th、tr、及 td 這幾個選擇器可以使用許多在這個教學中有提到的 CSS 屬性，例如 文字、字體、邊框、顏色、以及 背景。
來看個例子。假設我們想要把以下的樣式加入表格內：
我們就會使用以下的樣式表：
- Feb 12 Tue 2008 21:27
清單
在 CSS 中常見的清單 (list) 屬性有以下幾種：
list-style-type
list-style-type 屬性是用來設定在清單中，每一條之前的記號要用什麼。最常見的 list-style-type 設定值為：
- Feb 12 Tue 2008 21:25
連接
連接的預設樣式是藍色，且有下劃線。可是，有的時候，我們會想要改變一下這個預設的樣式。這可以透過以下幾個選擇器來達成：
a:link: 設定當連接過去的網頁尚未被看過時，該連接的樣式。
a:visited: 設定當連接過去的網頁已經看過時，該連接的樣式。
a:hover: 設定當滑鼠蓋在連接上面時，該連接的樣式。
a:active: 設定當連接被點擊時，該連接的樣式。
- Feb 12 Tue 2008 21:24
字體
在 CSS 中常見的字體 (font) 屬性有以下幾種：
font-family
font-family 屬性是用來設定字體的類別。
| CSS 樣式 | 顯現結果 |
|
p {font-family: verdana;} |
- Feb 12 Tue 2008 21:23
顏色
color (顏色) 屬性能讓我們在 CSS 中設定一個元素的顏色。
這個屬性可以有以下三類的設定值：
color 屬性的語法如下：
十六進位值:
{color:#XXXXXX;}
- Feb 12 Tue 2008 21:19
背景屬性
在 CSS 中常見的背景 (background) 屬性有以下幾種：
background-color
background-color 屬性是用來指定背景的顏色。
| CSS 樣式 | 顯現結果 |
|
p {background-color: 00FF00;} |
- Feb 12 Tue 2008 21:17
留白
我們從盒子模式那一頁看到，留白 (padding) 是在內容外，邊框內的部分。一個盒子有四個邊，所以我們可以對這四個邊的留白逐一設定：
- Feb 12 Tue 2008 21:14
邊框
在 CSS 中常見的邊框 (border) 屬性有以下幾種：
border-style
border-style 屬性指定邊框的樣式。以下的表格列出這個屬性可能有的值，以及每一個值顯現出來的結果。
| CSS 樣式 | 顯現結果 |
|
p {border-style:solid;} |
實線 |
- Feb 12 Tue 2008 21:12
邊界
如我們在盒子模式那一頁看到的，邊界 (margin) 是在邊框之外，並且是用來設定各個元素之間的距離。一個盒子有四個邊，所以我們可以對這四個邊逐一設定：
- 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="【媒體類別】">
設計。教學 (4)