CSS 樣式面板

「CSS 樣式」面板能讓您追蹤影響目前選取的頁面元素之 CSS 規則和屬性 (「目前」模式)，或者追蹤文件的所有規則和屬性 (「全部」模式)。面板上方有一個切換按鈕可以讓您切換這兩種模式。「CSS 樣式」面板也可以讓您在「全部」和「目前」模式中修改 CSS 屬性。

在「目前」模式中，「CSS 樣式」面板會出現三個面板：顯示文件中目前選取範圍之 CSS 屬性的「選取範圍摘要」窗格、顯示所選屬性位置 (或根據選取範圍顯示所選標籤的規則重疊顯示) 的「規則」窗格，以及可以讓您編輯套用選取範圍的規則之 CSS 屬性的「屬性」窗格。

您可以拖曳窗格之間的邊框，藉此調整任一窗格的大小，並且拖曳分割線來調整欄的大小。

「選取範圍摘要」窗格會針對目前在作用中文件所選的項目，顯示其 CSS 屬性摘要與其值。而摘要會顯示直接套用到選取範圍的所有規則之屬性。不過，只會顯示設定屬性。

例如，以下規則會建立類別樣式和標籤 (此處的段落) 樣式：

當您選取某一段文字，並為其在「文件」視窗中點選 .foo 樣式，「選取範圍摘要」窗格會顯示這兩種規則的相關屬性，因為這兩種規則都套用到選取範圍中。在這種情況下，「選取範圍摘要」窗格會列出下列屬性：

「選取範圍摘要」窗格會以明確性遞增順序排列屬性。在上述範例中，標籤樣式定義字體大小，而類別樣式則定義字體系列和顏色。(由類別樣式定義的字體系列會覆寫標籤樣式定義的字體系列，因為類別選取器的明確性比標籤選取器更高。如需有關 CSS 明確性的詳細資訊，請參閱 www.w3.org/TR/CSS2/cascade.html)。

「規則」窗格會顯示兩種不同的檢視 (「關於」檢視或「規則」檢視)，端視您的選取範圍而定。在「關於」檢視 (預設的檢視方式) 中，窗格會顯示定義所選 CSS 屬性之規則的名稱，以及含有規則之檔案的名稱。在「規則」檢視中，窗格會顯示直接或間接套用到目前選取範圍之規則的重疊 (也就是階層)。(規則直接套用的標籤會顯示在右邊欄位中)。您可以藉由按一下「規則」窗格右上角的「顯示所選屬性的相關資訊」和「顯示所選標籤的規則重疊顯示」按鈕，切換這兩種檢視方式。

當您在「選取範圍摘要」窗格中選取屬性時，定義規則的所有屬性都會出現在「屬性」窗格中。(如果選取「規則」檢視，則也會選取定義規則)。例如，如果您有一條名為 .maintext 的規則會定義字體系列、字體大小和顏色，則在「選取範圍摘要」窗格中選取任何一種屬性，將會在「屬性」窗格中顯示由 .maintext 規則定義的所有屬性，以及在「規則」窗格中所選的 .maintext 規則。(此外，如果在「規則」窗格中選取任何一種規則，則會在「屬性」窗格中顯示那個規則的屬性)。接著，不論是已內嵌於目前文件中，或是使用附加樣式表連結，您都可以使用「屬性」窗格快速修改 CSS。依預設值，「屬性」窗格只會顯示已經設定的屬性，並且按字母順序排列這些屬性。

您可以選擇在其他兩種檢視中顯示「屬性」窗格。「類別」檢視會顯示按類別 (例如「字體」、「背景」、「區塊」、「邊框」等) 分類的屬性，並且將設定屬性放置於每種類別的上方，並以藍色文字顯示。「清單」檢視會按字母順序顯示所有可用屬性，且同樣將設定屬性排序到上方，以藍色文字顯示。若要切換檢視，請按一下「屬性」窗格左下角的「顯示類別檢視」、「顯示清單檢視」或「僅顯示設定屬性」等按鈕。

