本文章介紹如何在Dreamweaver 中使用層疊樣式表(CSS) 設定頁面中的文字格式。您可以使用CSS 以HTML 無法提供的方式來設定文字格式和定位文本，從而能更靈活自如地控制頁面的外觀。
了解CSS
層疊樣式表(CSS) 是一系列格式設定規則，它們控制Web 頁面內容的外觀。使用CSS 設定頁面格式時，內容與表現形式是相互分開的。頁面內容(HTML 程式碼)位於自身的HTML 檔案中，而定義程式碼表現形式的CSS 規則位於另一個檔案(外部樣式表)或HTML 文件的另一部分(通常為部分)中。使用CSS 可以非常靈活並更好地控制頁面的外觀，從精確的佈局定位到特定的字體和樣式等。
CSS 可讓您控制許多僅使用HTML 無法控制的屬性。例如，您可以為所選文字指定不同的字體大小和單位(像素、磅值等)。透過使用CSS 從而以像素為單位設定字體大小，還可以確保在多個瀏覽器中以更一致的方式處理頁面佈局和外觀。
CSS 格式設定規則由兩部分組成:選擇器和聲明。選擇器是標識已設定格式元素(如P、H1、類別名稱或ID)的術語，而聲明則用於定義樣式元素。在下面的範例中，H1 是選擇器，介於大括號({}) 之間的所有內容都是宣告:
以下為引用的內容：
H1 {
font-size:16 pixels;
font-family:Helvetica;
font -weight:bold;
}
聲明由兩部分組成:屬性(如font-family)和值(如Helvetica)。上述範例為H1 標籤建立了樣式:連結到此樣式的所有H1 標籤的文字都將是16 像素大小並使用Helvetica 字體和粗體。
術語"層疊"是指對同一個元素或Web 頁面套用多個樣式的能力。例如，可以建立一個CSS 規則來套用顏色，建立另一個規則來套用邊距，然後將兩者套用到一個頁面中的相同文字。所定義的樣式"層疊"到您的Web 頁面上的元素，並最終創建您想要的設計。
CSS 的主要優點是容易更新;只要對一處CSS 規則進行更新，則使用該定義樣式的所有文件的格式都會自動更新為新樣式。
在Dreamweaver 中可以定義以下規則類型:
自訂CSS 規則(也稱為"類樣式")使您可以將樣式屬性套用到任何文字範圍或文字區塊。所有類別樣式均以句點(.) 開頭。例如，您可以建立稱為.red 的類別樣式，設定規則的color 屬性為紅色，然後將該樣式套用到一部分已定義樣式的段落文字中。
HTML 標籤規則重定義特定標籤(如p 或h1)的格式。建立或變更h1 標籤的CSS 規則時，所有以h1 標籤設定了格式的文字都會立即更新。
CSS 選擇器規則(高級樣式)重定義特定元素組合的格式，或其它CSS 允許的選擇器形式的格式(例如，每當h2 標題出現在表格單元格內時，就應用選擇器td h2)。進階樣式也可以重定義包含特定id 屬性的標籤的格式(例如，由#myStyle 定義的樣式可以套用到所有包含屬性/值對id="myStyle" 的標籤)。
建立新的樣式表
首先，您將建立包含CSS 規則(定義段落文字樣式)的外部樣式表。在外部樣式表中建立樣式時，可以在一個中央位置同時控制多個Web 頁面的外觀，而不需要為每個Web 頁面分別設定樣式。
CSS 規則可以位於以下位置:
外部CSS 樣式表是儲存在一個單獨的外部.css 檔案(並非HTML 檔案)中的一系列CSS 規則。利用文檔head 部分中的鏈接，該.css 文件被鏈接到Web 站點中的一個或多個頁面。
內部(或嵌入式)CSS 樣式表是包含在HTML 文件head 部分的style 標籤內的一系列CSS 規則。例如，下面的範例為已設定段落標籤的文件中的所有文字定義字體大小:
：<head>
<style>
p{
font-size:80px
}
</style>
</head>：
內聯樣式是在HTML 文件中的特定標籤實例中定義的。例如，
《p style="font-size: 9px"》
僅對用含有內聯樣式的標籤設定了格式的段落定義字體大小。
Dreamweaver 會呈現您所套用的大多數樣式屬性並在"文件"視窗中顯示它們。您也可以在瀏覽器視窗中預覽文件以查看樣式的應用程式。有些CSS 樣式屬性在Microsoft Internet Explorer、Netscape Navigator、Opera 和Apple Safari 中呈現的外觀不相同。
選擇"檔案">"新建"。
在"新文件"對話方塊中的"類別"列中選擇"基本頁"，在"基本頁"列中選擇"CSS"，然後按一下"建立"。
空白樣式表將會出現在"文件"視窗中。 "設計"視圖和"代碼"視圖按鈕已停用。 CSS 樣式表是純文字文件，其內容將不會用於在瀏覽器中檢視。
將該頁儲存("檔案">"儲存")為cafe_townsend.css。
儲存樣式表時，請確保將其儲存到cafe_townsend folder 資料夾(您的Web 網站的根資料夾)中。
在樣式表中鍵入以下程式碼:
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
當您鍵入程式碼時，Dreamweaver 將使用代碼提示為您建議一些選項，以幫助您完成輸入。當看到希望Dreamweaver 為您完成鍵入的程式碼時，請按Enter 鍵(Windows) 或Return 鍵(Macintosh)。
不要忘記在每行結尾處的屬性值後面加上一個分號。
完成後的程式碼類似下面的範例:
若要顯示該指南，請選擇"幫助">"參考"，然後從"參考"面板的彈出式選單中選擇"O'Reilly CSS 參考"。儲存樣式表。
附加樣式表
當您將樣式表附加到Web 頁面中時，在樣式表中定義的規則將會套用到頁面上的對應元素。例如，當您將cafe_townsend.css 樣式表附加到index.html 頁時，將根據您定義的CSS 規則設定所有段落文字(用HTML 程式碼中的標籤設定格式的文字)的格式。
在"文檔"視窗中，開啟Cafe Townsend 的index.html 檔案。 (如果該文件已打開，則請按一下它的選項卡。)
選擇在教學:為頁面新增內容中貼上到頁面中的第一段文字。
在"屬性"檢查器中查看，並確保使用段落標籤設定了該段落的格式。
如果"屬性"檢視器中的"格式"彈出式選單顯示"段落"，則已使用段落標籤設定了段落的格式。如果"屬性"檢查器中的"格式"彈出式選單顯示"無"或其它內容，則選擇"段落"來設定段落的格式。
對第二段重複第3 步。
在"CSS 樣式"面板("視窗">"CSS 樣式")中，按一下位於面板右下角的"附加樣式表"按鈕。
在"附加外部樣式表"對話方塊中，按一下"瀏覽"並瀏覽到上一節建立的cafe_townsend.css 檔案。
按一下"確定"。
"文檔"視窗中的文字將根據外部樣式表中的CSS 規則來設定格式。
研究"CSS 樣式"面板
"CSS 樣式"面板可讓您追蹤影響目前所選頁面元素的CSS 規則和屬性，或影響整個文件的規則和屬性，也可以在不開啟外部樣式表的情況下修改CSS 屬性。
請確保index.html 頁在"文件"視窗中開啟。
在"CSS 樣式"面板("視窗">"CSS 樣式")中，按一下面板頂部的"所有"，然後檢查您的CSS 規則。
在"所有"模式下，CSS 面板會向您顯示套用到目前文件的所有CSS 規則，不管這些規則是在外部樣式表中，還是在自身文件中。您應該在"所有規則"窗格中看到兩個主要類別:一個標籤類別和一個cafe_townsend.css 類別。
若未展開標籤類別，請按一下加號(+) 展開該類別。
點選正文規則。
值為#000000 的background-color 屬性出現在下方的"屬性"窗格中。
注意您可能需要折疊其它面板，例如"檔案"面板，以便看到完整的"CSS 樣式"面板，也可以透過拖曳窗格之間的邊界來變更"CSS 樣式"面板的長度。
您在教學課程:建立基於表格的頁面佈局中透過使用"修改頁面屬性"對話方塊設定了頁面的背景色。以此方式設定頁面屬性時，Dreamweaver 會寫一個內建在文件中的CSS 樣式。
點選加號(+) 展開cafe_townsend.css 類別。
按一下p 規則。
在外部樣式表中為p 規則定義的所有屬性和值將顯示在下方的"屬性"窗格中。
在"文檔"視窗中，在剛設定格式的兩個段落中的任何位置單擊一次。
在"CSS 樣式"面板中，按一下面板頂部的"目前"，然後檢查您的CSS 樣式。在"目前"模式中，CSS 面板會向您顯示目前所選內容的屬性的摘要。顯示的屬性與外部樣式表中p 規則的屬性相對應。
在下一節中，您將使用"CSS 樣式"面板建立新規則。使用"CSS 樣式"面板建立新規則比手動鍵入規則容易得多，後者如同最初建立外部樣式表時的操作一樣。
建立新的CSS 規則
在本節中，您將使用"CSS 樣式"面板建立自訂的CSS 規則或類別樣式。類別樣式可讓您設定任何範圍或文字區塊的樣式屬性，並可套用到任何HTML 標籤。有關不同類型的CSS 規則的更多信息，請參見了解CSS。
在"CSS 樣式"面板中，按一下面板右下角的"新CSS 規則"。
在"新CSS 規則"對話方塊中，從"選擇器類型"選項中選擇"類別"。該選項應該是預設選取的。
在"名稱"文字方塊中輸入.bold。
確保在單字"bold"前鍵入句點(.)。所有類別樣式必須以句點開頭
在"定義在"彈出式選單中，選擇cafe_townsend.css。該文件應該是預設選取的。
按一下"確定"。
出現"CSS 規則定義"對話框，表示您正在cafe_townsend.css 檔案中建立一個稱為.bold 的類別樣式。
在"CSS 規則定義"對話框中，執行下面的操作:
在"字體"文字方塊中，輸入Verdana, sans-serif。
在"大小"文字方塊中，輸入11，並在緊靠其右的彈出式選單中選擇像素。
在"行高"文字方塊中，輸入18，並在緊靠其右的彈出式選單中選擇像素。
從"粗細"彈出式選單中選擇"粗體"。
在"顏色"文字方塊中，輸入#990000。
提示有關CSS 屬性的更多信息，請參見Dreamweaver 中包含的O'Reilly 參考指南。若要顯示該指南，請選擇"幫助">"參考"，然後從"參考"面板的彈出式選單中選擇"O'Reilly CSS 參考"。
按一下"確定"。
點選"CSS 樣式"面板頂部的"所有"按鈕。
若未展開cafe_townsend.css 類別，請按一下該類別旁的加號(+) 按鈕。
您可以看到，Dreamweaver 已將.bold 類別樣式新增至在外部樣式表中定義的規則清單中。如果您在"所有規則"窗格中按一下.bold 規則，則該規則的屬性將出現在"屬性"窗格中。新規則也會出現在"屬性"檢查器的"樣式"彈出式選單中。
將類別樣式套用到文字
現在，您已經建立了一個類別規則，並將該規則套用到某些段落文字。
在"文檔"視窗中，選擇第一段中文字的前四個單字:Cafe Townsend's visionary chef。
在"屬性"檢查器("視窗">"屬性")中，從"樣式"彈出式選單中選擇"bold"。
"粗體"類樣式將會套用到您的文字。
重複第2 步，將"粗體"類樣式套用到第二段的前四個單字。
儲存頁面。
設定導航條文字的格式
接下來，您將使用CSS 將樣式套用到導航條的連結文字。許多Web 頁面使用內含文字的彩色矩形影像來建立導航條。但是，如果使用CSS，您所需要設定的只是連結文字和一些格式。透過使用display: block 屬性並設定區塊的寬度，您可以有效地建立矩形，而不需要另外使用圖像。
若為導覽建立新規則
若未開啟cafe_townsend.css 文件，則開啟該文件，或按一下其標籤以顯示該文件。
定義一個新規則，方法是在該檔案的.bold 類別樣式後面鍵入以下程式碼:
.navigation {
}
這是一個空規則。
文件中的程式碼應類似於下面的範例:
儲存cafe_townsend.css 檔案。
接下來，您將使用"CSS 樣式"面板為規則新增屬性。
若未開啟index.html 文件，則開啟該文件。
在"CSS 樣式"面板中，確保選取了"全部"模式，選擇新的.navigation 規則，然後按一下面板右下角的"編輯樣式"。
在"CSS 規則定義"對話框中，執行下面的操作:
在"字體"文字方塊中，輸入Verdana, sans-serif。
從"大小"彈出式選單中選擇16，然後從緊靠其右的彈出式選單中選擇像素。
從"樣式"彈出式選單中選擇"正常"。
從"修飾"清單中選擇"無"。
從"粗細"彈出式選單中選擇"粗體"。
在"顏色"文字方塊中，輸入#FFFFFF。
若要顯示該指南，請選擇"幫助">"參考"，然後從"參考"面板的彈出式選單中選擇"O'Reilly CSS 參考"。
按一下"確定"。
現在，您將使用"CSS 樣式"面板為.navigation 規則添加更多屬性。
在"CSS 樣式"面板中，確保選取了.navigation 規則，然後按一下"顯示清單視圖"。
清單視圖可使"屬性"窗格以字母順序顯示所有可用屬性(與"設定屬性"視圖不同，"設定屬性"視圖只顯示已設定的屬性)。
點選background-color 屬性右邊的欄位。
若要查看屬性的完整內容，請將滑鼠指標停留在該屬性上。
輸入十六進位值#993300，然後按下Enter 鍵(Windows) 或Return 鍵(Macintosh)。
提示若要查看您的工作對外部樣式表的影響，請在您工作時保持cafe_townsend.css 文件在"文檔"視窗中處於開啟狀態。當您在"CSS 樣式"面板中做出選擇時，同時將看到Dreamweaver 在樣式表中寫入CSS 程式碼。
找到display 屬性(可能需要向下捲動)，在右邊的列中點選一次，然後從彈出式選單中選擇block。
找到padding 屬性，在右邊的欄位中按一下，輸入數值8px，然後按下Enter 鍵(Windows) 或Return 鍵(Macintosh)。
找到width 屬性，在右邊的列中按一下，在第一個文字方塊中輸入140，從彈出式選單中選擇像素，然後按Enter 鍵(Windows) 或Return 鍵(Macintosh)。
按一下"顯示設定屬性"，以便在"屬性"窗格中僅顯示您設定的屬性。
按一下cafe_townsend.css 檔案以顯示該檔案。您將看到，Dreamweaver 已經將您指定的所有屬性新增至該檔案。
儲存並關閉cafe_townsend.css 檔案。
現在，您已經建立了一個設定導航條文字格式的規則。接下來，您要將該規則套用到所選連結。
應用規則
在"文檔"視窗中開啟index.html 頁，按一下單字Cuisine 將插入點置於該單字中的某個位置。
在標籤選擇器中，按一下最右邊的標籤。
此操作將為指定的標籤或連結選擇所有文字。
在"屬性"檢查器("視窗">"屬性")中，從"樣式"彈出式選單中選擇"navigation"。
在"文檔"視窗中，Cuisine 文字的外觀完全發生了變化。根據您在上一節中為.navigation 規則所定義的屬性，該文字的格式現在已設定為導覽條按鈕。
對於導航條中的每個鏈接，重複第1 步到第3 步。
您必須為每個標籤或鏈接分配一個導航類樣式，因此，使用標籤選擇器分別選擇每個鏈接，然後逐個為每個鏈接分配類樣式是很重要的。
在設定連結文字的格式時如果有困難，請確保每個(或每組)連結的單字之間有空格(不是回車)。還要確保兩個連結之間的空格本身未被連結。如果空格已鏈接，請小心選擇鏈接的空格，在"屬性"檢查器中清除"鏈接"文字框，並按Enter 鍵(Windows) 或Return 鍵(Macintosh)。
完成導航條的所有單字的格式設定後，儲存該頁面，然後在瀏覽器中預覽您的工作("文件">"在瀏覽器中預覽")。
您可以單擊連結以確保其有效。
新增滑鼠經過效果
現在，您將新增一個滑鼠經過效果，使導航條塊的背景色在每次滑鼠指標經過某個連結時改變顏色。若要新增滑鼠經過效果，請新增包含:hover 偽類的新規則。
關於…關於:hover 偽類偽類是一種影響HTML 文件中的某些元素的方式，它不是基於文件本身的HTML 程式碼，而是基於Web 瀏覽器應用的其它外部條件。偽類可以是動態的，這表示當使用者與文件互動時，頁面上的元素可能會取得或遺失偽類。
當使用者把滑鼠指標停留在已設定格式的頁面元素上時，:hover 偽類別會影響該元素的變化。例如，將:hover 偽類別新增至.navigation 類別樣式(.navigation:hover) 以建立新規則時，根據.navigation:hover 規則的屬性，所有以.navigation 規則設定格式的文字元素都會發生變化。
開啟cafe_townsend.css 檔案。
選擇整個.navigation 規則。
複製文字("編輯">"複製")。
在該規則的末尾單擊一下，然後多按幾次Enter 鍵(Windows) 或Return 鍵(Macintosh) 以建立一些空格。
將已複製的文字貼上("編輯">"貼上")到剛建立的空格中。
將:hover 偽類加入到已貼上的.navigation 選擇器中，如下所示:
在新的.navigation:hover 規則中，將目前的背景色(#993300) 替換為#D03D03。
儲存並關閉該文件。
在"文檔"視窗中開啟index.html 文件，然後在瀏覽器中預覽該頁面("文件">"在瀏覽器中預覽")。
當您將滑鼠指標停留在任何一個連結上時，可以看到新的滑鼠經過效果。