本教程為大家介紹一下Dreamweaver中CSS樣式面板，希望對大家有幫助。

　　一、打開CSS樣式面板

　　使用“CSS樣式”面板可以查看、創建、編輯和刪除CSS樣式，也可以將外部樣式表附加到文檔。

　　點擊“窗口”菜單，選擇“CSS樣式”命令，即可打開“CSS樣式”面板，如下圖所示：

　　如果要調整“CSS樣式”面板的寬窄與大小。

　　二、“正在”模式下的“CSS樣式”面板

　　在“CSS樣式”面板中點擊“正在”按鈕，使“CSS樣式”面板處于“正在”模式下，在此模式下，“CSS樣式”面板將顯示三個窗格面板。如下圖所示：

　　1. “所選內容的摘要”窗格

　　“所選內容的摘要”窗格顯示當前正在編輯的文檔中所選HTML元素的CSS屬性的摘要以及它們的值。該摘要顯示直接應用于所選HTML元素的所有規則的屬性。并且只顯示已設置的屬性。

　　例如，下面創建兩個樣式：

　　p{ /* 標簽樣式：p規則 */ font-family:"宋體"; font-size:14px; Pne-height:24px; } .p1{ /* 類樣式：.p1規則 */ font-size:18px; font-family:"微軟雅黑"; }

　　分別應用于下面的<p>元素中：

　　<p>段落一</p> <p class="p1">段落二</p>

　?。?）當我們將光標移動到“<p>段落一</p>”上面時，會在“所選內容的摘要”窗格中看到p規則的所有屬性出現在窗格中：

　?。?）當我們將光標移動到“<p class="p1">段落二</p>”上面時，會在“所選內容的摘要”窗格中看到.p1規則的所有屬性出現在窗格中：

　　.p1規則的屬性首先繼承了p規則的全部，再用自身的相同屬性替換了p規則中已經存在的屬性，然后加上p規則中沒有的屬性，共同組合成了“所選內容的摘要”窗格中的屬性列表。

　　提示：在“所選內容的摘要”窗格中如果雙擊某一個屬性，則會打開“CSS 規則定義”對話框，可以修改該屬性。

　　2. “規則”窗格

　　“規則”窗格顯示在“所選內容的摘要”窗格中選擇的CSS屬性所在規則的規則名稱，以及包含該規則的文件的名稱。如，在“所選內容的摘要”窗格選擇了“font-family屬性”，在“規則”窗格中顯示了此屬性是在“.p1”規則中定義，這個規則處于“08代碼測試.html”文件中。

　　在“規則”窗格中：

　　點擊右上角的“顯示所選屬性的相關信息”按鈕，可以查看所選屬性的相關信息。

　　點擊“顯示所選標簽的規則層疊”按鈕，可以查看規則的層次結構，直接應用規則的標簽顯示在右列。

　　3. “屬性”窗格

　　在“所選內容的摘要”窗格中選擇某個屬性時，這個屬性所在的規則中的所有屬性都會出現在“屬性”窗格中。如果在“規則”窗格的“顯示所選標簽的規則層疊”視圖中選擇了某一個規則，這個規則的所有屬性也會出現在“屬性”窗格中。

　　在“屬性”窗格中點擊任意一個屬性的屬性值，都可以快速修改該屬性。

　　在“屬性”窗格中也可以點擊左下角的“顯示類別視圖”、“顯示列表視圖”或“只顯示設置屬性”按鈕，進行視圖切換。

　　三、“全部”模式下的“CSS樣式”面板

　　在“CSS樣式”面板中點擊“全部”按鈕，使“CSS樣式”面板處于“全部”模式下，在此模式下，“CSS樣式”面板只顯示兩個窗格面板。如下圖所示：

　　“所有規則”窗格顯示當前文檔中定義的CSS規則以及附加到當前文檔的樣式表中定義的所有CSS規則的列表。使用“屬性”窗格可以編輯“所有規則”窗格中選擇的任一規則的所有CSS屬性。

　　當在“所有規則”窗格中選擇一個CSS規則時，在“屬性”窗格中會顯示該規則中定義的所有屬性，此時可以快速修改該規則的屬性，不管它是嵌入到當前文檔中還是鏈接到附加的樣式表中，同樣都可以修改。

　　在“全部”模式下，在“屬性”窗格中同樣可以點擊左下角的“顯示類別視圖”、“顯示列表視圖”或“只顯示設置屬性”按鈕，進行視圖切換。

　　四、“CSS樣式”面板右下角按鈕

　　在“CSS樣式”面板右下角有五個按鈕，當鼠標停留每一個按鈕上面時，會顯示該按鈕的名稱。如下圖所示：

　　從左到右依次是：

　　“附加樣式表”按鈕：打開“鏈接外部樣式表”對話框，選擇要鏈接到或導入到當前文檔中的外部樣式表。

　　“新建 CSS 規則”按鈕：打開“新建 CSS 規則”對話框，在其中選擇要創建的樣式類型。

　　“編輯樣式”按鈕：打開“CSS 規則定義”對話框，在其中編輯當前文檔或外部樣式表中的樣式。

　　“禁用/啟用 CSS 屬性”按鈕：當在“所選內容的摘要”窗格或“屬性”窗格選擇一個屬性時，點擊此按鈕，可以給這個屬性加上注釋標記（/* 和 */），表示暫時不起作用。如果想讓該屬性重新起作用時，再次選擇該屬性，并點擊該按鈕即可。

　　“刪除 CSS 屬性”按鈕：當在“屬性”窗格中選擇一個已經設置屬性值的屬性時，點擊此按鈕，可以刪除這個屬性。