在所有檢視中，設定屬性都會顯示為藍色；與選項不相關的屬性則會以紅色刪除線顯示。當滑鼠游標停留在不相關的規則上時，會顯示訊息說明為何此屬性是不相關的。通常因為屬性已被覆寫或是並非繼承的屬性，屬性才會不相關。

您在「屬性」窗格中所作的任何變更都會立即套用，讓您在變更的同時即可預覽您的工作。

全部模式中的 CSS 樣式面板

在「全部」模式中，「CSS 樣式」面板會顯示兩種窗格：「所有規則」窗格 (上方)，以及「屬性」窗格 (下方)。「所有規則」窗格會顯示在目前文件中定義的規則清單，以及在所有附加於目前文件的樣式表中定義的規則。而「屬性」窗格能讓您編輯任何在「所有規則」窗格中所選規則的 CSS 屬性。

拖曳窗格之間的邊框即可調整窗格的大小，而拖曳窗格的分割線則可以調整「屬性」欄的大小。

當您在「所有規則」窗格中選取規則時，所有在此規則中定義的屬性都會顯示在「屬性」窗格中。接著，不論是已內嵌於目前文件中，或是和附加樣式表連結，您都可以使用「屬性」窗格快速修改 CSS。依預設值，「屬性」窗格只會顯示之前已經設定的屬性，並且按字母順序排列這些屬性。

您可以選擇在其他兩種檢視中顯示屬性。「類別」檢視會顯示按類別 (「字體」、「背景」、「區塊」、「邊框」等) 分類的屬性，並且將設定屬性放置於每種類別的上方。「清單」檢視會顯示按字母順序排列的所有可用屬性，且同樣將設定屬性排序到上方。若要切換檢視，請按一下「屬性」窗格左下角的「顯示類別檢視」、「顯示清單檢視」或「僅顯示設定屬性」等按鈕。在所有檢視中，設定屬性都會顯示為藍色。

您在「屬性」窗格中所作的任何變更都會立即套用，讓您在變更的同時即可預覽您的工作。

CSS 樣式面板按鈕與檢視

不論是在「全部」或「目前」模式中，「CSS 樣式」面板都含有三種可以讓您更改「屬性」窗格 (最下方的窗格) 檢視方式的按鈕：

會將 Dreamweaver 支援的 CSS 屬性區分成八種類別：字體、背景、區塊、邊框、方框、清單、定位及擴充功能。每一個類別的屬性都包含在清單中，您可以按一下類別名稱旁的加號 (+) 按鈕來展開或收合。設定屬性會出現 (以藍色顯示) 在清單的頂端。

會以字母順序顯示所有 Dreamweaver 支援的 CSS 屬性。設定屬性會出現 (以藍色顯示) 在清單的頂端。

只會顯示已經設定的屬性。預設的檢視方式是「設定屬性」檢視。

不論是在「全部」或「目前」模式中，「CSS 樣式」面板也都會含有以下的按鈕：

會開啟「附加外部樣式表」對話方塊。選取要連結或匯入目前文件的外部樣式表。

會開啟對話方塊，讓您選取要建立的樣式類型 (例如，建立類別樣式、重新定義 HTML 標籤或是定義 CSS 選取器)。

會開啟對話方塊，讓您編輯目前文件或外部樣式表中的樣式。

會從「CSS 樣式」面板移除選取的規則或屬性，並且從套用此規則或屬性的任何元素移除格式。(不過，它並不會移除該樣式所參考的類別或 ID 屬性)。「刪除 CSS 規則」按鈕也可以分離 (或「取消連結」) 附加的 CSS 樣式表。

開啟 CSS 樣式面板

您可以使用「CSS 樣式」面板來檢視、建立、編輯和移除 CSS 樣式，以及將外部樣式表附加到文件上