了解如何在 Dreamweaver 中使用「CSS 樣式」面板來追蹤 CSS 規則和屬性。

註解:

在 Dreamweaver CC 和更新版本中,CSS 樣式面板已由 CSS 設計工具所取代。如需詳細資訊,請參閱 CSS 設計工具。

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

目前模式中的 CSS 樣式面板

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

目前模式中的 CSS 樣式面板
目前模式中的 CSS 樣式面板

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

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

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

.foo{ 
color: green; 
font-family: ‘Arial’; 
} 
p{ 
font-family: ‘serif’; 
font-size: 12px; 
}

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

font-size: 12px 
font-family: ‘Arial’ 
color: green

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

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

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

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

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

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

全部模式中的 CSS 樣式面板

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

全部模式中的 CSS 樣式面板
全部模式中的 CSS 樣式面板

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

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

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

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

CSS 樣式面板按鈕與檢視

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

CSS 樣式面板檢視
CSS 樣式面板檢視

A. 類別檢視 B. 清單檢視 C. 設定屬性檢視 

類別檢視

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

清單檢視

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

設定屬性檢視

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

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

CSS 樣式面板按鈕
CSS 樣式面板按鈕

A. 附加樣式表 B. 新增 CSS 規則 C. 編輯樣式 D. 啟用/停用 CSS 屬性 E. 刪除 CSS 規則 

附加樣式表

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

新增 CSS 規則

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

編輯樣式

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

刪除 CSS 規則

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

註解:

按一下右鍵 (Windows) 或 Control+按一下 (Macintosh)「CSS 樣式」面板,開啟使用 CSS 樣式表命令的選項快顯選單。

開啟 CSS 樣式面板

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

  1. 請執行下列其中一項作業:
    • 選取「視窗>CSS 樣式」。

    • 按 Shift+F11 鍵。

    • 按一下「屬性」檢視窗中的「CSS」按鈕。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策