CSS 背景實例：

設置背景顏色

本例演示如何為元素設置背景顏色。

設置文本的背景顏色

本例顏色如何設置部分文本的背景顏色。

將圖像設置為背景

本例演示如何將圖像設置為背景。

如何重復背景圖像

本例演示如何重復背景圖像。

如何在垂直方向重復背景圖像

本例演示如何垂直地重復背景圖像。

如何在水平方向重復背景圖像

本例演示如何水平地重復背景圖像。

如何僅顯示一次背景圖像

本例演示如何僅顯示一次背景圖像。

如何放置背景圖像

本例演示如何在頁面上放置背景圖像。

如何使用%來定位背景圖像

本例演示如何使用百分比來在頁面上定位背景圖像。

如何使用像素來定位背景圖像

本例演示如何使用像素來在頁面上定位背景圖像。

如何設置固定的背景圖像

本例演示如何設置固定的背景圖像。圖像不會隨著頁面的其他部分滾動。

所有背景屬性在一個聲明之中

本例演示如何使用簡寫屬性來將所有背景屬性設置在一個聲明之中。

例子解釋

CSS 文本實例：

設置文本顏色

本例演示如何設置文本的顏色。

設置文本的背景顏色

本例顏色如何設置部分文本的背景顏色。

規定字符間距

本例演示如何增加或減少字符間距。

使用百分比設置行間距

本例演示如何使用百分比值來設置段落中的行間距。

使用像素值設置行間距

本例演示如何使用像素值來設置段落中的行間距。

使用數值來設置行間距

本例演示如何使用一個數值來設置段落中的行間距。

對齊文本

本例演示如何對齊文本。

修飾文本

本例演示如何向文本添加修飾。

縮進文本

本例演示如何縮進文本首行。

控制文本中的字母

本例演示如何控制文本中的字母。

在元素中禁止文本折行

本例演示如何禁止在元素中的文本折行。

增加單詞間距

本例演示如何增加段落中單詞間的距離。

例子解釋

CSS 字體(font)實例：

設置文本的字體

本例演示如何設置文本字體。

設置字體尺寸

本例演示如何設置字體尺寸。

設置字體風格

本例演示如何設置字體風格。

設置字體的異體

本例演示如何設置字體的異體。

設置字體的粗細

本例演示如何設置字體的粗細。

所有字體屬性在一個聲明之內

本例演示如何使用簡寫屬性將字體屬性設置在一個聲明之內。

例子解釋

CSS 邊框(border)實例：

所有邊框屬性在一個聲明之中

本例演示用簡寫屬性來將所有四個邊框屬性設置于同一聲明中。

設置四邊框樣式

本例演示如何設置四邊框樣式。

設置每一邊的不同邊框

本例演示如何在元素的各邊設置不同的邊框。

所有邊框寬度屬性在一個聲明之中

本例演示用簡寫屬性來將所有邊框寬度屬性設置于同一聲明中。

設置四個邊框的顏色

本例演示如何設置四個邊框的顏色。可以設置一到四個顏色。

所有下邊框屬性在一個聲明中

本例演示用簡寫屬性來將所有下邊框屬性設置在同一聲明中。

設置下邊框的顏色

本例演示如何設置下邊框的顏色。

設置下邊框的樣式

本例演示如何設置下邊框的樣式。

設置下邊框的寬度

本例演示如何設置下邊框的寬度。

所有左邊框屬性在一個聲明之中

所有左邊框屬性在一個聲明之中

設置左邊框的顏色

本例演示如何設置左邊框的顏色。

設置左邊框的樣式

本例演示如何設置左邊框的樣式。

設置左邊框的寬度

本例演示如何設置左邊框的寬度。

所有右邊框屬性在一個聲明之中

本例演示一個簡寫屬性，用于把所有右邊框屬性設置在一條聲明中。

設置右邊框的顏色

本例演示如何設置右邊框的顏色。

設置右邊框的樣式

本例演示如何設置右邊框的樣式。

設置右邊框的寬度

本例演示如何設置右邊框的寬度。

所有上邊框屬性在一個聲明之中

本例演示用簡寫屬性來將所有上邊框屬性設置于同一聲明之中。

設置上邊框的顏色

