如何学习 CSS - 网站源码_资源分享

（给后端六本加星标，提升后端专业技能）

英语：rachel-andrew 原文：廖泽恩

https://zhuanlan.zhihu.com/p/57994014

许多乡下人让我给他们推荐相关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原素中加进了一个类一样，那些被称作 regardless示例。伪原素示例就像静态填入一个原素一样，例如::first-line的表现与用span 包裹第一行文本类似。但是，如果该行的长度发生变化，它将重新应用，如果填入该原素则不会出现这种情况。那些示例可能会相当复杂。在下面的CodePen中是一个用regardless链接的伪原素的例子。我们采用:first-childregardless定位第二个p原素，然后::first-line示例优先选择该原素的第一行，就好像在第一行周围加进了一个<span>以使其变为粗体和改变颜色。

<divclass=“container”><p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p></div>body { padding:20px; font:1emHelveticaNeue,Helvetica,Arial, sans–serif;}*{box–sizing: border–box;}p {margin:001em0;}.container { border:5px solid rgb(111,41,97); border–radius:.5em; padding:10px; column–count:2;}.container p:first–child::first–line { font–weight: bold; color: rgb(111,41,97);}继承和层叠

层叠是指当原素应用了多个式样准则，哪个准则优先应用。如果你曾经遇到过无法认知为什么这类CSS似乎没有应用的情况，那可能是层叠没有运用好。层叠与继承紧密相关，继承定义了子原素能继承父原素的式样特性。它还与特异性相关，不同的示例具有不同的特异性，当有几个示例能应用于一个原素时，继承能决定应用哪个准则。

注意：为了认知所有那些文本，我建议阅读MDN CSS简介中的层叠和继承。

如果你正在尝试将许多CSS应用于一个原素，那么你的应用程序开发者工具是开始最好的地方。看看下面的例子，我用原素示例 h1 将 h1 副标题增设为橙色。同时，我也采用类示例增设h1 增设为紫色。由于类更具体，因此h1是紫色的。在开发者工具中，您可

<divclass=“container”><h1class=“veggies”>I like veggies</h1><p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p></div>body { padding:20px; font:1emHelveticaNeue,Helvetica,Arial, sans–serif;}*{box–sizing: border–box;}p { margin:001em0;}.container { border:5pxsolid rgb(111,41,97); border–radius:.5em; padding:10px;}.veggies { color: rebeccapurple;}h1 { color: orange;} 如何学习 CSS

盒模型

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

最近，我们早已能够优先选择采用IE盒模型，使得原素上的给定宽度作为萤幕上可见原素的宽度。任何内边距或边框都会从边缘填入框的文本。这对许多布局更有意义。

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

<divclass=“box”>

I use the standard box model.

</div><divclass=“box box2”>

I use the alternate box model.

</div>body{ padding:20px; font:1emHelveticaNeue,Helvetica,Arial, sans–serif;}p { margin:001em0;}.box { border:5pxsolid rgb(111,41,97); border–radius:.5em; padding:20px; width:200px; margin–bottom:2em;}.box2 { box–sizing:border–box;}

应用程序开发者工具能再次帮助你了解正在采用的盒子模型。在下图中，我采用火狐应用程序的开发者工具采用默认的文本框框模型检查框。工具告诉我这是正在采用的盒模型，我能看到大小以及怎样将边框和内边框加进到指定的宽度。

如何学习 CSS

注意：在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 ，该原素会从流中脱离，你须要确保这个原素不会与流中的原素重叠，且不影响你布局的其它部份的可读性。

I am absolutely positioned and out of flow.

</div></div>body { padding:20px; font:1emHelveticaNeue,Helvetica,Arial, sans–serif;}*{box–sizing: border–box;}p { margin:001em0;}.container { border:5px solid rgb(111,41,97); border–radius:.5em; padding:10px; column–count:2; max–width:400px; position: relative;}.item { border–radius:.5em; position: absolute; top:10px; left:20px; background–color: rgba(111,41,97,.9); color:#fff; padding:20px; width:200px;}

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

<divclass=“container”><divclass=“item”>

I am floated and out of flow.

</div><p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p><p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p><p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p><p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p></div>body { padding:20px; font:1emHelveticaNeue,Helvetica,Arial, sans–serif;}*{box–sizing: border–box;}p { margin:001em0;}.container { border:5pxsolid rgb(111,41,97); border–radius:.5em; padding:10px; max–width:500px;}.item { border–radius:.5em;float: left; background–color: rgba(111,41,97,.9); color:#fff; padding:20px; width:100px; margin:10px;}.container p:nth–of–type(1){ background–color: yellow;}

你能在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解释了那些选项。