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