玩轉Dreamweaver 8：瞭解CSS層疊樣式表

css|dreamweaver|樣式表

瞭解層疊樣式表

層疊樣式表 (CSS) 是一系列格式設定規則，它們控制 Web 頁面內容的外觀。使用 CSS 設定頁面格式時，請將內容與表現形式分開。頁面內容（即 HTML 程式碼）駐留在 HTML 檔案自身中，而用於定義代碼錶現形式的 CSS 規則駐留在另一個檔案（外部樣式表）或 HTML 文檔的另一部分（通常為檔案頭部分）中。使用 CSS 可以非常靈活並更好地控制具體的頁面外觀，從精確的布局定位到特定的字型和樣式。

CSS 允許您控制 HTML 無法獨自控制的許多屬性。例如，可以為選定的文本指定不同的字型大小和單位（像素、磅值等）。通過使用 CSS 以像素為單位設定字型大小，還可以確保在多個瀏覽器中以更一致的方式處理頁面配置和外觀。

除設定文字格式設定外，還可以使用 CSS 控制 Web 頁面中塊層級元素的格式和定位。例如，可以設定區塊層級元素的邊距和邊框、其他文本周圍的浮動文本等。

CSS 格式設定規則由兩部分組成：選取器和聲明。選取器是標識格式元素的術語（如 P、H1、類名或 ID），聲明用於定義元素樣式。在下面的樣本中，H1 是選取器，介於括弧 ({}) 之間的所有內容都是聲明：

H1 {
font-size:16 pixels;font-family:Helvetica;font-weight:bold;
}

聲明由兩部分組成：屬性（如 font-family）和值（如 Helvetica）。上面的 CSS 規則為 H1 標籤建立了一個特定的樣式：連結到此樣式的所有 H1 標籤的文本都將是 16 個像素大小、Helvetica 字型和粗體。

術語 cascading 表示向同一個元素應用多種樣式的能力。例如，可以建立一個 CSS 規則來應用顏色，建立另一個 CSS 規則來應用邊距，然後將兩者應用於頁面上的同一個文本。所定義的樣式向下"層疊"到您的 Web 頁面上的元素，並最終建立您想要的設計。

CSS 的主要優點是它提供了便利的更新功能；更新一處的 CSS 規則時，使用該已定義樣式的所有文檔的格式都會自動更新為新樣式。

在 Dreamweaver 中可以定義以下樣式類型：

• 自訂 CSS 規則（也稱為類樣式）使您可以將樣式屬性應用於任何文本範圍或文字區塊。（請參見應用類樣式。）
• HTML 標籤樣式重定義特定標籤（如 h1）的格式。建立或更改 h1 標籤的 CSS 樣式時，所有用 h1 標籤設定了格式的文本都會立即更新。
• CSS 選取器樣式（進階樣式）重新定義特定元素組合的格式設定，或重新定義 CSS 允許的其他選取器表單的格式設定（例如，每當 h2 標題出現在表格儲存格內時都應用選取器 td h2）。進階樣式還可以重新定義包含特定 id 屬性的標籤的格式設定（例如，#myStyle 定義的樣式可應用於包含屬性值對 id="myStyle" 的所有標籤）。

CSS 規則可以位於以下位置：

外部 CSS 樣式表是一系列儲存在一個單獨的外部 CSS (.css) 檔案（並非 HTML 檔案）中的 CSS 規則。利用文檔檔案頭部分中的連結，該檔案被連結到 Web 網站中的一個或多個頁面。

內部（或嵌入式）CSS 樣式表是一系列包含在 HTML 文檔檔案頭部分的 style 標籤內的 CSS 規則。

內聯樣式是在標籤的特定執行個體中在整個 HTML 文檔內定義的。

Dreamweaver 識別現有文檔中定義的樣式，只要這些樣式符合 CSS 樣式準則。

提示

若要顯示 Dreamweaver 中包含的 O'Reilly CSS 參考指南，請選擇"協助">"參考"，然後從"參考"面板的彈出式菜單中選擇"O'Reilly CSS 參考"。

手動設定的 HTML 格式設定會覆蓋通過 CSS 應用的格式設定。要使 CSS 規則能夠控制段落格式，必須刪除所有手動設定的 HTML 格式。

Dreamweaver 會呈現您在"文檔"視窗中直接應用的大多數樣式屬性。您也可以在瀏覽器視窗中預覽文檔以查看樣式的應用情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape Navigator、Opera 和 Apple Safari 中呈現的外觀不相同，有些目前不受任何瀏覽器支援。