類別

使用類別來保存樣式訊息,這些資訊適用於網站中任意數量的元素。

在整個課程中,您將發現:

  1. 如何形成和實施類別
  2. 如何調整類別
  3. 如何刪除 category
  4. 如何複製 category
  5. 如何製作組合類別
  6. 如何建立全球category

如何建立和應用類別

當您開始設計某個元素的樣式時,會自發性地產生 category 並將其套用到所選元素。對此元素所做的所有樣式修改均保留在此 category 中。

要啟動 category:

  1. 在畫布上選擇一個元素
  2. 輸入 指示符字段 並定義您的 category

就是這樣 - 您已經配製了 category!

您也可以在整合樣式之前手動啟動 category,方法是在下列位置鍵入 category 名稱: 指示符字段.

有3種方法可以到達 指示符字段:

  1. 存取樣式面板中的指示符字段
  2. 使用 命令 + 進入 (在 Mac 上)或 控制 + 進入 (在 Windows 上)鍵盤快速鍵
  3. 右鍵單擊該元素並在上下文選單中選擇插入 category
從上下文選單或應用程式快捷鍵快速整合 category。

要對所需數量的元素實施相同的 category: 

  1. 選擇畫布上的元素
  2. 在中鍵入 category 名稱 指示符字段
  3. 進入

當您開始在中輸入 category 名稱時 代號,您可以觀察到 category 名稱出現在 代號 下拉清單。您可以透過選擇名稱或使用鍵盤箭頭導航至該名稱並按 進入.

如何修改類別

建立 category 並將其實施到各種元素後,您可以變更該 category。

要修改 category:

  1. 選擇任何帶有 category 的元素 
  2. 調整你的造型

任何樣式修改都會影響整個網站中使用 category 的所有情況。

根據元素類型為 category 提供了唯一的名稱,但您可以自由地對其進行重新命名。

重新命名 category 有 4 種方法:

  1. 雙擊 category 名稱 代號,重新命名,然後按 進入
  2. Command + Shift + Enter, 重新命名 category,然後按 進入
  3. 右鍵單擊該元素,選擇 重新命名category,重新命名該類,然後按 進入
  4. 將滑鼠懸停在 category 名稱上 代號,點選出現的下拉式選單,選擇 重新命名category,重命名category,按 進入

新名稱將顯示在 設計經理代號 在裡面 風格面板.

您也可以在下列位置重新命名 category: 設計經理.

CSS 命名的最佳實踐:

  1. 類別名稱不區分大小寫(“alert”相當於“ALERT”)
  2. 類別名稱必須以字母開頭
  3. 類別名稱應使用字母數字格式(az 和 0-9)和連字符,並應避免使用特殊字符

專家提示:命名類別時,建議使用連字符作為邏輯分組分隔符號(選項卡選單),並根據類別的操作(而不是樣式)為類別提供特定名稱。好:表單按鈕。壞:藍色按鈕。

category 名稱中的獨特字符

唯一字元是不同於字母或數字字元的字元。標點符號和其他符號充當唯一字元的實例。

雖然您可以在 category 名稱中包含大多數唯一字元(例如, 您的 category 姓名 +),它不被認可,因為 Webflow 會自動將唯一字元更改為連字符。 

例如,名為 category 您的 category 姓名 + 將與 category 標記完全相同 你的 category 名字 $ 因為兩者 +$ 唯一字元將被轉換為連字符:(例如, 您的 category 姓名 –). 

在所引用的場景中,使用獨特字元對兩個單獨類別進行的任何樣式變更隨後都將適用於這兩個類別。

如何擦除 category

如果您希望將不同的 category 套用於已經擁有 category 的元素,則可以透過 2 種方式消除現有的 category:

  1. 輸入 指示符字段 並按 刪除 在你的鍵盤上
  2. 將滑鼠懸停在 category 上,點擊向下箭頭,然後選擇 刪除category

複製類別的方法

您可以選擇複製和調整課程,而無需修改原始課程。 

若要建立現有類別的副本:

  1. 將滑鼠指標懸停在班上
  2. 選擇向下的箭頭
  3. 選擇 重複類
  4. 給班級一個新名字並點擊 進入

