很有可能,如果你在网络上看到一个现代布局,它是使用类设计的。因为在早期的互联网时代,开发人员必须手动在HTML中设置样式。当你写出53个段落的风格恰到好处的时候?你会想改变一下发型的。然后再改52次。
但W3联盟表示“不能再这样了”。CSS诞生了。(级联样式表。这是自转盘电话以来最伟大的发明。)它是这样工作的:我们使用一个类来设置样式ONCE,然后我们将那个类应用到我们想要的一切。结果呢?当然,我们在样式上有一致性,但更重要的是:连续性。这是……如果我们改变一下课程……该类中的每个OTHER元素…也获取更新。
在过去的30年里,CSS已经发展到包括SO更多的内容——它现在已经成为与心灵遥感或x光视觉同等的超级力量,但没有后者带来的道德和伦理问题。
我们将在这里开始创建和应用类,我们将讨论编辑类(即改变样式),我们将做删除和复制类,然后我们将结束覆盖两个实际的超能力在网络上:组合类…和全球类。
所以。创建一个类?选择一件事…点击选择器…命名你的类。当你点击返回时?您已经创建了一个类。
为什么这很重要?它不是。因为我们还没有用它做任何事情。这就是为什么演示这一点很重要:如果我们改变一些非常基本的东西(让我们改变背景颜色,使它更暗一点)。当我们在刚刚创建的类上完成这些时?标签变成了蓝色。这意味着在THIS类上,这个背景颜色属性已经设置好了。
来看看这个。让我们抓取另一个按钮(默认情况下,元素不带有应用的类)。而不是点击NAME一个类?让我们开始输入我们之前做的那个。什么时候选择?深色的背景颜色。
这就是类的工作原理:您可以在不同的元素上使用它们,当您添加或更改样式属性时,使用该类的每个元素都会受到影响。
这就是创建和应用类。编辑类呢?好了,让我们进一步(让我们应用同样的类到这里的其他按钮)-即使我们复制和粘贴我们的按钮(只是复制一份)?类与该元素一起出现(它仍然应用了该类)。要编辑这个类,我们需要回到ORIGINAL按钮吗?不。因为就像我们之前做的那样,我们可以选择任何应用了Main button类的元素,然后编辑样式。(再次,与类的关键是:你不是在ELEMENT上编辑样式;你编辑的类,应用到所有这些元素。)
如果我们想重命名(我们说的是重命名一个类)?我们可以点击进入,重命名,点击返回。
这是编辑类。接下来,让我们删除一个类。这是一个段落。让我们选择它,当然,应用Main按钮类。糟透了。所以。点击类名旁边的下拉菜单?删除。类移除。
让我们再来一次。选择Section,走过去,应用Main按钮类。一次。糟透了。但是这一次,让我们点击类标签的右边。闪烁的光标(我们马上就会讲到)。删除(或者退格键,取决于你的键盘)。类移除。
斯坦福大学。以管理员身份登录,秋季学期,删除和确认?
删除的类。复制呢?这是一个两部分,因为大多数时候,复制可以更好地服务于其他东西。但是让我们假设我们在这里有一个div块(一个盒子,里面包含一些其他的东西…这是一种CARD设计)。如果我们打开Navigator,我们会看到有一个图像、一个标题和一个段落。或者,如果我们想冒险,我们可以在画布上看……并看到相同的…准确的…事情
这里的关键是div块是使用一个类的样式(我们的卡片是样式)。这个类叫做Basic card。这三种情况都适用。这第三个吗?(右边的那张?)如果我们改变它的任何样式,它也会影响其他两个(我们知道
这就是课程的工作原理。)
但如果我们想让第三个不一样呢?同样,这是一种方法。第三张牌被选中后,我们使用下拉箭头,复制。我们将其命名为"其他卡片设计"(当然,你可以给你的名字取任何有意义的名字。)但当我们点击返回时,我们就创建了这个NEW类它把所有东西从原来的那个带过来。从远处看,它们是一样的,这当然是因为它们在风格上是一样的。但是我们可以更改ANY属性(并在其他地方重用这个NEW类)。
但令人难过的是:因为它是完全复制的,所以无论如何它都不是……与原始类关联。(有时这正是我们想要的;这就是为什么我们要讨论类复制。)
但其他时候我们想要不同的东西。输入:301重定向。不过,不,那是另一课。输入:组合类。就像复制一个类,但实际上根本不是。
这是因为combo类仍然引用原始类(基类)。这个页面上的所有按钮都使用同一个类(" Main button ")。但这里有一个例子,当它不那么好工作:这部分……颜色更暗,这样按钮和背景之间的对比度就不会太大。那么我们该怎么办呢?我们让课堂保持原样。我们保留那个BASE类(我们已经添加的类)…我们保持它。
我们能做的…单击类标签的右边,并键入以创建一个COMBO类(“打火机”)。按return键?神奇之处在于:这个COMBO类是建立在基类之上的。我们可以通过点击琥珀色标签来证明这一点(标签上的琥珀色意味着它从其他地方抓取样式)-它显示的颜色是从Main按钮类引入的。如果我们改变它呢?好吧,因为它是一个COMBO类(因为它比我们原来的基类更具体),这个更改没有影响我们的Main按钮类(那些保持不变)。我们也可以改变字体的颜色。(我们只对有主按钮和打火机应用的按钮进行了更改。)
但这与复制不同:如果我们回到基类并改变填充?(真的,如果我们样式几乎任何基类?)combo类也会受到影响。这是因为所有的组合类所做的是OVERRIDE(它添加了更多特定的样式,但它构建在我们的基类上)。因此,当我们对新的组合类进行样式化时,查看指示器是有帮助的。(风格从何而来?)如果我们想重写一个样式呢?我们做出了改变。
现在。组合类的工作就像类,你可以采取一个全新的元素(这里是一个空白的按钮,我们只是拖进来),我们可以添加我们的组合类添加基类?点击return,然后再次点击添加我们的combo类。再点击返回吗?现在我们已经应用了combo类。
现在。这是很多。如果你已经非常熟悉HTML和CSS,那很好——这会加快速度。但如果这一切对你来说都是新鲜的(如果你是第一次参加课程,组合课程,以及入侵世界级大学?)没关系。我们将总结所有这些,我们有高度具体的,实际的例子来真正加强这些概念在整个Webflow大学-包括标签,这就像超级类…但完全不同)。
我们在这里要注意的一点是,复制一个类和只使用一个COMBO类之间的区别是,复制是结束与原始类的关系。(当一个类被复制,它带来了所有的风格从原始类,但这是it。)关系到此为止。现在这是两个完全不同的类,它们完全不相互通信。
使用COMBO类,您仍然可以从基类引入样式。(这是一种共生关系,样式仍然从基类单向传递,那些样式可以影响组合类,但所有你真正做的是在原来的基础上构建。因此,虽然您可以在COMBO类上覆盖样式,但更改只会单向进行。(如果你回去改变基类上的东西?)这也将在Combo类中更新-即使我们可以在Combo类中覆盖那个样式。
现在。当我们继续前进时,我们将进行总结(我们将重述所有这些),但在此之前,让我们完成目标并讨论全局类的概念。
当您试图将特定样式应用于广泛的元素时,全局类是非常好的。首先,我们将演示这一点,然后我们将确切地阐明幕后发生了什么。
我们将开始……罗伯·劳。这不是罗伯·劳。它是一个div块。没有任何应用到它-没有类(它没有任何样式)。但我们将在它上面创建一个普通的类-我们将键入Rob Lowe并点击Return。这里是它变得紧张的地方:让我们设置背景(我们将在这里向Rob Lowe类添加一个背景图像),我们将从我们的许多Rob Lowe的图像中选择。
就像这样,我们将罗伯·劳的背景图像应用到罗伯·劳的类中。(到目前为止,它就像样式化任何其他类一样。)但这是它在全球的使用方式。假设我们有所有这些不同种类的元素。一个用作卡片的div块,我们的导航栏,这里的这些按钮-事实上,如果我们点击这些元素中的任何一个,它们已经有类了。即使我们点击这里的HEADING。让我们命名为“示例标题”——当我们这样做的时候,让我们在这里做一个样式的改变——让我们改变字体大小。和…的course...we can also mess with the line height.
每一个都有一个基类。重点是:我们要做什么?全局使用Rob Lowe类(全局类)将把那些SPECIFIC属性(特定样式)应用到已经有类的东西上。
它是这样工作的:我们点击右边开始输入Rob Lowe。当我们添加它(注意它是如何作为一个全局类列出)?当我们添加它时,背景图像及其所有样式现在都应用到卡片上。但这就是为什么这是一个大问题:假设我们在导航栏上做同样的事情—选择了导航栏,我们可以在全局上添加Rob Lowe类。这些按钮也是一样的——但请注意,我们必须将其添加到每个按钮上——添加全局类是逐个元素完成的;它不会与其他东西发生冲突那些恰好应用了Button类的东西;所以我们必须将Global类应用到我们想要向Rob Lowe显示的元素的每个实例。
这标题?我们可以在这里做同样的事情。(我们可以把罗伯·劳(Rob Lowe)加到标题里。)
如果我们回到ORIGINAL div块呢?(只申请了我们的罗伯·劳班?)我们可以进去调整背景图片。也许我们想要的不仅仅是覆盖;但我们想让罗伯·劳的眼睛定位准确。(注意它是如何对所有不同类型的元素进行更新的。)
这就是最大的优势:如果我们把Rob Lowe作为所有这些不同职业的背景(如果我们进入并设置背景图像、Cover和位置)——如果我们对所有这些职业都这样做,我们会出现严重的手腕损伤,如果我们想要做出改变,我们会花更多的时间。
所以。让我们看看这在技术上是如何工作的。Global类(Rob Lowe)具有应用于它的样式属性。通过将其添加到TOP(或者更确切地说是NEXT到任何其他类),我们能够应用来自GLOBAL类的样式属性…其他的类。
这真的让我们陷入了一个存在的困境:我们如何平衡在任何时候都可以使用COMBO类或GLOBAL类的事实?还有,生命的意义是什么?
我们将涵盖所有内容,最好的方法是将其分成三个部分:
基类、组合类和全局类。我们已经知道基类(它只是我们创建并用于基本所有样式的类—一个普通的基类,如Button)。组合类是在基类的TOP上构建的——换句话说,它允许我们将基类与一些更具体的样式进行组合——比如深色版本的按钮,或者绿色的按钮,或者更大的按钮,粉色的,倒置的按钮。
但是一个Global类呢?这是完全不同的事情。一个Global类是在自己的OWN上创建的。你可以添加任何你想要的样式属性。(比如背景图片。罗伯·劳)。你可以添加一个全局类(你可以添加它)到任何你想要的东西-一个BASE类像一个样式按钮,一个COMBO类像暗按钮-这无关紧要。
与全局类有关的唯一的事情是:他们将把他们的样式到任何元素与任何类或组合类应用…只要这些类上的一个更特定的属性还没有被应用。
把更清楚吗?如果我们有一个名为Zoe Saldana的类,并且该类的背景已经设置好了,添加Rob Lowe的全局类?什么都做不了。这是因为全局类将只应用尚未设置的样式(我们可以单击标签,并看到背景图像被设置在Zoe Saldana类上)。
一个非常实际的思考方式是这样的:假设我们开始建立一个大规模的营销网站。我们希望所有的元素都有一个特定的和一致的投影。(这个卡片,这个按钮,这个图像…)
让我们创建一个新类(很多时候,为了创建我们使用的Global类,它是有意义的,只是使用一个临时元素,如div块)-我们将添加一个名称:完美的阴影。因此,我们已经创建了这个类(这将是我们的Global类),我们现在可以非常简单地对它进行shadow -实际上,我们不会花太多的精力来证明一个观点(因为我们会回来的)。
我们要做的是什么?就是把这个作为一个Global类添加到所有这些东西中。我们可以将它作为一个全局类添加到CARD中,我们可以将它作为一个全局类添加到BUTTON中——这也会在那里添加阴影……我们甚至可以添加完美的阴影…即使它已经应用了COMBO类。(我们甚至可以在Combo类上添加全局类。)现在它们都有相同的影子。
如果我们想改变Global类的样式呢?我们将选择之前的样本div块(同样,我们只是使用它作为一个临时的东西,以便我们可以对完美的阴影类进行样式)…当我们这样做的时候,我们就能够完善阴影(我们在这里改变的所有属性都影响了所有这些不同类型的元素上的框影)。
现在。这是否意味着我们应该一直使用全局类?这是否意味着一切都是一个复杂的混乱的基类,和组合类,全局类,和MasterClasses?也许并不是这样。如果我们计划以类似的方式对一系列元素进行全局更改,它们是我们可以使用的工具。在大多数情况下,在常用样式的元素上使用基类?这是一笔很好的交易。在其中一些上使用COMBO类:也很划算。如果我们想应用特定类型的样式(我们想应用于所有类型的类的一些属性),我们可以使用Global类。
但这是最基本的方法为现代web样式:我们可以创建类和应用它们无论我们想要保持风格统一的组织,我们可以编辑风格的类会影响所有元素类应用,我们可以删除类,我们可以复制类如果我们想要一个起点为一种新的样式,我们可以使用组合类更具体的版本或变种像黑暗模式与较轻的文本,我们可以创建全球类。当调用它时,我们可以应用GLOBAL类将特定的样式传递给DIFFERENT类型的类。
现在,如果它看起来很多…因为事实就是如此。课程和标签(我们将在另一课中介绍)……这些都是强大的工具,有了它们,你几乎可以设计任何东西。
记住:大部分的互联网是通过课堂建立起来的。因为我们不需要一个一个地设计所有的样式,我们可以使用类来构建几乎任何我们能想到的设计。