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