研究"CSS 樣式"面板

　　"CSS 樣式"面板可讓您跟蹤影響當前所選頁面元素的 CSS 規則和屬性，或影響整個文檔的規則和屬性，還可以在不打開外部樣式表的情況下修改 CSS 屬性。

　　請確保 index.html 頁在"文檔"窗口中打開。

　　在"CSS 樣式"面板("窗口">"CSS 樣式")中，單擊面板頂部的"所有"，然后檢查您的 CSS 規則。

　　在"所有"模式下，CSS 面板向您顯示應用到當前文檔的所有 CSS 規則，不管這些規則是在外部樣式表中，還是在自身文檔中。您應在"所有規則"窗格中看到兩個主要類別:一個<STYLE> 標簽類別和一個 cafe_townsend.css 類別。

　　若未展開<STYLE> 標簽類別，則請單擊加號 ( ) 展開該類別。

　　單擊正文規則。

　　值為 #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。