【正文】 CSS 基礎(chǔ) ? CSS 教程 ? CSS 簡(jiǎn)介 ? CSS 基礎(chǔ)語(yǔ)法 ? CSS 高級(jí)語(yǔ)法 ? CSS 派生選擇器 ? CSS id 選擇器 ? CSS 類選擇器 ? CSS 屬性選擇器 ? CSS 創(chuàng)建 CSS 樣式 ? CSS 背景 ? CSS 文本 ? CSS 字體 ? CSS 列表 ? CSS 表格 ? CSS 輪廓 CSS 框模型 ? CSS 框模型概述 ? CSS 內(nèi)邊距 ? CSS 邊框 ? CSS 外邊距 ? CSS 外邊距合并 CSS 定位 ? CSS 定位概述 ? CSS 相對(duì)定位 ? CSS 絕對(duì)定位 ? CSS 浮動(dòng) CSS 選擇器 ? CSS 元素選擇器 ? CSS 選擇器分組 ? CSS 類選擇器詳解 ? CSS ID 選擇器詳解 ? CSS 屬性選擇器詳解 ? CSS 后代選擇器 ? CSS 子元素選擇器 ? CSS 相鄰兄弟選擇器 ? CSS 偽類 ? CSS 偽元素 CSS 高級(jí) ? CSS 尺寸 ? CSS 分類 ? CSS 媒介類型 ? CSS 注意事項(xiàng) ? CSS 總結(jié) CSS 實(shí)例 ? CSS 實(shí)例 參考手冊(cè) ? CSS2 參考手冊(cè) ? CSS2 打印 ? CSS2 聽覺 ? CSS2 單位 CSS 測(cè)驗(yàn) ? CSS 測(cè)驗(yàn) CSS 簡(jiǎn)介 需要具備的基礎(chǔ)知識(shí) 在繼續(xù)學(xué)習(xí)之前，你需要對(duì)下面的知識(shí)有基本的了解： ? HTML ? XHTML 如果你希望首先學(xué)習(xí)這些項(xiàng)目，請(qǐng)?jiān)? 首頁(yè) 訪問(wèn)相關(guān)教程。 CSS 概述 ? CSS 指層疊樣式表 (Cascading Style Sheets) ? 樣式定義 如 何顯示 HTML 元素 ? 樣式通常存儲(chǔ)在 樣式表 中 ? 把樣式添加到 HTML 中，是為了 解決內(nèi)容與表現(xiàn)分離的問(wèn)題 ? 外部樣式表 可以極大提高工作效率 ? 外部樣式表通常存儲(chǔ)在 CSS 文件 中 ? 多個(gè)樣式定義可 層疊 為一 樣式解決了一個(gè)普遍的問(wèn)題 HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。通過(guò)使用 h p、 table 這樣的標(biāo)簽， HTML 的初衷是表達(dá) “這是標(biāo)題 ”、 “這是段落 ”、 “這是表格 ”之類的信息。同時(shí)文檔布局由瀏覽器來(lái)完成，而不使用任何的格式化標(biāo)簽。 由于兩種主要的瀏覽器（ Netscape 和 Inter Explorer）不斷地將新的 HTML 標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到 HTML 規(guī)范中，創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來(lái)越困難。 為了解決這個(gè)問(wèn)題，萬(wàn)維網(wǎng)聯(lián)盟（ W3C），這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML 之外創(chuàng)造出樣式（ Style）。 所有的主流瀏覽器均支持層疊樣式表。 樣式表極大地提高了工作效率 樣式表定義如何顯示 HTML 元素，就像 HTML 的字體標(biāo)簽和顏色屬性所起的作用那樣。樣式通常 保存在外部的 .css 文件中。通過(guò)僅僅編輯一個(gè)簡(jiǎn)單的 CSS 文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。 由于允許同時(shí)控制多重頁(yè)面的樣式和布局， CSS 可以稱得上 WEB 設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開發(fā)者，你能夠?yàn)槊總€(gè) HTML 元素定義樣式，并將之應(yīng)用于你希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。 多重樣式將層疊為一個(gè) 樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一 個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。 層疊次序 當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？ 一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。 1. 瀏覽器缺省設(shè)置 2. 外部樣式表 3. 內(nèi)部樣式表（位于 head 標(biāo)簽內(nèi)部） 4. 內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部） 因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明： head 標(biāo)簽中的樣式聲明，外部樣式表中的 樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。 CSS 基礎(chǔ)語(yǔ)法 CSS 語(yǔ)法 CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。 selector {declaration1。 declaration2。 ... declarationN } 選擇器通常是您需要改變樣式的 HTML 元素。 每條聲明由一個(gè)屬性和一個(gè)值組成。 屬性（ property）是您希望設(shè)置的樣式屬性（ style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開。 selector {property: value} 下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為紅色，同時(shí)將字體大小設(shè)置為 14 像素。 在這個(gè)例子中， h1 是選擇器， color 和 fontsize 是屬性， red 和 14px 是值。 h1 {color:red。 fontsize:14px。} 下面的示意圖為您展示了上面這段代碼的結(jié)構(gòu)： 提示： 請(qǐng)使用花括號(hào)來(lái)包 圍聲明。 值的不同寫法和單位 除了英文單詞 red，我們還可以使用十六進(jìn)制的顏色值 ff0000： p { color: ff0000。 } 為了節(jié)約字節(jié)，我們可以使用 CSS 的縮寫形式： p { color: f00。 } 我們還可以通過(guò)兩種方法使用 RGB 值： p { color: rgb(255,0,0)。 } p { color: rgb(100%,0%,0%)。 } 請(qǐng)注意，當(dāng)使用 RGB 百分比時(shí)，即使當(dāng)值為 0 時(shí)也要寫百分比符號(hào)。但是在其他的情況下就不需要這么做了。比如說(shuō)，當(dāng)尺寸為 0 像素時(shí)， 0 之后不需要使用 px 單位，因?yàn)? 0 就是 0，無(wú)論單位是什么。 記得寫引號(hào) 提示： 如果值為若干單詞，則要給值加引號(hào)： p {fontfamily: sans serif。} 多重聲明： 提示： 如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。下面的例子展示出如何定義一個(gè)紅色文字的居中段落。最后一條規(guī)則是不需要加分號(hào)的，因?yàn)榉痔?hào)在英語(yǔ)中是一個(gè)分隔符號(hào)，不是結(jié)束符號(hào)。然而，大多數(shù)有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)在每條聲明的末尾都加上分號(hào)，這么的好處是，當(dāng)你從現(xiàn)有的規(guī)則中增減聲明時(shí)，會(huì)盡可能的減少出錯(cuò) 的可能性。就像這樣： p {textalign:center。 color:red。} 你應(yīng)該在每行只描述一個(gè)屬性，這樣可以增強(qiáng)樣式定義的可讀性，就像這樣： p { textalign: center。 color: black。 fontfamily: arial。 } 空格和大小寫 大多數(shù)樣式表包含不止一條規(guī)則，而大多數(shù)規(guī)則包含不止一個(gè)聲明。多重聲明和空格的使用使得樣式表更容易被編輯： body { color: 000。 background: fff。 margin: 0。 padding: 0。 fontfamily: Geia, Palatino, serif。 } 是否包含空格不會(huì)影響 CSS 在瀏覽器的工作效果，同樣，與 XHTML 不同， CSS 對(duì)大小寫不敏感。不過(guò)存在一個(gè)例外：如果涉及到與 HTML 文檔一起工作的話， class 和 id 名稱對(duì)大小寫是敏感的。 CSS 高級(jí)語(yǔ)法 選擇器的分組 你可以對(duì)選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號(hào)將需要分組的選擇器分開。在下面的例子中，我們對(duì)所有的標(biāo)題元素進(jìn)行了分組 。所有的標(biāo)題元素都是綠色的。 h1,h2,h3,h4,h5,h6 { color: green。 } 繼承及其問(wèn)題 根據(jù) CSS，子元素從父元素繼承屬性。但是它并不總是按此方式工作。看看下面這條規(guī)則： body { fontfamily: Verdana, sansserif。 } 根據(jù)上面這條規(guī)則，站點(diǎn)的 body 元素將使用 Verdana 字體（假如訪問(wèn)者的系統(tǒng)中存在該字體的話）。 通過(guò) CSS 繼承，子元素將繼承最高級(jí)元素（在本例中是 body）所擁有的屬性（這些子元 素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規(guī)則，所有 body 的子元素都應(yīng)該顯示 Verdana 字體，子元素的子元素也一樣。并且在大部分的現(xiàn)代瀏覽器中，也確實(shí)是這樣的。 但是在那個(gè)瀏覽器大戰(zhàn)的血腥年代里，這種情況就未必會(huì)發(fā)生，那時(shí)候?qū)?biāo)準(zhǔn)的支持并不是企業(yè)的優(yōu)先選擇。比方說(shuō)， Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應(yīng)用于 body 元素的規(guī)則。IE/Windows 直到 IE6 還存在相關(guān)的問(wèn)題，在表格內(nèi)的字體樣式會(huì)被忽略。我們又該如 何是好呢？ 友善地對(duì)待 Netscape 4 幸運(yùn)地是，你可以通過(guò)使用我們稱為 Be Kind to Netscape 4 的冗余法則來(lái)處理舊式瀏覽器無(wú)法理解繼承的問(wèn)題。 body { fontfamily: Verdana, sansserif。 } p, td, ul, ol, li, dl, dt, dd { fontfamily: Verdana, sansserif。 } 瀏覽器無(wú)法理解繼承，不過(guò)他們可以理解組選擇器。這么做雖然會(huì)浪費(fèi) 一些用戶的帶寬，但是如果需要對(duì) Netscape 4 用戶進(jìn)行支持，就不得不這么做。 繼承是一個(gè)詛咒嗎？ 如果你不希望 Verdana, sansserif 字體被所有的子元素繼承，又該怎么做呢？比方說(shuō)，你希望段落的字體是 Times。沒問(wèn)題。創(chuàng)建一個(gè)針對(duì) p 的特殊規(guī)則，這樣它就會(huì)擺脫父元素的規(guī)則： body { fontfamily: Verdana, sansserif。 } td, ul, ol, ul, li, dl, dt, dd { fontfamily: Verdana, sansserif。 } p { fontfamily: Times, Times New Roman, serif。 } CSS 派生選擇器 派生選擇器 通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，你可以使標(biāo)記更加簡(jiǎn)潔。 在 CSS1 中，通過(guò)這種方式來(lái)應(yīng)用規(guī)則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由于它們依賴于上下文關(guān)系來(lái)應(yīng)用或者避免某項(xiàng)規(guī)則。在 CSS2 中，它們稱為派生選擇器，但是無(wú)論你如何稱呼它們，它們的作用都是相同的。 派生選擇器允許你根據(jù)文檔的上下文關(guān)系來(lái)確定某個(gè)標(biāo)簽的樣式。通過(guò)合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。 比方說(shuō)，你希望列表中的 strong 元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個(gè)派生選擇器： li strong { fontstyle: italic。 fontweight: normal。 } 請(qǐng)注意標(biāo)記為 strong 的藍(lán)色代碼的上下文關(guān)系： pstrong我是粗體字，不是斜體字，因?yàn)槲也辉诹?表當(dāng)中，所以這個(gè)規(guī)則對(duì)我不起作用/strong/p ol listrong我是斜體字。這是因?yàn)? strong 元素位于 li 元素內(nèi)。 /strong/li li我是正常的字體。 /li /ol 在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無(wú)需為 strong 元素定義特別的 class 或 id，代碼更加簡(jiǎn)潔。 再看看下面的 CSS 規(guī)則： strong { color: red。 } h2 { color: red。 } h2 strong { color: blue。 } 下面是它施加影響的 HTML： pThe strongly emphasized word in this paragraph isstrongred/strong./p h2This subhead is also red./h2 h2The strongly emphasized word in this subhead isstrongblue/strong./h2 CSS id 選擇器 id 選擇器 id 選擇器可以為標(biāo)有特定 id 的