在「CSS 設計工具」面板的「來源」窗格中，按一下 
，然後再按下列其中一個選項：
- 建立新的 CSS 檔案：建立新的 CSS 檔案並將其附加到文件
- 附加現有 CSS 檔案：將現有 CSS 檔案附加到文件
- 在頁面中定義：在文件中定義 CSS
上次更新時間
2024年4月25日
了解如何使用「CSS 設計工具」面板來建立或附加樣式表、媒體查詢、選取器，以及設定 CSS 屬性。
CSS Designer 面板（視窗 > CSS Designer）是 CSS 屬性檢視器，讓您可以「視覺化」建立 CSS 樣式、檔案和設定屬性，以及媒體查詢。
CSS Designer 介面提供下列區段：
- 來源：與專案關聯的 CSS 檔案集合
- @Media：控制螢幕大小的媒體查詢
- 選擇器：與 @Media 面板中所選媒體查詢關聯的選擇器
- 屬性：與所選選擇器關聯的屬性，並可選擇僅顯示已設定的屬性
使用 CSS Designer，您可以編輯 CSS 樣式表中的個體規則（在 CSS Designer 中使用「目前」標籤），或者如果您偏好的話，可以直接在 CSS 樣式表中工作（在 CSS Designer 中使用「全部」標籤）。
建立並附加樣式表
根據您所選擇的選項，隨即出現「建立新的 CSS 檔案」或「附加現有的 CSS 檔案」對話方塊。
按一下「瀏覽」指定 CSS 檔案的名稱，如果要建立新的 CSS，則指定儲存新檔案的位置。
請執行下列其中一項作業：
- 按一下「連結」，將 Dreamweaver 文件與 CSS 檔案連結。
- 按一下「匯入」，將 CSS 檔案匯入文件中。
(選擇性) 按一下「條件式使用」，然後指定要與 CSS 檔案相關聯的媒體查詢。
定義媒體查詢
在「CSS 設計工具」面板中，按一下「來源」窗格中的 CSS 來源。
按一下「@媒體」窗格中的 
，加入新的媒體查詢。
隨即顯示「定義媒體查詢」對話框，並列出 Dreamweaver 支援的所有媒體查詢條件。
依照您的需求選取「條件」。
確定您針對選取的所有條件指定了有效值， 否則就無法順利建立對應的媒體查詢。
備註
多重條件僅支援「AND」作業。
如果您透過程式碼加入媒體查詢條件，則只有受支援的條件會填入「定義媒體查詢」對話方塊。 不過，此對話框中的「程式碼」文字方塊會完整顯示出程式碼 (包括未受支援的條件)。
如果您在設計/即時檢視中按一下媒體查詢，檢視區會切換為符合所選取的媒體查詢。 若要檢視完整大小的檢視區，請按一下「@媒體」窗格中的「全域」。
定義 CSS 選擇器
在「CSS Designer」面板中，選取「來源」窗格中的 CSS 來源，或選取「@Media」窗格中的媒體查詢。
在「選取器」窗格中，按一下 。 根據文件中選取的元素，CSS Designer 會智慧型地識別並為您提示相關的選擇器 (最多三個規則)。
您可以執行下列一或多項作業:
- 使用向上鍵或向下鍵讓建議的選擇器更具體或較不具體。
- 刪除建議使用的規則，然後輸入必要的選取器。 務必確認輸入選取器的名稱，同時加上「選取器類型」的代號。 例如，如果要指定 ID，請在選取器的名稱前加上「#」前置符號。
- 若要搜尋特定的選取器，請使用窗格頂端的搜尋方塊。
- 若要重新命名選取器，請按一下選取器，然後輸入必要的名稱。
- 若要重新排列選取器，請將選取器拖曳到必要的位置。
- 若要將選取器從一個來源移到另一個來源，請在「來源」窗格中將選取器拖曳到必要的來源。
- 若要複製所選取來源中的選取器，請以滑鼠右鍵按一下選取器，然後按一下「複製」。
- 若要複製選取器並將其加入媒體查詢，請將滑鼠暫留在「複製至媒體查詢」上方，然後選擇媒體查詢。
注意：只有在所選選取器的來源包含媒體查詢時，「複製至媒體查詢」選項才能使用。 您不可將選取器從某個來源複製到另一個來源的媒體查詢。
複製並貼上樣式
您現在可以從一個選取器複製樣式並貼入另一個選取器中。 您可以複製所有樣式，也可以僅複製特定樣式類別，如「版面」、「文字」和「邊框」。
以滑鼠右鍵按一下選擇器，並從可用選項中選擇：
- 如果選取器沒有樣式，會停用「複製樣式」和「複製全部樣式」。
- 無法進行編輯的遠端網站會停用「貼上樣式」， 但是提供複製和全部複製
樣式。 - 選取器上已有的部分「貼上樣式」(重疊) 則可正常運作。 會貼上所有選擇器的聯
集。 - 複製貼上樣式也適用於不同的 CSS 檔案連結 – 匯入、連結、內嵌
樣式。
重新排列選擇器
按一下必要的選擇器，並將其拖曳至「選擇器」窗格中的新位置。
設定 CSS 屬性
屬性會區分為下列類別，並由「屬性」窗格頂端的不同圖示代表：
- 版面
- 文字
- 邊框
- 背景
- 更多（「僅文字」屬性的清單，而非具有視覺控制項的屬性）
備註
編輯 CSS 選取器的屬性之前，使用反向檢查識別與 CSS 選取器相關聯的元素。 執行這項作業，您可以評估是否在反向檢查期間反白標示的所有元素確實都需要變更。
選取「顯示集合」核取方塊即可只檢視設定屬性。 若要檢視您針對選取器所指定的所有屬性，請取消選取「顯示集合」核取方塊。
若要設定屬性，例如 width 或 border-collapse，請在「屬性」窗格中按一下顯示在屬性旁的必要選項。
遭到覆寫的屬性會以刪除線格式表示。
設定邊界、間距和位置
您可以使用 CSS 設計工具「屬性」面板中的方塊控制項，快速地設定邊界、間距和位置屬性。 如果您偏好程式碼，您可以在快速編輯框中指定邊界和留白的簡寫程式碼，如此範例所示。
按一下這些值，然後輸入必要的值。 如果您希望所有四個值都相同並同時變更，請按一下中央的連結圖示。
您隨時可以停用或刪除特定值，例如，左邊界值，同時保留右邊界、上邊界和下邊界值。
設定邊框屬性
「邊框控制項」屬性會整理到邏輯標籤中，協助您快速檢視或修改屬性。
如果您偏好程式碼，您可以在快速編輯文字框中指定邊框和邊框半徑的簡寫程式碼。
若要指定邊框控制項屬性，請先在「四邊」索引標籤設定內容。 然後會啟用其他索引標籤，而在「所有邊」索引標籤中設定的屬性會反映至個別邊框。
當您在個體邊框標籤中變更屬性時，「所有邊」標籤中對應屬性的值會變更為「undefined」(預設值)。
在下方範例中，邊框色彩設定為黑色，然後將上邊框改為紅色。
插入的程式碼是根據簡寫或完整寫法的偏好設定。
檢查期間，索引標籤會以「設定」索引標籤的優先順序為主。 最高優先順序為後面接著「上方」、「右方」、「下方」和「左方」的「四邊」。 例如，如果只設定邊框的上方值，運算模式會將焦點移至「上方」標籤，忽略「所有邊」標籤，因為未設定「所有邊」標籤。
停用或刪除屬性
「停用/啟用 CSS 屬性」功能讓您可從 CSS 設計工具面板為部分 CSS 加上註解，而不需要直接在程式碼中進行變更。 當您為部分 CSS 加上註解時，就可以看見特定屬性和值對頁面造成的影響。
當您停用 CSS 屬性時，Dreamweaver 會將 CSS 註解標籤和 [disabled] 標籤加入至您已停用的 CSS 屬性。 然後您就可以根據偏好，輕鬆地重新啟用或刪除停用的 CSS 屬性。
您可以使用 CSS Designer 停用或刪除每個屬性。
下列擷取畫面顯示 height 屬性的停用和刪除圖示。 將滑鼠游標放在屬性上即可看到這些圖示。
您也可以使用「邊框控制項」群組層級的刪除和停用控制項，將這些動作套用至所有屬性。
鍵盤快速鍵
您可以使用鍵盤快速鍵，新增或刪除 CSS 選取器和屬性。 您也可以在「屬性」窗格中的屬性群組之間導覽。
|
快速鍵 |
工作流程 |
|
CTRL+Alt+[Shift =] |
新增選取器 (若控制項位於「選取器」區段之中) |
|
Ctrl+Alt+S |
新增選取器 (若控制項位於應用程式中的任何位置) |
|
CTRL+Alt+[Shift =] |
新增屬性 (若控制項位於「屬性」區段之中) |
|
CTRL+Alt+P |
新增屬性 (若控制項位於應用程式中的任何位置) |
|
選取+Delete |
刪除選取器 (若已選取了選取器) |
|
CTRL+Alt+(PgUp/PgDn) |
位於屬性子面板時，在區段之間跳動 |
識別與 CSS 選取器相關聯的頁面元素
通常是單一 CSS 選取器與多個頁面元素相關聯。 例如，頁面主要內容中的文字、頁首和頁尾文字全部都能與相同的 CSS 選取器相關聯。 當您編輯 CSS 選取器的屬性時，所有與選取器相關聯的元素都會受影響，包括您並不想變更的元素在內。
即時反白標示有助您識別與 CSS 選取器相關聯的所有元素。 若只要變更一個元素或要變更一些元素，您可以為這些元素建立新的 CSS 選取器，然後編輯屬性。
若要識別與 CSS 選取器相關聯的頁面元素，請將滑鼠停留在「即時檢視」的選取器上方 (即時程式碼設為「off」)。 Dreamweaver 會以虛線標示相關聯的元素。
若要鎖入元素的反白標示，請按一下選取器。 元素現在會以藍色邊框反白標示。
若要移除元素四周的藍色反白標示，請再次按一下選取器。
即時標示是預設為啟用。 若要停用即時反白標示，請按一下「文件工具列」中的「即時檢視」選項，然後按一下「停用即時反白標示」。
連結至外部 CSS 樣式表
當您編輯外部 CSS 樣式表時，所有連結到這個 CSS 樣式表的文件都會更新，以反映這些編輯。
您可以轉存文件中的 CSS 樣式，建立新的 CSS 樣式表，並且附加或連結到外部樣式表以套用樣式。
您可以將任何您所建立的樣式表附加到頁面中，或是複製到網站中。
請執行下列其中一項作業，開啟 CSS 設計工具：
- 選取「視窗 > CSS 設計工具」。
- 按一下 Shift + F11。
在 CSS 設計工具中，按一下「來源」旁邊的 + 圖示，然後選取「附加現有的 CSS 檔案」。
請執行下列其中一項作業：
- 按一下「瀏覽」以導覽至外部 CSS 樣式表。
- 在「檔案/URL」框中輸入樣式表路徑。
按一下「預覽」按鈕，以確定樣式表有將您希望的樣式套用至目前的頁面。
如果套用的樣式並非如您的預期，請按一下「取消」以移除樣式表。 此頁面便會回復成之前的外觀。
按一下「確定」。
