佛山网站定制：如何学习CSS

我让很多人要求我向他们推荐关于CSS的各个部分的教程，或者询问如何学习CSS。我也看到很多人对CSS的内容感到困惑，部分原因是由于对语言的过时观念。鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。即使CSS只是你所做工作的一小部分（因为你在堆栈中的其他地方工作），CSS就像你在屏幕上看到它们最终看起来那样，所以值得合理地更新。

因此，本文旨在概述CSS的关键基础和资源，以便进一步阅读现代CSS开发的关键领域。其中许多都是Smashing杂志上的东西，但我也选择了其他一些资源，也有人关注CSS的关键领域。这不是一本完整的初学者指南或旨在涵盖绝对一切。我的目标是覆盖现代CSS的广度，重点关注几个关键领域，这将有助于为您解锁其余的语言。

语言基础知识

对于CSS的大部分内容，您无需担心学习属性和值。您可以在需要时查找它们。然而，语言有一些关键的基础，如果没有这些基础，你将很难理解它。真的值得花一些时间来确保你理解这些东西，因为从长远来看，它将为你节省大量的时间和挫折。

我让很多人要求我向他们推荐关于CSS的各个部分的教程，或者询问如何学习CSS。我也看到很多人对CSS的内容感到困惑，部分原因是由于对语言的过时观念。鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。即使CSS只是你所做工作的一小部分（因为你在堆栈中的其他地方工作），CSS就像你在屏幕上看到它们最终看起来那样，所以值得合理地更新。

因此，本文旨在概述CSS的关键基础和资源，以便进一步阅读现代CSS开发的关键领域。其中许多都是Smashing杂志上的东西，但我也选择了其他一些资源，也有人关注CSS的关键领域。这不是一本完整的初学者指南或旨在涵盖绝对一切。我的目标是覆盖现代CSS的广度，重点关注几个关键领域，这将有助于为您解锁其余的语言。

语言基础知识

对于CSS的大部分内容，您无需担心学习属性和值。您可以在需要时查找它们。然而，语言有一些关键的基础，如果没有这些基础，你将很难理解它。真的值得花一些时间来确保你理解这些东西，因为从长远来看，它将为你节省大量的时间和挫折。

选择者，不仅仅是阶级

选择器执行它在锡上所说的内容，它选择文档的某些部分，以便您可以将CSS规则应用于它。虽然大多数人都熟悉使用类或body直接设置HTML元素样式，但是有大量更高级的选择器可以根据文档中的位置选择元素，可能是因为它们直接位于元素之后，或者是表中的奇数行。

作为Level 3规范一部分的选择器（您可能听说过它们被称为Level 3选择器）具有出色的浏览器支持。有关可以使用的各种选择器的详细信息，请参阅MDN参考。

有些选择器的行为就好像您已经将类应用于文档中的某些内容。例如，p:first-child表现就像您向第一个p元素添加了一个类，这些类称为伪类选择器。所述伪元素选择器充当如果一个元素被动态插入的，例如::first-line以类似的方式给你包装一作用span围绕文本的第一行。但是，如果该行的长度发生变化，它将重新应用，如果插入该元素则不会出现这种情况。这些选择器可能会相当复杂。在下面的CodePen中是一个用伪类链接的伪元素的例子。我们p用:first-childpsuedo-class 定位第一个元素，然后是::first-line 选择器选择该元素的第一行，就好像在第一行周围添加了一个跨度，以使其变为粗体并更改颜色。

继承与瀑布

当许多规则可以应用于一个元素时，级联定义哪个规则获胜。如果您曾经遇到过无法理解为什么某些CSS似乎没有应用的情况，那么级联可能会让您绊倒。级联与继承紧密相关，继承定义了应用它们的元素的子元素继承的属性。它还与特异性有关; 不同的选择器具有不同的特异性，当有多个选择器可以应用于一个元素时，它们控制哪个获胜。

注意：为了理解所有这些内容，我建议阅读MDN CSS简介中的Cascade和Inheritance。

如果你正在努力将一些CSS应用于一个元素，那么你的浏览器DevTools是最好的开始，看看下面的例子，其中我有一个h1元素选择器所针对的元素h1，并使标题为橙色。我也在使用一个类来设置h1rebeccapurple。这个课程更具体，因此h1是紫色的。在DevTools中，您可以看到元素选择器被划掉，因为它不适用。一旦你看到浏览器正在获取你的CSS（但其他东西已经推翻了它），那么你可以开始找出原因。

盒子模型

CSS就是盒子。屏幕上显示的所有内容都有一个框，Box模型描述了如何计算该框的大小 - 考虑边距，填充和边框。标准的CSS Box模型采用给定元素的宽度，然后在该宽度上添加填充和边框 - 这意味着元素占用的空间大于您给出的宽度。

