类别

在整个课程中，您将发现：

1. 如何形成和实施类别
2. 如何调整类别
3. 如何删除 category
4. 如何复制 category
5. 如何打造组合类别
6. 如何建立全球category

如何打造和应用类别

在您开始设计元素时，category 会自发生成并应用于所选元素。对此元素所做的所有样式修改均会保留在此 category 中。

要启动 category：

1. 在画布上选择一个元素
2. 输入 指示符字段 并定义您的 category

就这样 — 您已经制定了 category！

您还可以在集成样式之前手动启动 category，方法是在 指示符字段.

有 3 种方法可以到达 指示符字段:

1. 访问样式面板中的指示器字段
2. 使用 命令 + 进入 （在 Mac 上）或 控制 + 进入 （在 Windows 上）键盘快捷键
3. 右键单击元素并在上下文菜单中选择插入 category

‍

要将相同的 category 实现到所需数量的元素： 

1. 选择画布上的元素
2. 在 指示符字段
3. 打 进入

当你开始在 指示器，您可以观察到 category 名称出现在 指示器 下拉列表中。您可以通过选择名称或使用键盘箭头导航到它并按 进入.

如何修改类别

在建立 category 并将其实施到各个元素之后，您可以更改该 category。

要修改 category：

1. 选择任何具有 category 的元素 
2. 调整你的造型

任何样式的修改都会影响整个网站上使用 category 的所有情况。

category 根据元素类型提供了一个唯一的名称，但您可以自由地重命名它。

重命名 category 有 4 种方法：

1. 双击 category 名称 指示器，重命名，然后按 进入
2. 按 Command + Shift + Enter， 重命名 category，然后按 进入
3. 右键单击元素，选择 重命名 category，重命名课程，然后按 进入
4. 将鼠标悬停在 category 名称上 指示器，点击出现的下拉菜单，选择 重命名 category，重命名 category，按 进入

新名称将显示在 设计经理 和 指示器 在里面 样式面板.

您还可以在 设计经理.

CSS 命名的最佳做法：

1. 类别名称不区分大小写（“alert”相当于“ALERT”）
2. 类别名称必须以字母开头
3. 类别名称应采用字母数字格式（az 和 0-9）和连字符，并且应避免使用特殊字符

专家提示：命名类别时，建议使用连字符作为逻辑分组分隔符（选项卡菜单），并根据类别的操作（而不是其样式）为其提供特定名称。好：表单按钮。不好：蓝色按钮。

category 名称中的独特字符

唯一字符是指与字母或数字字符不同的字符。标点符号和其他符号都是唯一字符的实例。

虽然你可以在 category 名称中包含大多数独特字符（例如， 您的 category 名称 +)，但这并不被认可，因为 Webflow 会自动将独特字符更改为连字符。 

例如，名为 category 您的 category 名称 + 处理方式与标记为 category 的完全相同 你的 category 名字 $ 因为 + 和 $ 唯一字符将转换为连字符：（例如， 您的 category 名称 –). 

在上述场景中，对利用独特字符的两个不同类别进行的任何样式更改随后都将应用于两者。

如何擦除 category

如果您希望将不同的 category 应用于已经具有 category 的元素，则可以通过两种方式消除现有的 category：

1. 输入 指示符字段 并按 删除 在你的键盘上
2. 将鼠标悬停在 category 上，点击向下箭头，然后选择 删除 category

复制类的方法

您可以选择复制和调整课程，而无需修改原始课程。 

要创建现有类的副本：

1. 将鼠标指针悬停在课程上
2. 选择向下箭头
3. 选择 重复类
4. 给班级起一个新名字并点击 进入

重要的： 重复的类构成一个独立于原始类的新类——修改不再延续到重复的类。

建立组合类的技术

在将类应用于元素并添加样式后，您可能希望对此类的特定实例实施细微的样式调整，但不影响具有相同类的其他元素。Webflow 有助于创建我们称为组合类的内容，让您可以引入样式覆盖来制作独特的变体，而无需创建新的类并复制相同的样式。

