浅谈CSS学习方向

马肤
这是懒羊羊

文章最后更新时间:2022年11月12日已超过519天没有更新。

前言

很多人想让我推荐关于CSS的教程,或者问我怎么学CSS。我也看到很多人对CSS的一些内容感到困惑,部分原因是语言知识过时。鉴于CSS在过去几年中发生了巨大的变化,这是更新知识的好时机。即使CSS只是你所做事情的一小部分(因为你使用了其他的技术栈),但CSS是你最终想要在屏幕上显示的结果,所以是值得合理学习的。


因此,本文旨在概述CSS的关键基础和资源,以便进一步阅读现代CSS发展的关键领域。这些资源很多在Smashing杂志上已经有了,但是我也选了一些其他的资源,还有人关注CSS的重点领域。这不是一本完整的初学者指南,也不打算涵盖所有知识点。我的目标是涵盖现代CSS的广度,同时重点关注几个关键领域,帮助您理解CSS的其他部分。

浅谈CSS学习方向,00515090439.png,css,第1张

语言基础知识

对于CSS的大部分内容,不需要学习属性和值,需要的时候就可以去查。但是CSS中的一些基础知识没有很好的掌握,你会很难理解。这些基础知识值得你花时间去了解。从长远来看,会节省你很多时间,少走弯路。


选择器,不仅仅是类

如标题所示,选择器选择文档的一些部分,以便您可以对其应用CSS规则。大多数人都熟悉使用class,或者直接使用HTML元素设置样式,比如body,但是还有很多更高级的选择器,可以根据文档中的位置选择元素,直接选择元素之后的元素,或者选择表格中的奇数行。


这些选择器是CSS3规范的一部分(您可能听说过它们被称为3级选择器),并且具有出色的浏览器支持。有关可以使用的各种选择器的详细信息,请参考MDN参考。


有些选择器的行为就好像您已经将该类应用于文档中的某些内容。比如p:first-child就像是给第一个p元素添加一个类。这些被称为伪类选择器。伪元素选择器类似于动态插入元素,例如::first-line的行为类似于用span换行文本的第一行。但是,如果线的长度发生变化,它将被重新应用,如果插入元素,则不会发生这种情况。这些选择器可能相当复杂。下面的CodePen是一个用伪类链接的伪元素的例子。我们用:first-child伪类定位第一个P元素,然后::first-line selector选择这个元素的第一行,好像在第一行周围加一个使其加粗并改变颜色。





浅谈CSS学习方向,v2-881dc58b9ae68bfb3e4b7fb3d14e0d27_r.jpg,css,第2张

箱状模式

CSS中的一切都是一个盒子。屏幕上显示的所有东西都有一个盒子,盒子模型描述了如何计算盒子的大小——将外边距、内边距和边框考虑在内。的标准CSS box模型接受给定元素的宽度,然后将内边框和边框添加到该宽度上——这意味着元素占用的空间比给定的宽度多。


最近我们已经可以选择使用IE box模型,这样元素上给定的宽度就是屏幕上可见元素的宽度。任何内边距或边框都将从边缘插入框中的内容。这对许多布局更有意义。


在下面的演示中,我有两个盒子。它们的宽度都是200像素,边框是5像素,内边距是20像素。第一个盒子使用标准盒子模型,因此它占据了250像素的总宽度。第二个盒子用的是IE盒子的型号,所以实际上是200像素宽。


浏览器工具可以帮助你理解你再次使用的盒子模型。在下图中,我使用Firefox浏览器的开发人员工具,使用默认的内容框模型来选中该框。工具告诉我这是正在使用的盒子模型,我可以看到大小以及如何将边框和内边框添加到指定的宽度。




浅谈CSS学习方向,屏幕截图 2022-11-10 223617.png,css,第3张


注:IE6之前,IE浏览器使用IE box模型,内边框和边框以给定宽度插入内容。所以有一段时间浏览器用的是不同的盒子型号!如果今天的互操作性问题令人沮丧,并且现在已经有所改善,那么我们不会处理浏览器以不同方式计算元素宽度的问题。


