警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>HTML/CSS>如何有效的学习 CSS

如何有效的学习 CSS

原创2019-05-19HTML/CSS3924 次阅读 · 读完需要 14 分钟。

很多人想让我给他们推荐有关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选择器选择该元素的第一行,就好像在第一行周围添加了一个<span>以使其变为粗体和改变颜色。

See the Pen
first-line of first-child
by rachelandrew (@rachelandrew)
on CodePen.

继承和层叠

层叠是指当元素应用了多个样式规则,哪个规则优先应用。 如果你曾经遇到过无法理解为什么某些CSS似乎没有应用的情况,那可能是层叠没有运用好。 层叠与继承紧密相关,继承定义了子元素可以继承父元素的样式属性。 它还与特异性有关,不同的选择器具有不同的特异性,当有几个选择器可以应用于一个元素时,继承可以决定应用哪个规则。

注意:为了理解所有这些内容,我建议阅读MDN CSS简介中的 层叠和继承

如果你正在尝试将一些CSS应用于一个元素,那么你的浏览器开发者工具是开始最好的地方。看看下面的例子,我用元素选择器 h1 将 h1 标题设置为橙色。同时,我也使用类选择器设置h1 设置为紫色。 由于类更具体,因此h1是紫色的。 在开发者工具中,您可以看到元素选择器被划掉,因为它没有被应用。 一旦你看到浏览器正在获取你的CSS(但其他东西已经推翻了它),那么你可以开始找出原因。

See the Pen
specificity
by rachelandrew (@rachelandrew)
on CodePen.

盒模型

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

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

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

See the Pen
box models
by rachelandrew (@rachelandrew)
on CodePen.

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

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

CSS Tricks 里,有关于盒模型和盒子尺寸的很好的解释,并解释了在你的网站中全局使用IE盒模型的最佳方法。

标准流

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

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

格式化上下文

一旦文档的内容处于正常流程中,您可能希望更改其中一些内容的外观。 你可以通过更改元素的格式上下文来完成此操作。 举个一个非常简单的示例,如果你希望所有段落连在一起而不是从新行开始,你可以设置 p 元素的样式属性display:inline ,将 p 元素由块级元素变成内联元素。

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

注意:最新版本的Display规范改变了 display 的值,显式声明外部和内部的类型。因此,将你可能会声明 display:block flex; (外部为 block,内部为 flex

在 MDN 上阅读更多关于 display的信息

进入或离开流

CSS中的元素被描述为“在流中”或“脱离流”。流中的元素被赋予空间,并且空间被流中的其他元素所影响。 如果通过浮动或定位元素使元素脱离流,则该元素的空间将不再受到其他流元素的影响。

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

See the Pen
out of flow: abspos
by rachelandrew (@rachelandrew)
on CodePen.

然而,浮动元素也会从流中脱离,但后面的元素的文本将环绕该浮动元素。你可以设置后面元素的背景颜色,你会看到他们会上升并占用了原来浮动元素原来的空间。

See the Pen
Out of flow: floated
by rachelandrew (@rachelandrew)
on CodePen.

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

布局

十五年来,我们一直使用CSS布局,但没有设计一套布局系统。这已经改变了。 我们现在拥有功能完备的布局系统,其中包括 Grid 和 Flexbox ,还有多列布局和旧布局方法也应用于实际目的。如果你想对CSS布局还不熟悉,你可以阅读 MDN 上的布局教程,或阅读我发表在Smashing杂志上的文章 《开始学习CSS布局》。

不要认为grid和flexbox等方法在某种程度上是竞争的。为了更好地使用布局,你有时会发现组件最好作为 flex ,有时作为 Grid。有时,你想要多列流动布局。所有这些都是不错的选择。如果你觉得自己在与某些事物的行为方式作斗争,这通常是一个非常好的迹象,表明它可能值得退一步,尝试一种不同的方法。我们已经习惯了在CSS上做一些我们想做的事情,以至于我们可能会忘记我们还有很多其他的选择可以尝试。

布局是我的主要专业领域,我在Smashing Magazine和其他地方写了很多文章,试图开拓新的布局美化。 除了上面提到的布局文章,我在Flexbox上有一整套系列 – 《从创建Flex 容器时,发生了什么》。 在 Grid示例 上,我列出很多CSS Grid 的例子 — 以及一个视频教程。

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

对齐

通常,我会将对齐和布局分开,虽然大多数人把对齐当作 Flexbox的一部分。对齐这些属性适用于所有布局方法上,应该在上下文去理解对齐,而不是考虑 “Flexbox对齐”或“CSSGrid 对齐”。对齐属性在大体上表现一样,但不同布局方式里会有一些差异。

在MDN上,您可以深入了解 盒对齐 及其在Grid,Flexbox,多列和块布局中的实现方式。 在Smashing Magazine上,我有一篇文章专门介绍Flexbox中的对齐方式:你需要知道的有关Flexbox中对齐的所有内容

尺寸

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

在Smashing Magazine上,我写了一些关于 布局中的尺寸 的文章,也写了一些关于Flexbox的文章,比如 Flex 盒子有多大?

响应式设计

通常,新的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 Animation API,而这些事情往往都会被混为一谈。 在她的演讲中,选择你的动画冒险记录在事件中,Val Head解释了这些选项。

使用速查表作为回忆,而不是学习工具

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

如果你发现CSS在做一些非常奇怪的事情的情况下,问问为什么。创建一个简单的测试用例来强调这个问题,问问对规范更熟悉的人。我被问到的许多CSS问题都是因为人们认为属性的表现与它在现实中的表现不同。这就是为什么我经常讨论关于对齐和尺寸,因为这些地方经常会混淆。

是的,CSS中有一些奇怪的东西。它是一门经过多年进化的语言,有些东西我们无法改变,除非我们发明了时间机器。然而,一旦你掌握了一些基础知识,并且理解了为什么会这样,你就可以更轻松地处理棘手的问题。

来源:https://www.smashingmagazine.com

赞(1566) 打赏
未经允许不得转载:W3Cbest前端开发>如何有效的学习 CSS

相关推荐

发表评论