Studio 編輯器：關於 CSS 編輯
2 分鐘
新增自訂 CSS 程式碼來設定元件及其個別部分的樣式。為客戶建置網站時，CSS 可擴充工具箱，因為您可以套用編輯器中未提供的設計選項和行為變更。
提示：
前往 Wix Studio 學院觀看網路研討會，了解如何使用 CSS 強化設計。若要了解更多 CSS 樣式設定資訊，請參閱 MDN CSS 參考文件。
掌握更多設計控制權
為元件新增 CSS 可開啟全新的樣式可能性。這讓您能根據喜好變更元件設計，對於編輯器中尚未提供的選項特別有用。
CSS 也讓您能隨心所欲地為元件製作動畫。您可根據自訂屬性建立專屬動畫，並視需求為單一元件套用多個動畫。
CSS 的另一個重要用途是實現極致的回應式設計。例如，使用媒體查詢（根據視窗大小或裝置功能）來確保元件在所有畫面中都能呈現理想外觀。
請注意：
檢查支援的元件清單，確認是否可使用 CSS 自訂元件。
變更元件的特定部分
在 Wix Studio 編輯器中，元件被劃分為語義類別，方便您自訂所需的特定部分。例如，按鈕具有 3 個 CSS 類別：
- .button: 整個按鈕元件。
- .button__label: 按鈕上的文字。
- .button__icon: 按鈕上的圖示。
從清單中選擇類別後，系統會自動將其新增至程式碼中，以便您開始操作。
有哪些類別可供使用？
查看完整清單以了解元件及其類別。
建立自訂 CSS 類別
您也可以在 global.css 頁面新增自訂 CSS 類別。這讓您能將樣式和格式套用於指定自訂類別的元件，而非套用於特定元件的所有執行個體。深入了解自訂類別
所有 CSS 編輯內容皆整合於單一全域頁面
編輯器中的程式碼面板包含一個全域 CSS 頁面，供您進行所有編輯。此頁面上的程式碼會全域套用於所有網站頁面中具有相關類別的任何元件。
在此頁面新增的 CSS 程式碼將會覆寫在編輯器其他面板中進行的選擇。例如，若使用 CSS 變更所有按鈕的背景，系統將會覆寫在 檢驗器面板 中設定的背景。
如何立即開始
- 在程式碼面板中存取 CSS 區段：
- 點擊編輯器左側的「程式碼」圖示
Code。 - （若為首次在此網站操作）點擊「Start Coding」。
- 點擊「Page Code」。
- 點擊 CSS 下方的 global.css。
- 點擊編輯器左側的「程式碼」圖示
- 開始設定元件樣式：
- 在畫布上選擇相關元件。
請留意：請確保 CSS 面板仍處於開啟狀態。 - （在 CSS 面板中）選擇 CSS Classes 下的相關類：
- 系統類：在 Global classes 下選擇一個類。
- 自訂類：在 Custom classes 下輸入名稱。
- 新增 CSS 程式碼。
- 在畫布上選擇相關元件。