本例演示如何設置上邊框的顏色。

設置上邊框的樣式

本例演示如何設置上邊框的樣式。

設置上邊框的寬度

本例演示如何設置上邊框的寬度。

例子解釋

CSS 外邊距 (margin) 實例：

設置文本的左外邊距

本例演示如何設置文本的左外邊距。

設置文本的右外邊距

本例演示如何設置文本的右外邊距。

設置文本的上外邊距

本例演示如何設置文本的上外邊距。

設置文本的下外邊距

本例演示如何設置文本的下外邊距。

所有的外邊距屬性在一個聲明中。

本例演示如何將所有的外邊距屬性設置于一個聲明中。

例子解釋

CSS 內邊距 (padding) 實例：

所有填充屬性在一個聲明中

本例演示使用簡寫屬性將所有的填充屬性設置于一個聲明中，可以有一到四個值。

設置下內邊距 1

本例演示如何使用厘米值來設置單元格的下內邊距。

設置下內邊距 2

本例演示如何使用百分比值來設置單元格的下內邊距。

設置左內邊距 1

本例演示如何使用厘米值來設置單元格的左內邊距。

設置左內邊距 2

本例演示如何使用百分比值來設置單元格的左內邊距。

設置右內邊距 1

本例演示如何使用厘米值來設置單元格的右內邊距。

設置右內邊距 2

本例演示如何使用百分比值來設置單元格的右內邊距。

設置上內邊距 1

本例演示如何使用厘米值來設置單元格的上內邊距。

設置上內邊距 2

本例演示如何使用百分比值來設置單元格的上內邊距。

例子解釋

CSS 列表實例：

在無序列表中的不同類型的列表標記

本例演示在CSS中不同類型的列表項標記。

在有序列表中不同類型的列表項標記

本例演示在CSS中不同類型的列表項標記。

所有的列表樣式類型

本例演示在CSS中所有不同類型的列表項標記。

將圖像作為列表項標記

本例演示如何將圖像作為列表項標記。

放置列表標記

本例演示在何處放置列表標記。

在一個聲明中定義所有的列表屬性

本例演示將所有針對列表的屬性設置于一個簡寫屬性。

例子解釋

CSS 表格實例：

設置表格的布局

本例演示如何設置表格的布局。

顯示表格中的空單元

本例演示是否顯示表格中的空單元。（請在非 IE 瀏覽器中瀏覽）

合并表格邊框

本例演示是否把表格邊框顯示為一條單獨的邊框，還是像標準的 HTML 中那樣分開顯示。

設置表格邊框之間的空白

本例演示如何設置單元格邊框之間的距離。（請在非 IE 瀏覽器中瀏覽）

設置表格標題的位置

本例演示如何定位表格的標題。（請在非 IE 瀏覽器中瀏覽）

例子解釋

輪廓（Outline） 實例：

在元素周圍畫線

本例演示使用outline屬性在元素周圍畫一條線。

設置輪廓的顏色

本例演示如何設置輪廓的顏色。

設置輪廓的樣式

本例演示如何設置輪廓的樣式。

設置輪廓的寬度

本例演示如何設置輪廓的寬度。

CSS 尺寸 (Dimension) 實例：

使用像素值設置圖像的高度

本例演示如何使用像素值設置元素的高度。

使用百分比設置圖像的高度

本例演示如何使用百分比值來設置元素的高度。

使用像素值來設置元素的寬度

本例演示如何使用像素值來設置元素的寬度。

使用百分比來設置元素的寬度

本例演示如何使用百分比值來設置元素的寬度。

設置元素的最大高度

本例演示如何設置一個元素的最大高度。

使用像素值來設置元素的最大寬度

本例演示如何使用像素值來設置元素的最大高度。

使用百分比來設置元素的最大寬度

本例演示如何使用百分比值來設置元素的最大高度。

使用像素值來設置元素的最小高度

本例演示如何使用像素值來設置元素的最小高度。

使用像素值來設置元素的最小寬度

本例演示如何使用像素值來設置元素的最小寬度。

使用百分比來設置元素的最小寬度

本例演示如何使用百分比值來設置元素的最小寬度。

使用百分比設置行間距

本例演示如何使用百分比值來設置段落中的行間距。