最近，我们已经能够选择使用备用盒模型，该模型使用元素上的给定宽度作为屏幕上可见元素的宽度。任何填充或边框都会从边缘插入框的内容。这对许多布局更有意义。

在下面的演示中，我有两个盒子。两者的宽度均为200像素，边框为5像素，填充为20像素。第一个框使用标准框模型，因此占用的总宽度为250像素。第二个使用备用盒模型，因此实际上是200像素宽。

浏览器DevTools可以再次帮助您了解正在使用的盒子模型。在下图中，我使用Firefox DevTools使用默认的content-box盒子模型检查盒子。工具告诉我这是正在使用的Box模型，我可以看到大小以及如何将边框和填充添加到我指定的宽度。

注意：在IE6之前，Internet Explorer使用备用Box模型，填充和边框插入远离给定宽度的内容。所以有一段时间浏览器使用不同的Box模型！如果今天的互操作性问题感到沮丧，那么事情已经有所改善，那么我们就不会处理浏览器以不同的方式计算事物的宽度。

对CSS技巧的Box模型和Box大小有一个很好的解释，并解释了在您的站点中全局使用备用盒模型的最佳方法。

正常流量

如果您的文档中包含一些HTML标记内容并在浏览器中查看，那么它将具有可读性。标题和段落将从一个新行开始，单词显示为一个句子，它们之间有一个空格。用于格式化的标签（例如em）不会破坏句子流。此内容以正常流程或块流程布局显示。内容的每个部分都被描述为“在流程中”; 它知道其余内容，因此不重叠。

如果你工作而不是反对这种行为，你的生活将变得更加容易。这是为什么从正确标记的HTML文档开始很有意义的原因之一，因为正常的流程和浏览器所尊重它的内置样式表，您的内容从可读的地方开始。

格式化上下文

一旦您拥有包含正常流程内容的文档，您可能希望更改某些内容的外观。您可以通过更改元素的格式上下文来完成此操作。作为一个非常简单的示例，如果您希望所有段落一起运行而不是从新行开始，则可以更改p元素以display: inline将其从块更改为内联格式化上下文。

格式化上下文基本上定义了外部和内部类型。外部控制元素与页面上其他元素一起的行为，内部控制子元素的外观。因此，例如，当您说display: flex您将外部设置为块格式化上下文，并且子项具有flex格式上下文时。

注意：最新版本的显示规范会更改值display以显式声明内部和外部值。因此，在未来你可能会说display: block flex;（block作为外在而且flex是内在的）。

阅读有关display MDN的更多信息。

进入或离开流动

CSS中的元素被描述为“流动”或“流动不足”。流中的元素被赋予空间，并且该空间被流中的其他元素所尊重。如果通过浮动或定位元素使元素流出，则该元素的空间将不再受到其他流元素的尊重。

对于绝对定位的物品，这是最明显的。如果你给一个项目position: absolute它被从流程中删除，那么你需要确保你没有流动元素重叠的情况，并使你的布局的其他部分不可读。

但是，浮动项也会从流中移除，而后续内容将环绕浮动元素的缩短线框，您可以通过在以下元素的框中放置背景颜色来看到它们已经上升并忽略了浮动物品使用的空间。

您可以在MDN上阅读有关流量和流量元素的更多信息。需要记住的重要一点是，如果从流中取出一个元素，则需要自己管理重叠，因为块流布局的常规规则不再适用。

布局

十五年来，我们一直在使用CSS进行布局而没有为作业布局系统设计。这已经改变了。我们现在拥有一个功能完备的布局系统，包括Grid和Flexbox，还有多列布局和用于实际目的的旧布局方法。如果CSS布局对您来说是一个谜，请继续阅读MDN 学习布局教程，或阅读我的文章Smashing Magazine上的CSS布局入门。

不要以为像grid和flexbox这样的方法在某种程度上是竞争的。为了更好地使用Layout，您有时会发现组件最适合作为flex组件，有时候也可以作为Grid。有时，您将需要multicol的列流动行为。所有这些都是有效的选择。如果你觉得你正在反对某种行为的方式，那么，一般来说，这是一个非常好的迹象，表明可能值得退一步并尝试不同的方法。我们习惯于乱砍CSS以使其做我们想要的事情，我们可能会忘记我们还有其他一些选择。

布局是我的主要专业领域，我在Smashing Magazine和其他地方写了很多文章，试图帮助驯服新的布局。除了上面提到的布局文章，我在Flexbox上有一整套系列 - 从创建Flexbox Flex容器时会发生什么开始。在网格上通过示例，我有一大堆CSS Grid的小例子 - 以及一个视频截屏教程。