重要的: 重複的類別構成了一個獨立於原始類別的新類別——修改不再延續到重複的類別中。

建立組合類別的技術

將類別套用到元素並新增樣式後,您可能會想要在該類別的特定實例上實現較小的樣式調整,同時不會影響具有相同類別的其他元素。 Webflow 不是創建一個新類別並複製相同的樣式,而是促進創建我們所說的組合類,允許您引入樣式覆蓋來創建獨特的變體。

您可以透過在中輸入新的類別名稱來將組合類別附加到元素 選擇器字段 與基底類相鄰。 

您可以訪問 選擇器 以3種不同的方式:

  1. 選擇 選擇器字段,位於現有類別旁邊
  2. 緊迫 命令 + 進入 (在 Mac 上)或 控制 + 進入 (在 Windows 上)
  3. 右鍵單擊該元素並選擇 新增班級 在上下文選單中

 

初始基底類別之後的任何類別都被識別為組合類別。由於組合類別僅新增至所選元素,因此套用於此元素的任何樣式修改都不會影響基底類別的其他出現。

應用組合類別的技術

如果您希望另一個元素擁有相同的基類和組合類,您可以連續套用這些類 - 首先套用基類,然後套用組合類。

鍵盤快速鍵: 在「選擇器」欄位中輸入類別名稱時,鍵入逗號將包含該類,並使您能夠快速輸入後續的組合類,而無需重新關注「選擇器」欄位。

重寫樣式的方法

產生組合類別後,您可以引入新樣式或覆蓋從基底類別繼承的樣式。這些修改只會影響組合類別。

在「樣式」面板中,繼承的樣式以橘色表示,而覆蓋或新的樣式將以藍色突出顯示。

修改基底類別的方法

當使用組合類別設定元素的樣式時,所有樣式調整僅會影響組合類,因為組合類別充當更具體的選擇。當您希望設定主要基底類別的樣式時,可以透過位於選擇器上方的繼承選單存取它:

  1. 點擊上方的繼承選擇器指示器 選擇器字段
  2. 選擇基底類
  3. 實施您的樣式更改
  4. 後退 上面的 選擇器 恢復組合類別的樣式

對基類所做的所有更改都將反映在應用該基類的所有元素上,包括具有組合類的所選元素。

後退 在選擇器上方切換回組合類別的樣式

如果您已經在組合類別上設定了相同屬性的樣式,則對基底類別的某些樣式變更可能在組合類別上不可見。這是因為該值將被組合類別覆蓋。這些樣式以紅色刪除線表示。

像專業人士一樣管理您的造型

組合一個類別來反對複製它提供了一種更有組織的方法。組合類別繼承了類別的核心屬性,在保持基礎樣式的同時充當變體。但是,由於管理分層繼承的複雜性,建議不要建立多個組合類別。

當旨在進行更深層的修改時,複製原始類別被證明是一種更有效的方法。這創建了一個獨特的新類,具有原始樣式的所有特徵,可以更輕鬆地進行調整。

打造通用班級

全域類別提供了一種多功能的樣式,可以套用於您網站上的各種元素。這些類別迎合廣泛的風格並被分配到基底類別。但是,使用全域類別設定樣式的元素仍然與基底類別元素分開。例如,設計一種普遍應用的陰影樣式提供了一種實現一致性的策略方法。

為了有效地實現全域類別元素,請考慮建立一個專用頁面(例如樣式指南頁面)來容納所有全域類別元素。在這裡,您可以:

  1. 插入節塊
  2. 為其指定一個唯一的類別名稱(例如,Supreme gig)
  3. 自訂部分區塊 具有所需的屬性(例如,用於站點範圍使用的重複投影屬性)

瞧!您已經成功建立了一個可與其他樣式結合使用的全域類別。

記住:全域類別的名稱決定了它在全域對應類別中的應用。

透過將全域類別分層到其他類別上,您可以將其樣式屬性無縫整合到不同的類別結構中。

最佳參考:

麥伊凡
Ewan Mak 的最新帖子 (看全部)