您可以通过在 选择器字段 与基类相邻。 

您可以访问 选择器 有 3 种不同的方式：

1. 选择 选择器字段，位于现有班级旁边
2. 紧迫 命令 + 进入 （在 Mac 上）或 控制 + 进入 （在 Windows 上）
3. 右键单击元素并选择 添加类 在上下文菜单中

初始基类之后的任何类均被识别为组合类。由于组合类仅添加到所选元素，因此应用于此元素的任何样式修改都不会影响基类的其他出现。

应用组合类的技巧

如果您希望另一个元素具有相同的基类和组合类，您可以连续应用这些类 - 首先应用基类，然后应用组合类。

键盘快捷键： 在选择器字段中输入类名时，输入逗号将包含该类，并使您能够快速输入后续组合类，而无需重新关注选择器字段。

覆盖样式的方法

生成组合类后，您可以引入新样式或覆盖从基类继承的样式。修改只会影响组合类。

在样式面板中，继承的样式以橙色表示，而被覆盖或新的样式将以蓝色突出显示。

修改基类的方法

在使用组合类设置元素样式时，所有样式调整仅影响组合类，因为组合类用作更具体的选择。当您希望设置主要基类的样式时，可以通过位于选择器上方的继承菜单访问它：

1. 单击上方的继承选择器指示器 选择器字段
2. 选择基类
3. 实施样式更改
4. 打 后退 以上 选择器 恢复组合类的样式

对基类所做的所有更改都将反映在应用该基类的所有元素中，包括具有组合类的选定元素。

打 后退 选择器上方切换回组合类的样式

如果您已经在组合类上设置了相同的属性样式，则对基类的某些样式更改可能不会在组合类上显示。这是因为该值将被组合类覆盖。这些样式以红色删除线表示。

组合类与复制类相比，是一种更有条理的方法。组合类继承了类的核心属性，可用作变体，同时保留基础类的样式。但是，由于管理分层继承的复杂性，建议不要创建多个组合类。

当想要进行更深入的修改时，复制原始类被证明是一种更有效的方法。这将创建一个具有原始样式所有特征的独特新类，从而更容易进行调整。

制作通用类

全局类提供了一种通用的样式，可以应用于您网站中的各种元素。这些类适用于各种样式，并被分配给基类。但是，使用全局类设置样式的元素与基类元素保持分离。例如，设计一种普遍应用的阴影样式是一种实现统一性的战略方法。

为了有效地实现全局类元素，请考虑创建一个专用页面（例如样式指南页面）来容纳所有全局类元素。在这里，您可以：

1. 插入部分块
2. 为其分配一个唯一的类名（例如，Supreme glow）
3. 自定义部分块 具有所需属性（例如，用于整个站点使用的重复阴影属性）

瞧！您已成功建立了可与其他样式结合使用的全局类。

记住：全局类的名称决定了它在全局相应类中的应用。

通过将全局类分层到其他类上，您可以将其样式属性无缝集成到不同的类结构中。

最佳参考：

• 课程要点 – 在 Webflow 上采用模块化设计
• 有益的“助手”课程，助力 Webflow 项目升级

• 关于
• 最新帖子

麦宜云

Webflow 专家 在 Tenten

Webflow 专家和前端开发人员，拥有 4 年以上经验。我拥有多种技能（HTML、CSS、JS、Figma、Adobe），可打造出色的 Webflow 体验。70 多个项目磨练了我无缝融合自定义代码和视觉开发的能力。我做事有条理、按时完成任务、热衷于成长，在动态环境中表现出色。让我们突破界限，创造非凡。

Ewan Mak 的最新帖子 (查看全部)

• 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
• 定心盒摘要 - 2024 年 4 月 15 日
• 存储网站以供将来参考 - 2024 年 4 月 15 日

相关文章

• 快速复制

  在 Webflow Designer 中快速复制并精确放置元素。

• 找到并消除样式

  设计师的造型主管全面地了解所有的设计……

• 使用 flexbox 对齐元素

  使用 flexbox 将元素完美地对齐到其父元素的中心。