回到所有的课程
课程库

样式管理器

使用样式管理器重命名、清理和搜索类和标记。

这个视频的特点是一个旧的UI。更新版本即将发布!
克隆这个项目

样式管理器显示您在站点中创建或编辑的类、组合类和标记的完整列表。在这里,您可以重命名类,预览类和标记样式,搜索类和标记,并删除不使用的任何类。

在这节课中,你将学到:

  1. 如何访问样式管理器
  2. 风格经理的解剖
  3. 如何重命名类
  4. 如何搜索样式管理器
  5. 如何预览样式
  6. 如何从网站删除未使用的类

如何访问样式管理器

位于右面板的样式管理器,可以通过单击样式管理器图标或按来访问G在你的键盘。

样式管理器显示在Webflow设计器的右面板中。

风格经理的解剖

当您创建一个新类或样式标记时,它将按照创建的顺序出现在样式管理器中。在这里,您可以重命名类、预览类或标记的样式、搜索样式管理器或清理任何未使用的类。

标签

您样式化的所有标签在样式管理器的顶部以粉红色显示。了解更多关于标签的信息

样式化标记显示在样式管理器中。

所有类都以蓝色显示在标签下面,按创建的顺序显示。了解更多关于课程的信息

样式化类显示在样式管理器中。
组合类

所有组合类都显示为蓝色,嵌套在每个类的下面,左侧有一个“加号”图标。了解更多关于组合类的信息

样式管理器中突出显示样式组合类。
嵌套标签

所有嵌套标记都显示为粉红色,嵌套在每个类下面,左侧有一个“箭头”图标。了解关于嵌套标记的更多信息

样式管理器中突出显示样式嵌套标记。
影响项目列表

点击类或标签右侧的“列表”图标,可查看受该类或标签影响的元素和符号列表,按以下顺序排列:

  • 当前页上受影响的元素
  • 在其他页面上受影响的元素
  • 受影响的符号(例如,该符号包含使用该类或标记的元素)

单击列表中的元素以选择当前页面上的元素。单击页面名称可跳转到该页面并显示该页上受影响元素的列表。

样式管理器中显示了使用“导航”类的受影响元素和符号的列表。
编辑扳手

重命名一个类或一个组合类:

  1. 点击“扳手”图标
  2. 重命名职业或组合职业
  3. 点击“选择目录图标(或按输入)以保存新名称
  4. 点击“x图标以丢弃更改

如果一个类没有应用到站点中的某个元素,则会出现一个“垃圾”图标。点击“垃圾”图标立即删除未使用的类。

样式管理器中类右侧的扳手图标突出显示。
在未使用的类旁边突出显示一个垃圾图标。
清理

查看并删除与任何页面元素不关联的任何类。

  1. 点击清理在样式管理器的右上角
  2. 点击删除确认类删除
  3. 点击取消停止类清理
将显示在选择清除类时删除的未使用类的列表。

如何重命名类

一旦您开始样式化一个元素,Webflow会自动创建一个类来保存应用到该元素的所有样式。您可以重命名这个类,这样就可以轻松地重用它,并将相同的类应用于其他元素。

在样式管理器中重命名一个类或一个组合类:

  1. 点击“扳手类名旁边的图标
  2. 重命名
  3. 新闻输入保存更改

您也可以直接在Style面板中重命名类。了解更多关于课程的信息

如何搜索样式管理器

如果您在站点中使用了很多类,那么您可以通过类或标记名称以及应用于它们的属性和值来搜索Style Manager。

让我们来看看每一个例子:

  • 类或标记名可以包括:按钮,链接,节等。
  • 属性可以包括显示、背景色、字体族等。
  • 可以包括44 px,红色,# FFFFFF
注意:搜索结果只显示类和标记,但结果确实包括来自类和标记名的匹配,以及类和标记的属性和值。

搜索样式管理器:

  1. 打开样式管理器
  2. 输入你的搜索词在搜索栏中(例如,“链接”或“44px”等)
  3. 按下“x”图标清除网站中所有类和标签的搜索栏和简历可见性
在Style Manager的搜索栏中,会高亮显示“link”这个词。
注意:搜索结果只包括应用于站点主断点上的元素的样式。

如何预览样式

在选择将类或标记应用到站点中的元素之前,可以使用样式管理器预览类或标记的样式。您还可以使用此预览来确定要删除或保留哪些未使用的类。

预览样式:

  1. 打开样式管理器
  2. 徘徊在您想要预览其样式的类名或标记名上
鼠标箭头悬停在样式管理器中的一个类上,该类的样式将显示在预览模式中。
注意:CSS预览只显示应用于站点主断点元素的样式。

如何从网站删除未使用的类

如果你从一个元素中删除一个类(通过从样式面板中的选择器字段中删除它),这将不会从样式管理器或你的网站中删除该类。这是因为可以在任何时候重用类来设置其他元素的样式。

只有当类没有连接到任何元素时,才能完全从样式管理器和站点中删除类。

让我们来看看你该怎么做:

在样式管理器中删除单个类

如果某个类在站点的任何地方都没有使用,则可以从站点中删除该类。样式管理器中未使用的类不会在名称旁边显示“列表”图标。

没有列表图标的未使用类在样式管理器中突出显示。

删除一个单独的未使用的类。

  1. 打开样式管理器
  2. 点击“扳手图标在类旁边
  3. 点击“垃圾图标,立即从整个站点删除未使用的类
在未使用的类旁边突出显示一个垃圾图标。

在样式管理器中删除所有不使用的类

您可以从站点中删除不使用的类,以减少站点代码的权重,并提高站点的性能。

删除所有不使用的类。

  1. 打开样式管理器
  2. 点击清理在样式管理器的右上角
  3. 点击删除确认类删除
将显示在选择清除类时将删除的未使用类的列表,并突出显示清除和删除按钮。


尝试Webflow——它是免费的
Baidu
map