在CSS窍门中,有关于盒子模型和盒子大小的很好的解释,以及在你的网站中全局使用IE盒子模型的最佳方式。


标准流程

如果你的文档内容用一些HTML标记,你的文档将是可读的。标题和段落会另起一行,当单词组成一个句子时,它们之间会有一个空格。标记是用来格式化的,和em一样,不会打断句子的流向。句子可以表达标准流程,或者块流程布局。句子的每一部分都被描述为“在流动中”。它知道句子的其余部分,所以不会重叠。


如果你理解这种行为而不是反对,你会变得更轻松。这就是为什么从一个正确标记的HTML文档开始是有意义的原因之一。由于浏览器遵循正常的流程和内置的样式表,您的内容从可读的地方开始。


格式化上下文

一旦文档内容进入正常流程,您可能希望更改其中一些内容的外观。您可以通过更改元素的格式上下文来做到这一点。举一个非常简单的例子,如果您希望所有段落连接在一起,而不是从新的一行开始,您可以设置p元素的样式属性display:inline,并将p元素从块级元素更改为inline元素。


本质上,格式化上下文定义了外部和内部类型。控制页面上外部元素和其他元素的行为,并在内部控制子元素的外观。例如,当设置display:flex时,将设置块的外部格式上下文,并将子元素设置为flex格式上下文。


注意:display规范的最新版本更改了Display的值,显式声明了外部和内部类型。因此,您可以声明display:block flex;(外侧为块状,内侧为弯曲状)


阅读有关MDN显示屏的更多信息


进入或离开溪流。

CSS中的元素被描述为“流内”或“流外”。流中的元素被给定了空间,该空间受流中其他元素的影响。如果元素通过浮动或定位从流中分离,该元素的空间将不再受其他流元素的影响。


对于绝对定位的元素,是最明显的。如果设置元素位置:absolute,它将从流中分离出来。您需要确保这个元素不会与流中的元素重叠,并且不会影响布局其他部分的可读性。


然而,浮动元素也将脱离流,但是下一个元素的文本将包围浮动元素。你可以设置后面元素的背景色,你会看到它们会上升,占据原来浮动元素的原有空间。


您可以在MDN上阅读更多关于流内和流外的信息。需要记住的重要事情是,如果您从流中取出一个元素,您需要自己管理重叠部分,因为块流布局的一般规则不再适用。



总体布局

我们用CSS布局十五年了,却没有设计出一个布局系统。这已经改变了。现在我们有了一个功能齐全的布局系统,包括Grid和Flexbox,多栏布局和旧的布局方法也被应用到实际用途中。如果想对CSS布局不熟悉,可以看看MDN上的布局教程,或者看看我在Smashing杂志上发表的文章《开始学习CSS布局》。


不要认为grid、flexbox等方法有一定的竞争力。为了更好地利用布局,您有时会发现组件最好用作flex,有时用作Grid。有时,您需要多栏流布局。这些都是不错的选择。如果你觉得你正在与某些行为方式作斗争,这通常是一个很好的迹象,表明可能值得后退一步,尝试不同的方法。我们如此习惯于在CSS上做我们想做的事情,以至于我们可能会忘记我们还有许多其他选择可以尝试。


布局是我的主要专业领域。我在Smashing杂志等地方写过很多文章,试图探索新的版面美化。除了上面提到的布局文章,我还有一个关于Flexbox的完整系列——“从创建Flex容器开始发生了什么”。关于网格的例子,我列出了许多CSS网格的例子——还有一个视频教程。


此外,尤其是对设计师来说,看看Jen Simmons和她的设计视频系列。


排列

通常,我将对齐与布局分开,尽管大多数人将对齐视为Flexbox的一部分。这些对齐属性适用于所有布局方法,对齐应该在上下文中理解,而不是考虑“Flexbox对齐”或“CSSGrid对齐”。对齐属性基本相同,但在不同的布局中存在一些差异。


