樣式面板概述

樣式面板位於設計器工具內，提供了多種樣式控件，使您能夠個性化網站上的每個元件。您可以使用「樣式」面板中提供的全套控制項靈活地修改元素的佈局、背景顏色或版面。

除了單一元素樣式之外，您還可以選擇將樣式另存為類，從而使您可以將一致的樣式集套用到整個網站的元素。此外，您可以透過利用斷點（也稱為媒體查詢）在「樣式」面板中針對不同裝置尺寸自訂佈局。

本指南將幫助您熟悉「樣式」面板的各個組件：

1. 課程
2. 選擇器字段
3. 國家菜單
4. 風格部分
5. 繼承和應用程式樣式指示器

課程

雖然可以使用「樣式」面板單獨設定網站上每個元素的樣式，但手動調整元素可能既費力又耗時。這就是課程派上用場的地方。

類別儲存可套用於整個網站的眾多元素的樣式資訊。一旦您開始在「樣式」面板中設定元素的樣式，就會自動產生一個類別並將其指派給所選元素。此外，您可以選擇手動建立和重新命名您的類別。

您甚至可以建立從原始類別繼承樣式值的組合類別以及您在該組合類別上實現的任何其他樣式。了解有關課程和組合課程的更多資訊。

選擇器字段

元素類型位於「樣式」面板的頂部，指示目前正在設定樣式的元素（例如圖片、div 區塊、表單等）。元素類型下面是 選擇器字段，顯示應用於該元素的所有標籤、類別和組合類別。重新命名現有類別以及建立新類別或組合類別可以直接在此欄位中完成。

在選擇器欄位中建立和重新命名類

啟動元素的樣式後，會根據元素類型自動為其指派一個類別名稱（例如，當將樣式套用於段落元素而不手動建立類別時，會自動為其指派一個名為「Paragraph」的類別）。透過雙擊類別名 選擇器字段，您可以重新命名該類別或建立一個新類別。

若要引入一個新類，請在輸入框中輸入所需的類名 選擇器字段.

刪除班級

您可以選擇從元素中刪除類 選擇器字段。需要注意的是，雖然此類可以在任何時候重用來設定其他元素的樣式，但它不會從 風格選擇器面板 或您的網站。從您的網站上完全刪除課程只能在 風格選擇器面板 當它們不再與任何元素關聯時。

國家菜單

改變特定元素的外觀和行為 狀態， 例如 徘徊 或者 專注的，您可以從以下位置選擇一個狀態 選擇器字段 > 狀態 下拉式選單.有關樣式狀態的更多見解可以在此處找到。

繼承選單

這 遺產 菜單位於略高於 選擇器字段。單擊它會顯示所選元素的父元素和祖先元素，一直返回到全域標記（例如， 正文（所有頁面）標籤）。從「繼承」功能表中，您也可以選擇和更新任何類別的樣式。

繼承選單也提供組合類別的基底類別。選擇某個狀態後，選單會指示套用樣式的狀態。更深入研究繼承和應用樣式指示器。

受影響的元素

這 受影響的元素 指示器顯示在選擇器欄位的正下方，指示選擇器欄位中的類別或標籤在目前頁面和整個網站上使用的次數。透過點擊文本，您可以切換共享該類別或標籤的所有元素周圍的輪廓。

風格部分

「樣式」面板中的每個部分都管理一組不同的 CSS 屬性（即樣式）。您可以在以下部分中自由調整不同的樣式並在畫布上預覽您的修改：

• 佈局
• 間距
• 尺寸
• 位置
• 版式
• 背景
• 邊框
• 效果
• 自訂屬性

您可以單獨或同時展開、折疊或切換各個部分 對焦模式. 

要激活聚焦模式： 

1. 點擊“三個點” 圖示位於頂部 風格面板
2. 檢查 對焦模式 選項
3. 在中選擇一個部分 風格面板 擴展它（例如，間距、背景等）

若要停用焦點模式： 

1. 點擊“三個點” 圖示位於頂部 風格面板
2. 取消選取 對焦模式 選項

專家提示： 使用 替代/選項 + S 在鍵盤上展開或折疊全部 風格面板 屬性部分。按 替代/選項 + 轉移 + S 切換 對焦模式 開啟和關閉。 

請記住，選擇或取消選擇焦點模式將在整個會話過程中保持不變。例如，如果您啟用焦點模式並刷新設計工具或在另一個瀏覽器或標籤中存取它，焦點模式將持續存在。但是，焦點模式設定不會轉移到不同的網站。如果您在一個站點上啟動焦點模式並在設計器工具中切換到另一個站點，則焦點模式將在新站點上停用。

佈局

