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