在MDN上,您可以了解更多关于框对齐及其在Grid、Flexbox、多列和块布局中的实现。在Smashing杂志上,我有一篇关于Flexbox对齐的文章:关于Flexbox对齐你需要知道的一切。

浅谈CSS学习方向,屏幕截图 2022-11-10 224004.png,css,第4张

措施

2018年我花了很多时间讨论内外尺寸规格,尤其是它与Grid和Flexbox的关系。在web上,我们习惯于将大小设置为长度或百分比,这就是我们如何使用浮动来制作网格类型布局。然而,如果我们允许的话,现代布局方法可以为我们分配很多空间。值得花时间了解Flexbox如何分配空间(或者Grid fr unit如何工作)。


在Smashing杂志上,我写过一些关于版面尺寸的文章,也有关于Flexbox的,比如Flexbox有多大?


响应式设计

一般来说,新的grid和Flexbox布局方法意味着我们可以使用比旧方法更少的媒体查询,因为它们非常灵活,可以响应视口或组件大小的变化,而无需我们改变元素的宽度。但是有些地方需要增加一些断点来进一步完善设计。

这里有一些关于响应式设计的简单指南。总的来说,对于媒体查询,请查看我的文章《2018年使用媒体查询的响应式设计》。我将检查媒体查询的目的,并在规范4中介绍媒体查询的新功能。和字体布局。

像版面设计一样,在过去的一年里,互联网上的字体使用发生了巨大的变化。现在,你可以改变字体,这样一个单一的字体文件有无限的变化。要了解它们是什么以及它们是如何工作的,请观看Mandy Michael的精彩演讲:可变字体和网页设计的未来。另外,我会推荐Jason Pamental的带有现代CSS和可变字体的动态排版。

     为了探索可变字体及其功能,微软提供了一个有趣的演示和一些尝试可变字体的操场——Axis Praxis是最著名的(我也喜欢字体操场)。

MDN上的指南会证明一开始使用可变字体是非常有用的。要了解如何为不支持可变字体的浏览器实现后备解决方案,请阅读Oliver Schondorfer的“用后备Web字体实现可变字体”。Firefox DevTools字体编辑器也支持可变字体和动画。

CSS转换和动画绝对是我需要了解的基础。经常不用,用了就忘语法。幸运的是,MDN上的参考资料帮助了我。我建议从使用CSS转换和CSS动画的指南开始。Zell Liew也有一篇很好的文章,对CSS过渡做了很好的解释。

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

动画的困惑之一是采用哪种方法。除了CSS支持的内容之外,你可能还需要涉及JavaScript、SVG或者Web动画API,这些经常会被混淆。在她的演讲中,选择您的动画冒险记录在事件中,Val Head解释了这些选项。

把查找表当做记忆,而不是学习工具。

当我提到网格或Flexbox资源时,我经常会看到这样的回复:没有特定的快速查找表,Flexbox就无法使用。我觉得用查表作为记忆助手查语法没问题。我自己也发表过一些查找表。完全依赖查找表的问题是,当你复制语法时,你可能会忽略为什么要这样写。然后,当您遇到属性的行为看起来不同的情况时,这种明显的不一致看起来令人困惑或者是语言错误。

如果你发现CSS做了一件很奇怪的事情,要问为什么。创建一个简单的测试用例来强调这个问题,并询问更熟悉规范的人。我被问到的很多CSS问题都是因为人们认为一个属性的表现和它在现实中的表现是不一样的。这就是为什么我经常说对齐和大小,因为这些地方经常混淆。

是的,CSS中有一些奇怪的东西。这是一种经过多年进化的语言,有些事情我们无法改变,除非我们发明了时光机。但是,一旦你掌握了一些基础知识,明白了为什么会这样,你就可以更轻松地处理难题了。



文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:表情:
评论列表 (暂无评论,517人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码