將元素新增至畫布後，其預設顯示選項會影響其外觀。這 佈局 部分提供預設顯示選項，例如 堵塞, 柔性, 網格， 或者 沒有任何。透過點擊“箭”圖標，您可以訪問 顯示選項 下拉式選單，其中包括諸如 內聯塊, 內聯柔性, 內部網路格， 和 排隊。在本節中了解有關顯示設定的更多資訊。

間距

間距可讓您定義元素的間距，它是指元素邊界外部或內部的呼吸空間。儘管 邊距 確定元素邊框之外的空間， 填充 定義元素內部、其內容與邊框之間的空間。 

您可以指定 間距 對於元素的頂部、底部、左側和右側 間距 部分。這 間距 值可以單獨應用於一側、兩個互補側或所有四個側。關於間距的更多見解可以在這裡找到。

尺寸

預設情況下，元素要么拉伸到其父元素的寬度，要么適應其中內容的大小。這 尺寸 部分提供了自訂選項 寬度, 高度, 方面比率, 溢出， 和 合身 設定.

筆記： 肯定 尺寸 容器元素的選項可能受到限制。 

探索本節中可用的各種尺寸設定以了解更多詳細資訊。

位置

在裡面 位置 部分，您可以配置元素 位置 （例如，靜態、相對、絕對、固定或黏性），以及 漂浮 和 清除 設定.在本節中深入了解位置、浮動和清除設定。

版式

內 版式 部分，您將找到控制外觀和樣式的設定。

如果您修改任何 版式 在元素上進行設計時，調整將套用於該元素及其後代元素中的所有文字元素。了解有關版式配置和推薦方法的更多資訊。

出場次數

內 出場次數 category，您可以將背景圖像、漸層或顏色合併到任何元素（不包括媒體元素），並且可以修改其 剪裁 財產。此外，您還可以更改 方面, 放置， 和 圖案 顯示任何背景圖像。了解有關後台配置的更多資訊。

邊緣

邊緣建立元素邊界的曲率或在元素週邊的一側或多側建立輪廓。在裡面 邊緣 category，可以設定 曲率範圍, 時尚, 厚度， 和 陰影 對於元素邊緣。進一步探索邊緣配置。

影響

內 影響 部分，您可以為元素分配各種效果。這些包括： 融合, 半透明性, 盒子陰影, 2D 和 3D 轉換, 轉變, 過濾器, 風景濾鏡， 和 游標。此外，您可以將效果套用於特定狀態（例如，懸停、對焦等）。了解更多關於效果的資訊。

自訂屬性

內 自訂屬性 category，您可以注入自訂 CSS 來整合樣式面板其他部分不自然支援的 CSS 屬性和值。熟悉自訂屬性。

遺產和實施的風格標記

在「樣式」面板中折疊 category 時，如果對該 category 內的任何屬性實現了任何本地或繼承的樣式，則該 category 名稱旁邊將出現有色圓點。在「樣式」面板中展開 category 時，著色標籤將在擁有本機或繼承樣式的任何屬性名稱上可見。

這些著色標記表示樣式的起源 - 樣式是在所選元素、目前類別上實現的，還是從核心類別、父元素、全域標記或放大的視窗傳遞的。

您可以合併其他樣式、取代繼承的樣式或消除任何這些樣式。您也可以從下列位置選擇來源來變更繼承的樣式 遺產 落下。

橘色標記

橘色標記表示目前樣式是從所選元素的前一個元素繼承的 - 這表示所選元素的樣式是從標籤、核心類別、更高的斷點或父元素上的文字樣式繼承的。按一下橘色標記可顯示樣式的繼承位置。

您可以取代繼承的樣式（由橘色樣式標記表示），也可以導覽至類別或標籤並在那裡編輯樣式。存取設定目前元素樣式的所有類別和標籤 遺產 落下。

從此下拉清單中，您可以選擇類別或標籤並立即設定其樣式。例如，選擇 H1 標題後，您可以開啟 遺產 下拉式選單並選擇 所有 H1 標題 標籤。

藍色標記

如果樣式標記為藍色，則表示該元素的樣式源自目前類別、標籤或斷點。當您修改繼承的（橘色）樣式時，標記也會切換為藍色。點擊任何藍色標記，然後選擇 重置 恢復和消除當地風格。

粉紅色標記

粉紅色樣式標記表示該樣式已套用至現有斷點上目前選取的元素。例如， 網格子 設定專門套用於選定的元素，並且這些樣式不會保存在類別中。在設定快速堆疊樣式時，也可能會出現粉紅色標記。

當您覆蓋較小斷點上繼承的（橘色）樣式時，標記也會變成粉紅色。按一下任何粉紅色標記標籤，然後選擇 重置 恢復並刪除它。

專業提示： 使用快速鍵組合 選項 + 單擊 （在 Mac 上）或 Alt + 點選 （在 Windows 上）重設樣式。

繼續讓您的設計閃閃發光 風格面板 配置！