使用像素值設置行間距

本例演示如何使用像素值來設置段落中的行間距。

使用數值來設置行間距

本例演示如何使用一個數值來設置段落中的行間距。

例子解釋

CSS 分類 (Classification) 實例：

如何把元素顯示為內聯元素

本例演示如何把元素顯示為內聯元素。

如何把元素顯示為塊級元素

本例演示如何把元素顯示為塊級元素。

浮動屬性的簡單應用

使圖像浮動于一個段落的右側。

將帶有邊框和邊界的圖像浮動于段落的右側

使圖像浮動于段落的右側。向圖像添加邊框和邊界。

帶標題的圖像浮動于右側

使帶有標題的圖像浮動于右側

使段落的首字母浮動于左側

使段落的首字母浮動于左側，并向這個字母添加樣式。

創建水平菜單

使用具有一欄超鏈接的浮動來創建水平菜單。

創建無表格的首頁

使用浮動來創建擁有頁眉、頁腳、左側目錄和主體內容的首頁。

定位：相對定位

本例演示如何相對于一個元素的正常位置來對其定位。

定位：絕對定位

本例演示如何使用絕對值來對元素進行定位。

定位：固定定位

本例演示如何相對于瀏覽器窗口來對元素進行定位。

如何使元素不可見

本例演示如何使元素不可見。你希望元素被顯示出來，還是不呢？

把表格元素設置為 collapse（請在非 IE 的瀏覽器中查看）

本例演示如何使表格元素疊加？

改變光標

本例演示如何改變光標。

清除元素的側面

本例演示如何使用清除元素側面的浮動元素。

例子解釋

CSS 定位 (Positioning) 實例：

定位：相對定位

本例演示如何相對于一個元素的正常位置來對其定位。

定位：絕對定位

本例演示如何使用絕對值來對元素進行定位。

定位：固定定位

本例演示如何相對于瀏覽器窗口來對元素進行定位。

設置元素的形狀

本例演示如何設置元素的形狀。此元素被剪裁到這個形狀內，并顯示出來。

如何使用滾動條來顯示元素內溢出的內容

本例演示當元素內容太大而超出規定區域時，如何設置溢出屬性來規定相應的動作。

如何隱藏溢出元素中溢出的內容

本例演示在元素中的內容太大以至于無法適應指定的區域時，如何設置 overflow 屬性來隱藏其內容。

如何設置瀏覽器來自動地處理溢出

本例演示如何設置瀏覽器來自動地處理溢出。

垂直排列圖象

本例演示如何在文本中垂直排列圖象。

Z-index

Z-index可被用于將在一個元素放置于另一元素之后。

Z-index

上面的例子中的元素已經更改了Z-index。

使用固定值設置圖像的上邊緣

本例演示如何使用固定值設置圖像的上邊緣。

使用百分比設置圖像的上邊緣

本例演示如何使用百分比值設置圖像的上邊緣。

使用像素值設置圖像的底部邊緣

本例演示如何使用像素值設置圖像的底部邊緣。

使用百分比設置圖像的底部邊緣

本例演示如何使用百分比值設置圖像的底部邊緣。

使用固定值設置圖像的左邊緣

本例演示如何使用固定值設置圖像的左邊緣。

使用百分比設置圖像的左邊緣

本例演示如何使用百分比值設置圖像的左邊緣。

使用固定值設置圖像的右邊緣

本例演示如何使用固定值設置圖像的右邊緣。

使用百分比設置圖像的右邊緣

本例演示如何使用百分比值設置圖像的右邊緣。

例子解釋

CSS 偽類 (Pseudo-classes)實例：

超鏈接

本例演示如何向文檔中的超鏈接添加不同的顏色。

超鏈接 2

本例演示如何向超鏈接添加其他樣式。

超鏈接：:focus 的使用

本例演示如何使用 :focus 偽類（無法在 IE 中工作）。

:first-child（首個子對象）

本例演示 :first-child 偽類的用法。

:lang（語言）

本例演示 :lang 偽類的用法。

例子解釋

CSS 偽元素 (Pseudo-elements)實例：

制作首字母特效

本例演示如何向文本的首字母添加特效。

制作首行特效

本例演示如何向文本的首行添加特效。

例子解釋