CSS 實例
提示：以下例子中的 CSS 代碼均位于 HTML 的 head 部分，這樣做的目的是為了利于演示例子本身。在實際的開發(fā)中，使用 CSS 最好的方式是引用外部樣式表。
CSS 背景實例：
- 設置背景顏色
- 本例演示如何為元素設置背景顏色。
- 設置文本的背景顏色
- 本例顏色如何設置部分文本的背景顏色。
- 將圖像設置為背景
- 本例演示如何將圖像設置為背景。
- 如何重復背景圖像
- 本例演示如何重復背景圖像。
- 如何在垂直方向重復背景圖像
- 本例演示如何垂直地重復背景圖像。
- 如何在水平方向重復背景圖像
- 本例演示如何水平地重復背景圖像。
- 如何僅顯示一次背景圖像
- 本例演示如何僅顯示一次背景圖像。
- 如何放置背景圖像
- 本例演示如何在頁面上放置背景圖像。
- 如何使用%來定位背景圖像
- 本例演示如何使用百分比來在頁面上定位背景圖像。
- 如何使用像素來定位背景圖像
- 本例演示如何使用像素來在頁面上定位背景圖像。
- 如何設置固定的背景圖像
- 本例演示如何設置固定的背景圖像。圖像不會隨著頁面的其他部分滾動。
- 所有背景屬性在一個聲明之中
- 本例演示如何使用簡寫屬性來將所有背景屬性設置在一個聲明之中。
CSS 文本實例：
- 設置文本顏色
- 本例演示如何設置文本的顏色。
- 設置文本的背景顏色
- 本例顏色如何設置部分文本的背景顏色。
- 規(guī)定字符間距
- 本例演示如何增加或減少字符間距。
- 使用百分比設置行間距
- 本例演示如何使用百分比值來設置段落中的行間距。
- 使用像素值設置行間距
- 本例演示如何使用像素值來設置段落中的行間距。
- 使用數值來設置行間距
- 本例演示如何使用一個數值來設置段落中的行間距。
- 對齊文本
- 本例演示如何對齊文本。
- 修飾文本
- 本例演示如何向文本添加修飾。
- 縮進文本
- 本例演示如何縮進文本首行。
- 控制文本中的字母
- 本例演示如何控制文本中的字母。
- 在元素中禁止文本折行
- 本例演示如何禁止在元素中的文本折行。
- 增加單詞間距
- 本例演示如何增加段落中單詞間的距離。
CSS 字體(font)實例：
CSS 邊框(border)實例：
- 所有邊框屬性在一個聲明之中
- 本例演示用簡寫屬性來將所有四個邊框屬性設置于同一聲明中。
- 設置四邊框樣式
- 本例演示如何設置四邊框樣式。
- 設置每一邊的不同邊框
- 本例演示如何在元素的各邊設置不同的邊框。
- 所有邊框寬度屬性在一個聲明之中
- 本例演示用簡寫屬性來將所有邊框寬度屬性設置于同一聲明中。
- 設置四個邊框的顏色
- 本例演示如何設置四個邊框的顏色�？梢栽O置一到四個顏色。
- 所有下邊框屬性在一個聲明中
- 本例演示用簡寫屬性來將所有下邊框屬性設置在同一聲明中。
- 設置下邊框的顏色
- 本例演示如何設置下邊框的顏色。
- 設置下邊框的樣式
- 本例演示如何設置下邊框的樣式。
- 設置下邊框的寬度
- 本例演示如何設置下邊框的寬度。
- 所有左邊框屬性在一個聲明之中
- 所有左邊框屬性在一個聲明之中
- 設置左邊框的顏色
- 本例演示如何設置左邊框的顏色。
- 設置左邊框的樣式
- 本例演示如何設置左邊框的樣式。
- 設置左邊框的寬度
- 本例演示如何設置左邊框的寬度。
- 所有右邊框屬性在一個聲明之中
- 本例演示一個簡寫屬性，用于把所有右邊框屬性設置在一條聲明中。
- 設置右邊框的顏色
- 本例演示如何設置右邊框的顏色。
- 設置右邊框的樣式
- 本例演示如何設置右邊框的樣式。
- 設置右邊框的寬度
- 本例演示如何設置右邊框的寬度。
- 所有上邊框屬性在一個聲明之中
- 本例演示用簡寫屬性來將所有上邊框屬性設置于同一聲明之中。
- 設置上邊框的顏色
- 本例演示如何設置上邊框的顏色。
- 設置上邊框的樣式
- 本例演示如何設置上邊框的樣式。
- 設置上邊框的寬度
- 本例演示如何設置上邊框的寬度。
CSS 外邊距 (margin) 實例：
- 設置文本的左外邊距
- 本例演示如何設置文本的左外邊距。
- 設置文本的右外邊距
- 本例演示如何設置文本的右外邊距。
- 設置文本的上外邊距
- 本例演示如何設置文本的上外邊距。
- 設置文本的下外邊距
- 本例演示如何設置文本的下外邊距。
- 所有的外邊距屬性在一個聲明中。
- 本例演示如何將所有的外邊距屬性設置于一個聲明中。
CSS 內邊距 (padding) 實例：
- 所有填充屬性在一個聲明中
- 本例演示使用簡寫屬性將所有的填充屬性設置于一個聲明中，可以有一到四個值。
- 設置下內邊距 1
- 本例演示如何使用厘米值來設置單元格的下內邊距。
- 設置下內邊距 2
- 本例演示如何使用百分比值來設置單元格的下內邊距。
- 設置左內邊距 1
- 本例演示如何使用厘米值來設置單元格的左內邊距。
- 設置左內邊距 2
- 本例演示如何使用百分比值來設置單元格的左內邊距。
- 設置右內邊距 1
- 本例演示如何使用厘米值來設置單元格的右內邊距。
- 設置右內邊距 2
- 本例演示如何使用百分比值來設置單元格的右內邊距。
- 設置上內邊距 1
- 本例演示如何使用厘米值來設置單元格的上內邊距。
- 設置上內邊距 2
- 本例演示如何使用百分比值來設置單元格的上內邊距。
CSS 列表實例：
- 在無序列表中的不同類型的列表標記
- 本例演示在CSS中不同類型的列表項標記。
- 在有序列表中不同類型的列表項標記
- 本例演示在CSS中不同類型的列表項標記。
- 所有的列表樣式類型
- 本例演示在CSS中所有不同類型的列表項標記。
- 將圖像作為列表項標記
- 本例演示如何將圖像作為列表項標記。
- 放置列表標記
- 本例演示在何處放置列表標記。
- 在一個聲明中定義所有的列表屬性
- 本例演示將所有針對列表的屬性設置于一個簡寫屬性。
CSS 表格實例：
- 設置表格的布局
- 本例演示如何設置表格的布局。
- 顯示表格中的空單元
- 本例演示是否顯示表格中的空單元。（請在非 IE 瀏覽器中瀏覽）
- 合并表格邊框
- 本例演示是否把表格邊框顯示為一條單獨的邊框，還是像標準的 HTML 中那樣分開顯示。
- 設置表格邊框之間的空白
- 本例演示如何設置單元格邊框之間的距離。（請在非 IE 瀏覽器中瀏覽）
- 設置表格標題的位置
- 本例演示如何定位表格的標題。（請在非 IE 瀏覽器中瀏覽）
輪廓（Outline） 實例：
CSS 尺寸 (Dimension) 實例：
- 使用像素值設置圖像的高度
- 本例演示如何使用像素值設置元素的高度。
- 使用百分比設置圖像的高度
- 本例演示如何使用百分比值來設置元素的高度。
- 使用像素值來設置元素的寬度
- 本例演示如何使用像素值來設置元素的寬度。
- 使用百分比來設置元素的寬度
- 本例演示如何使用百分比值來設置元素的寬度。
- 設置元素的最大高度
- 本例演示如何設置一個元素的最大高度。
- 使用像素值來設置元素的最大寬度
- 本例演示如何使用像素值來設置元素的最大高度。
- 使用百分比來設置元素的最大寬度
- 本例演示如何使用百分比值來設置元素的最大高度。
- 使用像素值來設置元素的最小高度
- 本例演示如何使用像素值來設置元素的最小高度。
- 使用像素值來設置元素的最小寬度
- 本例演示如何使用像素值來設置元素的最小寬度。
- 使用百分比來設置元素的最小寬度
- 本例演示如何使用百分比值來設置元素的最小寬度。
- 使用百分比設置行間距
- 本例演示如何使用百分比值來設置段落中的行間距。
- 使用像素值設置行間距
- 本例演示如何使用像素值來設置段落中的行間距。
- 使用數值來設置行間距
- 本例演示如何使用一個數值來設置段落中的行間距。
CSS 分類 (Classification) 實例：
- 如何把元素顯示為內聯(lián)元素
- 本例演示如何把元素顯示為內聯(lián)元素。
- 如何把元素顯示為塊級元素
- 本例演示如何把元素顯示為塊級元素。
- 浮動屬性的簡單應用
- 使圖像浮動于一個段落的右側。
- 將帶有邊框和邊界的圖像浮動于段落的右側
- 使圖像浮動于段落的右側。向圖像添加邊框和邊界。
- 帶標題的圖像浮動于右側
- 使帶有標題的圖像浮動于右側
- 使段落的首字母浮動于左側
- 使段落的首字母浮動于左側，并向這個字母添加樣式。
- 創(chuàng)建水平菜單
- 使用具有一欄超鏈接的浮動來創(chuàng)建水平菜單。
- 創(chuàng)建無表格的首頁
- 使用浮動來創(chuàng)建擁有頁眉、頁腳、左側目錄和主體內容的首頁。
- 定位：相對定位
- 本例演示如何相對于一個元素的正常位置來對其定位。
- 定位：絕對定位
- 本例演示如何使用絕對值來對元素進行定位。
- 定位：固定定位
- 本例演示如何相對于瀏覽器窗口來對元素進行定位。
- 如何使元素不可見
- 本例演示如何使元素不可見。你希望元素被顯示出來，還是不呢？
- 把表格元素設置為 collapse（請在非 IE 的瀏覽器中查看）
- 本例演示如何使表格元素疊加？
- 改變光標
- 本例演示如何改變光標。
- 清除元素的側面
- 本例演示如何使用清除元素側面的浮動元素。
CSS 定位 (Positioning) 實例：
- 定位：相對定位
- 本例演示如何相對于一個元素的正常位置來對其定位。
- 定位：絕對定位
- 本例演示如何使用絕對值來對元素進行定位。
- 定位：固定定位
- 本例演示如何相對于瀏覽器窗口來對元素進行定位。
- 設置元素的形狀
- 本例演示如何設置元素的形狀。此元素被剪裁到這個形狀內，并顯示出來。
- 如何使用滾動條來顯示元素內溢出的內容
- 本例演示當元素內容太大而超出規(guī)定區(qū)域時，如何設置溢出屬性來規(guī)定相應的動作。
- 如何隱藏溢出元素中溢出的內容
- 本例演示在元素中的內容太大以至于無法適應指定的區(qū)域時，如何設置 overflow 屬性來隱藏其內容。
- 如何設置瀏覽器來自動地處理溢出
- 本例演示如何設置瀏覽器來自動地處理溢出。
- 垂直排列圖象
- 本例演示如何在文本中垂直排列圖象。
- Z-index
- Z-index可被用于將在一個元素放置于另一元素之后。
- Z-index
- 上面的例子中的元素已經更改了Z-index。
- 使用固定值設置圖像的上邊緣
- 本例演示如何使用固定值設置圖像的上邊緣。
- 使用百分比設置圖像的上邊緣
- 本例演示如何使用百分比值設置圖像的上邊緣。
- 使用像素值設置圖像的底部邊緣
- 本例演示如何使用像素值設置圖像的底部邊緣。
- 使用百分比設置圖像的底部邊緣
- 本例演示如何使用百分比值設置圖像的底部邊緣。
- 使用固定值設置圖像的左邊緣
- 本例演示如何使用固定值設置圖像的左邊緣。
- 使用百分比設置圖像的左邊緣
- 本例演示如何使用百分比值設置圖像的左邊緣。
- 使用固定值設置圖像的右邊緣
- 本例演示如何使用固定值設置圖像的右邊緣。
- 使用百分比設置圖像的右邊緣
- 本例演示如何使用百分比值設置圖像的右邊緣。
CSS 偽類 (Pseudo-classes)實例：
- 超鏈接
- 本例演示如何向文檔中的超鏈接添加不同的顏色。
- 超鏈接 2
- 本例演示如何向超鏈接添加其他樣式。
- 超鏈接：:focus 的使用
- 本例演示如何使用 :focus 偽類（無法在 IE 中工作）。
- :first-child（首個子對象）
- 本例演示 :first-child 偽類的用法。
- :lang（語言）
- 本例演示 :lang 偽類的用法。