如何学习 CSS?需要学习那些知识?

很多人想让我给他们推荐有关CSS部分的教程,或者问我如何学习CSS。我也看到很多人对CSS的部分内容感到困惑,一部分原因是由于对语言的过时认识。鉴于CSS在过去几年中发生了相当大的变化,这是一个更新知识的好时机。即使CSS只是你所做工作的一小部分(因为你使用其他技术栈),CSS是你最终希望在屏幕上显示的结果,所以值得合理去学习。因此,本文旨在概述CSS的关键基础和资源,以便进一步阅读现代CSS开发的关键领域。其中许多资源在Smashing杂志上已经有了,但我也选择了其他一些资源,也有人关注CSS的关键领域。这不是一本完整的初学者指南或旨在涵盖所有知识点。我的目标是覆盖现代CSS的广度,同时重点关注几个关键领域,将帮助你理解CSS的其他部分。语言基础知识对于CSS的大部分内容,你不需要特意去学习属性和值,你可以在需要时查找它们。然而,CSS中一些基础知识没有掌握好,你将很难去理解它。这些基础知识值得你花时间去理解,从长远看,它会帮你节省很多时间和少走弯路。选择器,不仅仅有类选择器的表现如标题所说的,它选择文档的某些部分,以便你可以将CSS规则应用于它。大多数人都熟悉使用 class,或在 直接使用HTML元素设置样式,比如 body,但是还有很多更高级的选择器可以根据文档中的位置选择元素,直接选择位于元素之后的元素,或选择表格中的奇数行。这些选择器是CSS3规范的一部分(你可能听说过它们被称为第3级选择器)具有出色的浏览器支持。有关可以使用的各种选择器的详细信息,请参阅 MDN 参考。有些选择器的行为就好像你已经将类应用于文档中的某些内容。例如p:first-child就像你在第一个p元素中添加了一个类一样,这些被称为 伪类选择器。伪元素选择器就像动态插入一个元素一样,例如::first-line的表现与用span 包裹第一行文本类似。但是,如果该行的长度发生变化,它将重新应用,如果插入该元素则不会出现这种情况。这些选择器可能会相当复杂。在下面的CodePen中是一个用伪类链接的伪元素的例子。我们使用:first-child伪类定位第一个p元素,然后::first-line选择器选择该元素的第一行,就好像在第一行周围添加了一个以使其变为粗体和改变颜色。 继承和层叠层叠是指当元素应用了多个样式规则,哪个规则优先应用。如果你曾经遇到过无法理解为什么某些CSS似乎没有应用的情况,那可能是层叠没有运用好。层叠与继承紧密相关,继承定义了子元素可以继承父元素的样式属性。它还与特异性有关,不同的选择器具有不同的特异性,当有几个选择器可以应用于一个元素时,继承可以决定应用哪个规则。注意:为了理解所有这些内容,我建议阅读MDN CSS简介中的 层叠和继承。如果你正在尝试将一些CSS应用于一个元素,那么你的浏览器开发者工具是开始最好的地方。看看下面的例子,我用元素选择器 h1 将 h1 标题设置为橙色。同时,我也使用类选择器设置h1 设置为紫色。由于类更具体,因此h1是紫色的。在开发者工具中,您可以看到元素选择器被划掉,因为它没有被应用。一旦你看到浏览器正在获取你的CSS(但其他东西已经推翻了它),那么你可以开始找出原因。 盒模型CSS里一切都是盒子。屏幕上显示的所有内容都有一个框,盒模型描述了如何计算该框的大小 - 将外边距,内边距和边框考虑进去。标准的CSS框模型接受给定元素的宽度,然后将内边框和边框添加到该宽度上——这意味着元素占用的空间大于给定的宽度。最近,我们已经能够选择使用IE盒模型,使得元素上的给定宽度作为屏幕上可见元素的宽度。任何内边距或边框都会从边缘插入框的内容。这对许多布局更有意义。在下面的演示中,我有两个盒子。两者的宽度均为200像素,边框为5像素,内边距为20像素。第一个框使用标准框模型,因此占用总宽度为250像素,第二个框使用IE盒模型,因此实际上是200像素宽。 浏览器开发者工具可以再次帮助你了解正在使用的盒子模型。在下图中,我使用火狐浏览器的开发者工具使用默认的内容框框模型检查框。工具告诉我这是正在使用的盒模型,我可以看到大小以及如何将边框和内边框添加到指定的宽度。 注意:在IE6之前,Internet Explorer使用IE盒模型,内边框和边框插入给定宽度的内容里。所以有一段时间浏览器使用不同的盒模型!如果今天的互操作性问题感到沮丧,现在已经有所改善,那么我们就不会处理浏览器以不同的方式计算元素的宽度。在 CSS Tricks 里,有关于盒模型和盒子尺寸的很好的解释,并解释了在你的网站中全局使用IE盒模型的最佳方法。标准流如果你的文档内容用一些HTML标记,你的文档将具有可读性。标题和段落会另起新的一行,单词组成句子时,它们之间有一个空格。标记是用来格式化的,像 em 不会破坏句子的流。句子会表现标准流,或块流布局。句子的每个部分都被描述为“在流中”,它知道句子其余内容,所以不会重叠。如果你去了解,而不是去反对这种行为,你会变得更加轻松。这是为什么从正确标记的HTML文档开始很有意义的原因之一,由于浏览器遵守正常流和内置样式表,你的内容从可读的地方开始。格式化上下文一旦文档的内容处于正常流程中,您可能希望更改其中一些内容的外观。你可以通过更改元素的格式上下文来完成此操作。举个一个非常简单的示例,如果你希望所有段落连在一起而不是从新行开始,你可以设置 p 元素的样式属性display:inline ,将 p 元素由块级元素变成内联元素。本质上,格式化上下文定义了外部和内部类型。外部控制元素与页面上其他元素的行为,内部控制子元素的外观。例如,当你设置 display:flex ,你在设置外部为块格式化上下文,设置子元素为 flex 格式化上下文。注意:最新版本的Display规范改变了 display 的值,显式声明外部和内部的类型。因此,将你可能会声明 display:block flex; (外部为 block,内部为 flex)进入或离开流CSS中的元素被描述为“在流中”或“脱离流”。流中的元素被赋予空间,并且空间被流中的其他元素所影响。如果通过浮动或定位元素使元素脱离流,则该元素的空间将不再受到其他流元素的影响。对于绝对定位的元素,是最明显的。如果你设置一个元素 position: absolute ,该元素会从流中脱离,你需要确保这个元素不会与流中的元素重叠,且不影响你布局的其他部分的可读性。 然而,浮动元素也会从流中脱离,但后面的元素的文本将环绕该浮动元素。你可以设置后面元素的背景颜色,你会看到他们会上升并占用了原来浮动元素原来的空间。 你可以在MDN上阅读更多有关 流中和脱离流 的信息。需要记住的重要一点是,如果从流中取出一个元素,则需要自己管理重叠,因为块流布局的常规规则不再适用。布局十五年来,我们一直使用CSS布局,但没有设计一套布局系统。这已经改变了。我们现在拥有功能完备的布局系统,其中包括 Grid 和 Flexbox ,还有多列布局和旧布局方法也应用于实际目的。不要认为grid和flexbox等方法在某种程度上是竞争的。为了更好地使用布局,你有时会发现组件最好作为 flex ,有时作为 Grid。有时,你想要多列流动布局。所有这些都是不错的选择。如果你觉得自己在与某些事物的行为方式作斗争,这通常是一个非常好的迹象,表明它可能值得退一步,尝试一种不同的方法。我们已经习惯了在CSS上做一些我们想做的事情,以至于我们可能会忘记我们还有很多其他的选择可以尝试。对齐通常,我会将对齐和布局分开,虽然大多数人把对齐当作 Flexbox的一部分。对齐这些属性适用于所有布局方法上,应该在上下文去理解对齐,而不是考虑 “Flexbox对齐”或“CSSGrid 对齐”。对齐属性在大体上表现一样,但不同布局方式里会有一些差异。在MDN上,您可以深入了解 盒对齐 及其在Grid,Flexbox,多列和块布局中的实现方式。 尺寸我在2018年花了很多时间讨论了内部和外部尺寸规范,特别是它与Grid和Flexbox的关系。在web上,我们习惯于设置尺寸为长度或百分比,这就是我们如何使用浮动来制作网格类型布局的方法。然而,现代的布局方法可以为我们做很多空间分配——如果我们允许的话。值得花时间去了解Flexbox如何分配空间(或Grid fr 单元如何工作)。响应式设计通常,新的Grid和Flexbox布局方法意味着我们可以使用比旧方法更少的媒体查询,因为它们非常灵活,可以响应视口或组件大小的变化,而无需我们更改元素的宽度。但是,有些地方需要添加一些断点来进一步增强设计。字体和排版与布局一样,网络上的字体使用在去年发生了巨大的变化。现在,可变字体,使单个字体文件具有无限的变化。要了解它们是什么以及它们如何工作,请观看Mandy Michael的精彩简短演讲:可变字体和网页设计的未来。另外,我会推荐Jason Pamental的动态排版与现代CSS和可变字体。为了探索可变字体和它们的功能,微软提供了一个有趣的演示,以及一些尝试可变字体的游乐场 - Axis Praxis是最知名的(我也喜欢字体游乐场)。MDN上的指南将证明一开始使用可变字体是非常有用的。变形和动画CSS转换和动画绝对是我需要知道的基础。我不经常需要使用它们,在使用时会忘记语法。值得庆幸的是,MDN上的参考资料帮助了我,我建议从使用CSS变换和使用CSS动画的指南开始。Zell Liew也有一篇很好的文章,为CSS过渡提供了很好的解释。关于动画可能令人困惑的事情之一是采取哪种方法。除了CSS支持的内容之外,你可能还需要涉及JavaScript,SVG或Web Animation API,而这些事情往往都会被混为一谈。在她的演讲中,选择你的动画冒险记录在事件中,Val Head解释了这些选项。使用速查表作为回忆,而不是学习工具当我提到Grid或Flexbox资源时,我经常看到回复说,如果没有特定的速查表,他们就不能使用Flexbox。我觉得把速查表作为记忆助手查找语法没有问题,我自己也出版过一些速查表。完全依赖速查表的问题是当你复制语法时,你可能会忽略为什么要这样写。然后,当你遇到属性的行为似乎不同的情况时,这种明显的不一致性似乎令人困惑,或者是语言的错误 。如果你发现CSS在做一些非常奇怪的事情的情况下,问问为什么。创建一个简单的测试用例来强调这个问题,问问对规范更熟悉的人。我被问到的许多CSS问题都是因为人们认为属性的表现与它在现实中的表现不同。这就是为什么我经常讨论关于对齐和尺寸,因为这些地方经常会混淆。是的,CSS中有一些奇怪的东西。它是一门经过多年进化的语言,有些东西我们无法改变,除非我们发明了时间机器。然而,一旦你掌握了一些基础知识,并且理解了为什么会这样,你就可以更轻松地处理棘手的问题。自己是从事了五年的前端工程师,自己整理了一份最全面前端学习资料, 从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的, 正在学习的小伙伴, 需要可以私聊我哟,这是我的前端开发qun,【六零三】【九八五】【九九三】,直接群里下载, 对于学习web前端有任何问题(学习方法,学习效率,如何就业)都可以问我,

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):