很有可能，如果你在网上看到一个现代的布局，它是用类设计的。因为在早期的互联网时代，开发人员必须在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重定向。不过，不，那是另一课。输入:组合类。就像复制一个类，但实际上根本不是。
这是因为组合类仍然引用原始类(基类)。这个页面上的所有按钮都使用相同的类(“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”——当我们这样做的时候，让我们在这里也做一个样式的改变——让我们改变字体大小。和…当然……我们还可以改变线高。
每一个都有一个基类。关键是:我们接下来要做什么?全局地使用我们的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块(同样，我们只是使用它作为一个临时的东西，所以我们可以样式完美的影子类)…而且when we do, we’re able to perfect the shadow (all properties we’re changing here are affecting the box shadow on ALL of these different kinds of elements).
现在。这是否意味着我们应该一直使用全局类?这是否意味着所有东西都是由基类、Combo类、全局类和master类组成的复杂混乱?可能没有那么多。如果我们计划进行以类似方式影响一堆元素的全局更改，它们是我们可以使用的工具。在大多数情况下，在常用样式的元素上使用基类?这是一笔不错的交易。对其中的一些使用COMBO类:也很不错。如果我们想应用特定类型的样式(我们想应用于ALL类型的类的一些属性)，我们可以使用Global类。
但这是最基本的方法为现代web样式:我们可以创建类和应用它们无论我们想要保持风格统一的组织,我们可以编辑风格的类会影响所有元素类应用,我们可以删除类,我们可以复制类如果我们想要一个起点为一种新的样式,我们可以使用组合类更具体的版本或变种像黑暗模式与较轻的文本,我们可以创建全球类。当它被调用时，我们可以应用GLOBAL类来将特定的样式传递给不同类型的类。
现在，如果它看起来很多…那是因为事实就是如此。类和标签(我们将在另一课中讨论)…这些都是强大的工具，有了它们，你几乎可以设计任何东西。
记住:大多数互联网都是USING类构建的。因为我们不需要一个一个地设计所有的东西，我们可以使用类来构建几乎任何我们能想到的设计。
