使用样式管理器重命名、清理和搜索类和标记。
样式管理器显示了我们在当前项目中创建或使用的类或标记的全面列表。这是对这些样式的一个很好的概述,它是重命名甚至清理我们不使用的任何东西的快速方法。
记住这一点,我们将介绍使用样式管理器的解剖、重命名和清理。
让我们从解剖学开始。在项目的任何地方,我们都可以点击右上角的样式管理器。我们样式化的标签将出现在顶部。我们让我们的类和组合类出现在它们左边有一个加号。这是确定类继承(基类和组合类之间的关系)的一种快速方法。
让我们在这里选择一个标题-目前没有应用类。让我们点击创建一个新的,并给它一个名字。按回车。回到样式管理器,如果我们一直滚动到底部,我们可以看到我们刚刚创建的新类。
类按创建的顺序列出。
现在让我们继续重命名。
我们将选择扳手图标并重命名我们刚刚创建的类。如果我们这样做,回到样式面板?我们可以看到类名已经更新。双击这里,重新命名,如果我们回到样式管理器的最下面,名字也在那里更新了。
最后,让我们掩盖干净。对许多人来说,这可能会引发欣快感。因为它为您做了工作,并自动清理我们没有使用的类。
让我们从标题中删除类开始。现在我们的项目不再使用它了。
回到样式管理器,如果我们向下滚动,它仍然在底部。这是因为类不会从我们的项目中删除,以防我们想在其他地方使用它们。但在右上方,我们可以看到“清理”。然后按下Clean Up,我们会得到一个确认,显示所有未使用的样式(任何当前与页面元素没有关联的样式)。让我们按下删除。我们可以自由地继续造型。
因此,样式管理器对于我们项目中的标签和类来说是一个很好的参考。我们可以得到一个快速的概述,重命名,或在任何时候清理不使用的样式。
样式管理器显示您在站点中创建或编辑的类、组合类和标记的完整列表。在这里,您可以重命名类,预览类和标记样式,搜索类和标记,并删除不使用的任何类。
在这节课中,你将学到:
位于右面板的样式管理器,可以通过单击样式管理器图标或按来访问G在你的键盘。
当您创建一个新类或样式标记时,它将按照创建的顺序出现在样式管理器中。在这里,您可以重命名类、预览类或标记的样式、搜索样式管理器或清理任何未使用的类。
您样式化的所有标签在样式管理器的顶部以粉红色显示。了解更多关于标签的信息.
所有类都以蓝色显示在标签下面,按创建的顺序显示。了解更多关于课程的信息.
所有组合类都显示为蓝色,嵌套在每个类的下面,左侧有一个“加号”图标。了解更多关于组合类的信息.
所有嵌套标记都显示为粉红色,嵌套在每个类下面,左侧有一个“箭头”图标。了解关于嵌套标记的更多信息.
点击类或标签右侧的“列表”图标,可查看受该类或标签影响的元素和符号列表,按以下顺序排列:
单击列表中的元素以选择当前页面上的元素。单击页面名称可跳转到该页面并显示该页上受影响元素的列表。
重命名一个类或一个组合类:
如果一个类没有应用到站点中的某个元素,则会出现一个“垃圾”图标。点击“垃圾”图标立即删除未使用的类。
查看并删除与任何页面元素不关联的任何类。
一旦您开始样式化一个元素,Webflow会自动创建一个类来保存应用到该元素的所有样式。您可以重命名这个类,这样就可以轻松地重用它,并将相同的类应用于其他元素。
在样式管理器中重命名一个类或一个组合类:
您也可以直接在Style面板中重命名类。了解更多关于课程的信息.
如果您在站点中使用了很多类,那么您可以通过类或标记名称以及应用于它们的属性和值来搜索Style Manager。
让我们来看看每一个例子:
搜索样式管理器:
在选择将类或标记应用到站点中的元素之前,可以使用样式管理器预览类或标记的样式。您还可以使用此预览来确定要删除或保留哪些未使用的类。
预览样式:
如果你从一个元素中删除一个类(通过从样式面板中的选择器字段中删除它),这将不会从样式管理器或你的网站中删除该类。这是因为可以在任何时候重用类来设置其他元素的样式。
只有当类没有连接到任何元素时,才能完全从样式管理器和站点中删除类。
让我们来看看你该怎么做:
如果某个类在站点的任何地方都没有使用,则可以从站点中删除该类。样式管理器中未使用的类不会在名称旁边显示“列表”图标。
删除一个单独的未使用的类。
您可以从站点中删除不使用的类,以减少站点代码的权重,并提高站点的性能。
删除所有不使用的类。