使用本主題來了解 CSS 的基本概念，如 CSS 規則、選取器、繼承等等。 同時也了解如何在 Dreamweaver 中將 CSS 與您的網頁相關聯。
關於串接樣式表
階層式樣式表 (CSS) 是一組控制網頁內容外觀的格式規則。使用 CSS 樣式格式化頁面可將內容與呈現方式分離。您的頁面內容 (HTML 代碼) 位於 HTML 檔案中，而定義代碼呈現方式的 CSS 規則則位於另一個檔案 (外部樣式表) 或 HTML 文件的另一部分 (通常是標頭區段)。將內容與呈現方式分離，可讓您從中央位置維護網站外觀變得更加容易，因為您不需要在每次要進行變更時更新每個頁面上的每個屬性。將內容與呈現方式分離也會產生更簡潔的 HTML 程式碼，提供更短的瀏覽器載入時間，並簡化有協助工具需求人員的導覽（例如使用螢幕閱讀器的人員）。
CSS 讓您對頁面的確切外觀擁有極大的彈性和控制權。使用 CSS，您可以控制許多文字屬性，包括特定字型和字級、粗體、斜體、底線和文字陰影、文字顏色和背景顏色、連結顏色和連結底線等等。透過使用 CSS 控制字型，您也可以確保頁面配置和外觀在多個瀏覽器中獲得更一致的處理。
除了文字格式外，您可以使用 CSS 控制網頁中區塊層級元素的格式和位置。區塊層級元素是獨立的內容片段，通常在 HTML 中以新行分隔，並在視覺上格式化為區塊。例如，h1 標記、p 標記和 div 標記都會在網頁上產生區塊層級元素。您可以為區塊層級元素設定邊距和邊框、將它們定位在特定位置、為它們新增背景顏色、讓文字環繞它們等等。操控區塊層級元素本質上就是使用 CSS 來配置頁面的方法。
關於 CSS 規則
CSS 格式規則由兩個部分組成：選擇器和宣告（或在大部分情況下，是宣告區塊）。選擇器是識別格式化元素的詞彙（例如 p、h1、類別名稱或 id），而宣告區塊定義樣式屬性為何。在以下範例中，h1 是選擇器，而大括弧 ({}) 之間的所有內容都是宣告區塊：
h1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight:bold;
}
個別宣告由兩個部分組成：屬性（例如 font-family）和值（例如 Helvetica）。在先前的 CSS 規則中，已為 h1 標記建立特定樣式：連結到此樣式的所有 h1 標記文字將為 16 像素大小、Helvetica 字型和粗體。
樣式（來自規則或規則集合）位於與其格式化的實際文字分離的地方，通常在外部樣式表中，或在 HTML 文件的標頭部分。因此，h1 標記的一個規則可以同時套用到許多標記（在外部樣式表的情況下，規則可以同時套用到許多不同頁面上的許多標記）。如此一來，CSS 提供極簡單的更新功能。當您在一個地方更新 CSS 規則時，使用 已定義樣式的所有元素格式會自動更新為新樣式。
您可以在 Dreamweaver 中定義下列樣式類型：
類別樣式讓您將樣式屬性套用至頁面上的任何元素。
HTML 標記樣式重新定義 特定標記的格式，如 h1。當您為 h1 標記建立或 變更 CSS 樣式時，所有以 h1 標記格式化的文字會立即更新。
進階樣式重新定義 特定元素組合的格式，或其他 CSS 允許的選擇器格式 （例如，選擇器 td h2 適用於 表格儲存格內出現的 h2 標題。）進階 樣式也可重新定義包含特定 id 屬性的標記格式 （例如，#myStyle 定義的樣式適用於 所有包含屬性值配對 id="myStyle" 的標記）。
CSS 規則可以存放在下列位置：
外部 CSS 樣式表：
儲存在獨立外部 CSS (.css) 檔案（非 HTML 檔案）中的 CSS 規則集合。此檔案透過文件標頭區段中的連結或 @import 規則連結至網站中的一個或多個頁面。
內部 (或內嵌) CSS 樣式表：
包含在 HTML 文件標頭部分 style 標記中的 CSS 規則集合。
行內樣式：
使用整份 HTML 文件內的特定標籤實體所定義 (不建議使用行內樣式)。
Dreamweaver 會識別現有文件中定義的樣式，只要它們符合 CSS 樣式準則。Dreamweaver 也會直接在「設計」檢視中轉譯大部分套用的樣式。（不過，在瀏覽器視窗中預覽文件，可提供頁面最準確的「即時」轉譯效果。）某些 CSS 樣式在 Microsoft Internet Explorer、 Netscape、Opera、Apple Safari 或其他瀏覽器中的轉譯方式有所不同， 有些樣式目前不受任何瀏覽器支援。
關於串接樣式
術語階層式是指瀏覽器最終在網頁上針對特定元素顯示樣式的方式。三個不同的來源負責您在網頁上看到的樣式：網頁作者建立的樣式表、使用者的自訂樣式選項 (如果有的話)，以及瀏覽器本身的預設樣式。前面的主題描述如何以網頁作者和該頁面附加樣式表作者的身分，為網頁建立樣式。但瀏覽器也有自己的預設樣式表，用來決定網頁的轉譯方式，此外，使用者還可以透過進行調整網頁顯示的選項來自訂其瀏覽器。網頁的最終外觀是這三個來源的規則結合 (或「串接」) 在一起，以最佳方式轉譯網頁的結果。
常見的標記 (段落標記或<p>標記) 說明了這個概念。根據預設，瀏覽器隨附的樣式表會定義段落文字 (也就是在 HTML 代碼中落在<p>標記之間的文字) 的字型和字級。例如，在 Internet Explorer 中，所有內文 (包括段落文字) 根據預設都會以 Times New Roman、Medium 字型顯示。
但是，身為網頁作者，您可以建立樣式表來覆寫瀏覽器針對段落字型和字級的預設樣式。例如，您可以在樣式表中建立下列規則：
p {
font-family: Arial;
font-size: small;
}
當使用者載入頁面時，您身為作者所設定的段落字型和字級設定會覆寫瀏覽器的預設段落文字設定。
使用者可以進行選擇，以最適合自己使用的方式自訂瀏覽器顯示。例如，在 Internet Explorer 中，如果使用者認為字型太小，可以選取「檢視 > 文字大小 > 最大」，將頁面字型放大到更易讀的大小。最終 (至少在這種情況下)，使用者的選擇會覆寫瀏覽器段落字級的預設樣式以及網頁作者建立的段落樣式。
繼承是「串接」的另一個重要部分。 網頁上大多數元素的屬性都會被繼承，例如，段落標記會從正文標記繼承某些屬性，span 標記會從段落標記繼承某些屬性，依此類推。因此，如果您在樣式表中建立以下規則：
body {
font-family: Arial;
font-style: italic;
}
網頁上的所有段落文字 (以及繼承段落標籤之屬性的文字) 將會是 Arial 和斜體，這是因為段落標籤從 body 標籤繼承了這些屬性。 但是您可以更具體地設定規則，並建立會覆寫標準繼承常規的樣式。 例如，在樣式表中建立下列規則：
body {
font-family: Arial;
font-style: italic;
}
p {
font-family: Courier;
font-style: normal;
}
所有正文文字都將顯示為 Arial 斜體，但段落 (及其繼承的) 文字除外，該文字將顯示為 Courier 標準 (非斜體)。從技術層面來說，段落標記會先繼承為正文標記設定的屬性，但接著會忽略這些屬性，因為它擁有自己定義的屬性。換句話說，雖然頁面元素通常會從上層繼承屬性，但直接將屬性套用到標記總是會覆寫標準的繼承公式。
以上討論的所有因素組合，加上其他因素 (如 CSS 特異性，這是一個為特定類型的 CSS 規則賦予不同權重的系統) 以及 CSS 規則的順序，最終會建立一個複雜的階層，其中較高優先順序的項目會覆寫較低優先順序的屬性。如需有關管理階層、繼承和特異性的規則詳細資訊，請造訪www.w3.org/TR/CSS2/cascade.html。
關於文字格式化與 CSS
根據預設，Dreamweaver 會使用「串接樣式表」(CSS) 來格式化文字。 您使用「屬性」檢視窗或選單命令來套用至文字的樣式，會建立嵌入至目前文件檔頭的 CSS 規則。
您也可以使用 CSS 設計工具建立與編輯 CSS 規則和屬性。 CSS 設計工具是比「屬性」檢視窗更加穩定的編輯器，可以顯示所有為目前文件定義的 CSS 規則 (不論這些規則內嵌於文件檔頭或外部樣式表中)。 Adobe 建議您使用 CSS 設計工具代替「屬性」檢視窗做為建立和編輯 CSS 的主要工具。 如此，您的程式碼將會更加乾淨，並且更容易維護。
如需有關 CSS Designer 的詳細資訊，請參閱使用 CSS Designer 配置頁面。
除了建立的樣式和樣式表之外，您還可以使用 Dreamweaver 所附的樣式表，將樣式套用到文件。
如需有關使用 CSS 設定文字格式的教學課程，請參閱www.adobe.com/go/vid0153。
關於速記 CSS 屬性
CSS 規格允許使用稱為CSS 簡寫的縮寫語法來建立樣式。速記 CSS 可讓您使用單一宣告指定數個屬性的值。例如，font 屬性 可讓您在單一行中設定 font-style、font-variant、font-weight、font-size、line-height 和 font-family 屬性。
使用簡寫 CSS 時需要注意的一個關鍵問題是，從簡寫 CSS 屬性中省略的值 會被指派其預設值。當兩個或更多 CSS 規則被指派給相同標記時， 這可能會造成頁面顯示不正確。
例如，下方顯示的 h1 規則使用 CSS 完整寫法語法。請注意，font-variant、font-stretch、font-size-adjust 和 font-style 屬性已被指派其 預設值。
h1 {
font-weight: bold;
font-size: 16pt;
line-height: 18pt;
font-family: Arial;
font-variant: normal;
font-style: normal;
font-stretch: normal;
font-size-adjust: none
}
重寫為單一簡寫屬性時，相同規則可能 顯示如下：
h1 { font: bold 16pt/18pt Arial }
使用簡寫記號撰寫時，省略的值會自動指派 其預設值。因此，先前的簡寫範例省略了 font-variant、font-style、font-stretch 和 font-size-adjust 標記。
如果您在多個位置定義了樣式 (例如， 同時嵌入在 HTML 頁面中並從外部樣式 表匯入) 並使用 CSS 語法的簡寫和長寫形式，請注意 簡寫規則中省略的屬性可能會覆蓋 (或 cascade) 在另一個規則中明確設定的屬性。
基於這個原因，Dreamweaver 預設使用 CSS 記號的長寫形式。這可防止簡寫規則覆蓋長寫規則 所造成的可能問題。如果您在 Dreamweaver 中開啟 使用簡寫 CSS 記號編碼的網頁，請注意 Dreamweaver 會使用長寫形式建立任何新的 CSS 規則。您可以在「偏好設定」對話框的「CSS 樣式」類別中變更 CSS 編輯偏好設定， 以指定 Dreamweaver 如何建立和編輯 CSS 規則 (Windows 中為「編輯」>「偏好設定」； Macintosh 中為「Dreamweaver」>「偏好設定」)。
Dreamweaver 和 CSS
在 Dreamweaver 中，您可以透過多種方式使用 CSS：
- 您可以使用 CSS 設計工具，盡量減少程式碼撰寫工作，來建立您的 CSS。 如需詳細資訊，請參閱使用 CSS 設計工具配置頁面。
- 您也可以手動撰寫 CSS 程式碼。 如需 Dreamweaver 所提供編碼功能的詳細資訊，請參閱Dreamweaver 中的編碼環境。
- 如果您偏好使用 Sass、Scss 或 Less 檔案，您可以使用您偏好的語法在檔案中撰寫程式碼，並在 Dreamweaver 中使用它。 如需詳細資訊，請參閱 CSS 預處理器。