此外 - 特别是对于设计师 - 查看Jen Simmons和她的Layout Land视频系列。

对准

我一般将Alignment与Layout分开，因为虽然我们大多数人都是作为Flexbox的一部分介绍给Alignment的，但这些属性适用于所有布局方法，值得在上下文中理解它们，而不是考虑“Flexbox Alignment”或“CSS Grid alignment。”我们有一组Alignment属性，它们尽可能以通用方式工作; 然后，由于不同布局方法的行为方式，它们会有一些差异。

在MDN上，您可以深入了解Box Alignment及其在Grid，Flexbox，Multicol和Block Layout中的实现方式。在Smashing Magazine上，我有一篇文章专门介绍Flexbox中的对齐：您需要知道的有关Flexbox中对齐的所有内容。

浆纱

我花了2018年的大部分时间谈论内在和外在尺寸规范，以及它与Grid和Flexbox的关系。在Web上，我们习惯于设置长度或百分比的大小，因为这是我们使用浮点数制作网格类型布局的方法。但是，现代布局方法可以为我们做很多空间分配 - 如果我们让它们。了解Flexbox如何分配空间（或网格fr单元的工作原理），值得您花时间。

在Smashing杂志上，我写过关于布局的大小调整以及Flexbox中的灵活盒子有多大？。

响应式设计

我们新的Grid和Flexbox布局方法通常意味着我们可以使用比旧方法更少的媒体查询，因为它们非常灵活，可以响应视口或组件大小的变化，而无需我们更改元素的宽度。但是，您可能希望在某些断点处添加一些地方以进一步增强您的设计。

以下是响应式设计的一些简单指南，对于媒体查询，一般情况下，请查看我的文章2018年使用媒体查询进行响应式设计。我看一下Media Queries对什么有用，并且还显示了规范4级中的媒体查询的新功能。

字体和排版

与布局一样，网络上的字体使用在去年发生了巨大的变化。可变字体，使单个字体文件具有无限的变化，在这里。要了解它们是什么以及它们如何工作，请观看Mandy Michael的精彩简短演讲：可变字体和网页设计的未来。另外，我建议动态排版随着现代CSS和可变字体由贾森Pamental。

为了探索可变字体及其功能，有一个有趣的演示来自微软以及许多游乐场来尝试可变字体 - Axis Praxis是最知名的（我也喜欢字体游乐场）。

一旦开始使用可变字体，那么MDN上的本指南将证明是非常有用的。要了解如何为不支持变量字体的浏览器实现回退解决方案，请阅读OliverSchöndorfer实现具有后备Web字体的变量字体。在火狐DevTools字体编辑器还具有与可变字体支持工作。

变形和动画

CSS变换和动画绝对是我需要知道的基础。我不经常需要使用它们，语法似乎在使用之间跳出了我的脑海。值得庆幸的是，MDN上的参考资料帮助了我，我建议从使用CSS变换和使用CSS动画的指南开始。Zell Liew也有一篇很好的文章，为CSS过渡提供了很好的解释。

要发现一些可能的事情，请查看Animista网站。

关于动画可能令人困惑的事情之一是采取哪种方法。除了CSS支持的内容之外，您可能还需要涉及JavaScript，SVG或Web Animation API，而这些事情往往都会被混为一谈。在她的演讲中，选择你的动画冒险记录在An Event Apart，Val Head解释了选项。

使用Cheatsheets作为提醒，而不是学习工具

当我提到Grid或Flexbox资源时，我经常看到回复说他们不能在没有特定备忘单的情况下进行Flexbox。作为查找语法的内存助手，我没有使用cheatsheets的问题，我已经发布了一些自己的内容。完全依赖于这些问题的问题是，您可以在复制语法时错过原因。然后，当你遇到一个特性表现不同的情况时，这种明显的不一致似乎令人困惑，或者是语言的错误。

如果您发现自己处于CSS似乎做一些非常奇怪的事情，请问为什么。创建一个简化的测试用例，突出显示问题，询问更熟悉规范的人。我被问到的许多CSS问题都是因为该人认为某个财产的运作方式与其在现实中的运作方式不同。这就是为什么我会谈论像对齐和大小调整这样的事情，因为这些都是这种混乱常常存在的地方。

是的，CSS中有一些奇怪的东西。这是一种多年来不断发展的语言，有些事情我们无法改变 - 直到我们发明了一个时间机器。但是，一旦你掌握了一些基础知识，并理解为什么事情就像他们那样，你就会有更容易的时间来处理棘手的事情。

佛山网站定制