web前端开发初学者如何科学的快速学会CSS？

2021-01-22 16:01:01 浏览数 (2711)

很多前端初学者对 CSS 表示很头大，咨询w3cschool小狮妹”如何学习 CSS “。总结发现一部分原因是由于我们对 CSS 没有很好的认识。虽然 CSS 只是前端工作的一小部分，但是它直接关系到网页最终显示效果，很值得我们去学习。

本文主要概述 CSS 的一些常见基础知识，帮助大家更好的理解 CSS 。

什么是 CSS？

CSS（层叠样式表）——英文 Cascading Style Sheets 的缩写，是一种计算机标记语言，用来表现 HTML （标准通用标记语言的一个应用）或 XML （标准通用标记语言的一个子集）等文件样式。

CSS 知识点太多记不住？

CSS 知识点确实很多，我们只需要学习并理解它的基础知识和原理，需要用到的时候再到w3cschool 查询CSS参考手册，不需要学习完所有的属性和值，但是学习 CSS 要有一些前端基础，如果没有这些基础，您将很难理解它，你可以先在W3Cschool上学习HTML 。这样可以节省大量时间、少走很多弯路。

认识选择器（SELECTORS）

HTML 页面中的元素是通过 CSS 选择器来进行控制的，可以实现一对一，一对多或者多对一的控制，学习 CSS 首先要掌握的就是选择器。一般使用 class 选择器（程序中称“类选择器”），或直接在 body 中使用 HTML 元素(elements) （指的是从开始标签(start tag)到结束标签(end tag)的所有代码。）来设置样式(Style)，但是一些更复杂的操作就需要更高级的选择器来实现了，如一些对象直接位于元素之后，或者是要选择表格中的奇数行，就需要根据元素在文档中的位置来选择元素。

这些选择器属于 CSS3 规范的一部分（你可能听说过它们被称为 CSS3 选择器）具有出色的浏览器支持。有关可以使用的各种选择器的详细信息，请参阅W3Cschool的 CSS 选择器。

有些选择器的行为就好像你已经将“类”（ class）应用于文档中的某些内容一样。例如p:first-child就像你在第一个p元素中添加了一个“类”一样，这些被称为“伪对象选择符”(Pseudo-Element Selectors)。 “伪对象选择符”的作用类似于动态插入元素，例如::first-line的作用与用span 包裹第一行文本类似。但是，如果该行的长度发生变化，它将重新应用，如果插入该元素，就不会出现这种情况。现在你可能会觉得这些选择器很复杂，下面示例中是一个用伪类(Pseudo-class ) 的伪元素(Pseudo Element) 例子。我们使用 :first-child 伪类定位第一个 p 元素，然后 ::first-line 选择器选择该元素的第一行，就好像在第一行周围添加了一个<span>以使其变粗并更改颜色一样。

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>认识CSS选择器（SELECTORS）- 编程狮(w3cschool.cn)</title>
<style type="text/css">
@import url("style/style.css");
</style>
</head>


<body>
<div class="container">
    <p>大学之道，在明明德，在亲民，在止于至善。</p>
    <p>知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始。知所先后，则近道矣。</p>
    <p>古之欲明明德于天下者，先治其国；欲治其国者，先齐其家；欲齐其家者，先修其身；欲修其身者，先正其心；欲正其心者，先诚其意；欲诚其意者，先致其知。致知在格物。物格而后知至，知至而后意诚，意诚而后心正，心正而后身修，身修而后家齐，家齐而后国治，国治而后天下平。自天子以至于庶人，壹是皆以修身为本。</p>
<p>其本乱而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。</p>
</div>
</body>
</html>

CSS代码：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1.7em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 20px;
  column-count: 1;
}


.container p:first-child::first-line {
  font-weight: bold;
  color: rgb(254,106,0);
}

效果：

继承和层叠（INHERITANCE AND THE CASCADE）

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

注意：为了理解这些内容，建议阅读 W3Cschool 中的 CSS 样式级联。

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

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>继承和层叠 - 编程狮(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="container">
    <h1 class="greatlearning">大学</h1>
    <p>大学之道，在明明德，在亲民，在止于至善。</p>
    <p>知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始。知所先后，则近道矣。</p>
    <p>古之欲明明德于天下者，先治其国；欲治其国者，先齐其家；欲齐其家者，先修其身；欲修其身者，先正其心；欲正其心者，先诚其意；欲诚其意者，先致其知。致知在格物。物格而后知至，知至而后意诚，意诚而后心正，心正而后身修，身修而后家齐，家齐而后国治，国治而后天下平。自天子以至于庶人，壹是皆以修身为本。</p>
<p>其本乱而末治者，否矣。其所厚者薄，而其所薄者厚，未之有也。</p>
</div>
</body>
</html>

CSS代码：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1.7em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 20px;
  column-count: 1;
}


.greatlearning {
  color: rebeccapurple;
}


h1 {
  color: orange;
}

效果：

盒模型（Box Model ）

css将html元素看作一个个盒子，来设计和布局。盒子有它们的属性，盒子之间也可嵌套。标准的 CSS 盒模型 (CSS Box Model) 采用你给定元素的宽度，然后将内边框和边框添加到该宽度上——这意味着元素占用的空间大于给定的宽度。

属性：margin、padding、border、content
根据display属性值的不同，如，block\\\\\\\\inline-block\\\\\\\\inline（默认），可设置为块模型\\\\\\\\内联块模型\\\\\\\\内联模型
分类：标准模型、IE模型（替代盒子模型）

除了标准盒子模型外还有一个盒子模型叫 IE 模型（替代盒子模型），盒子的宽度是页面上可见框的宽度，因此内容区域的宽度是该宽度减去填充和边框的宽度。详细请查阅W3Cschool上的CSS Box Model (盒子模型) 。

下面演示两个盒子，两者的宽度均为200像素，边框为1像素，内边距为20像素。第一个框使用标准盒子模型，因此占用总宽度为 242 像素，第二个框使用替代盒子模型，因此实际上是 200 像素宽。

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 盒模型 -编程狮(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="box">
    我是标准盒子模型。
</div>


<div class="box box2">
    我是替代盒子模型。
</div>
</body>
</html>

CSS代码：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


p {
  margin: 0 0 1em 0;
}


.box {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 20px;
  width: 200px;
  margin-bottom: 2em;
}


.box2 {
  box-sizing: border-box;
}

效果：

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

DevTools可帮助您了解为什么盒具有一定大小以及所使用的盒模型

注意：在 IE8 以前，如果想要兼容的话，就需要用 W3C 标准，声明。在 IE8+ ，浏览器中使用哪个盒模型可以由 box-sizing 控制，默认值为 content-box，即标准盒模型。

在 W3Cschool的 CSS Box Model 中，有关于盒模型、盒子尺寸详细说明。

常规流（normal flow）

也有人翻译为“文档流”，具体叫什么名字不重要，我们理解它的原理就行了。标题和段落将以新行开始，单词显示为句子，并且它们之间只有一个空格。用于格式化的标签（例如em）不会破坏句子流。此内容以“常规流(normal flow)”或“块流布局(Block Flow Layout)”显示。内容的每个部分都被描述为“在流中(in flow)”；它知道其余内容，因此不会重叠。

我们要接受这种行为，学起来才会变得更加轻松。这是为什么从一个正确标记的HTML文档开始很有意义的原因之一，由于浏览器遵守常规流和内置样式表，你的内容从可读的地方开始。

格式化上下文（FORMATTING CONTEXTS）

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

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

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

在W3Cschool的 CSS display显示上阅读更多关于 display的信息。

在流中或脱离流（BEING IN OR OUT OF FLOW）

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

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

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS flow - 编程狮(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="container">

  
    <p>子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</p>
    <p>有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”</p>
    <p>子曰:“巧言令色，鲜矣仁！”</p>
    <p>曾子曰“吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?”</p>
    <p>子曰:“道千乘之国,敬事而信，节用而爱人，使民以时。”</p>
    <p>子曰：“弟子入则孝，出则弟，谨而信，泛爱众，而亲仁。行有余力，则以学文。”</p>
    <p>子夏曰：“贤贤易色；事父母，能竭其力；事君，能致其身；与朋友交，言而有信。虽曰未学，吾必谓之学矣。”</p>
    <p>子曰：“君子不重则不威，学则不固。主忠信，无友不如己者，过则勿惮改。”</p>
    <p>曾子曰：“慎终追远，民德归厚矣。”</p>
    <p>子禽问于子贡曰：“夫子至于是邦也，必闻其政，求之与，抑与之与？”子贡曰：“夫子温、良、恭、俭、让以得之。夫子之求之也，其诸异乎人之求之与？”</p>
    <p>子曰：“父在，观其志。父没，观其行；三年无改于父之道，可谓孝矣。”</p>
    <p>有子曰：“礼之用，和为贵。先王之道，斯为美，小大由之。有所不行，知和而和，不以礼节之，亦不可行也。”</p>
    <p>有子曰：“信近于义，言可复也。恭近于礼，远耻辱也。因不失其亲，亦可宗也。”</p>
    <p>子曰：“君子食无求饱，居无求安，敏于事而慎于言，就有道而正焉。可谓好学也已。”</p>
    <p>子贡曰：“贫而无谄，富而无骄，何如？”子曰：“可也。未若贫而乐，富而好礼者也。”子贡曰：“《诗》云：‘如切如磋，如琢如磨’，其斯之谓与？”子曰：“赐也，始可与言《诗》已矣，告诸往而知来者。”</p>
    <p>子曰：“不患人之不己知，患不知人也。”</p>

  
    <div class="item">绝对定位和脱离流。</div>
</div>
</body>
</html>

CSS代码：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  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(254,106,0,.9);
  color: #fff;
  padding: 20px;
  width: 200px;
}

效果：

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

HTML代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS flow - 编程狮(w3cschool.cn)</title>
<link rel="stylesheet" href="./style.css">
</head>


<body>
<div class="container">


    <div class="item">浮动和脱离流</div>  
    <p>子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</p>
    <p>有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”</p>
    <p>子曰:“巧言令色，鲜矣仁！”</p>
    <p>曾子曰“吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?”</p>
    <p>子曰:“道千乘之国,敬事而信，节用而爱人，使民以时。”</p>
    <p>子曰：“弟子入则孝，出则弟，谨而信，泛爱众，而亲仁。行有余力，则以学文。”</p>
    <p>子夏曰：“贤贤易色；事父母，能竭其力；事君，能致其身；与朋友交，言而有信。虽曰未学，吾必谓之学矣。”</p>
    <p>子曰：“君子不重则不威，学则不固。主忠信，无友不如己者，过则勿惮改。”</p>
    <p>曾子曰：“慎终追远，民德归厚矣。”</p>
    <p>子禽问于子贡曰：“夫子至于是邦也，必闻其政，求之与，抑与之与？”子贡曰：“夫子温、良、恭、俭、让以得之。夫子之求之也，其诸异乎人之求之与？”</p>
    <p>子曰：“父在，观其志。父没，观其行；三年无改于父之道，可谓孝矣。”</p>
    <p>有子曰：“礼之用，和为贵。先王之道，斯为美，小大由之。有所不行，知和而和，不以礼节之，亦不可行也。”</p>
    <p>有子曰：“信近于义，言可复也。恭近于礼，远耻辱也。因不失其亲，亦可宗也。”</p>
    <p>子曰：“君子食无求饱，居无求安，敏于事而慎于言，就有道而正焉。可谓好学也已。”</p>
    <p>子贡曰：“贫而无谄，富而无骄，何如？”子曰：“可也。未若贫而乐，富而好礼者也。”子贡曰：“《诗》云：‘如切如磋，如琢如磨’，其斯之谓与？”子曰：“赐也，始可与言《诗》已矣，告诸往而知来者。”</p>
    <p>子曰：“不患人之不己知，患不知人也。”</p>

  
</div>
</body>
</html>

CSS代码：

body {
  padding: 20px;
  font: 1em Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,arial,sans-serif;
  background-color: wheat;
}


* {box-sizing: border-box;}


p {
  margin: 0 0 1em 0;
}


.container {  
  border: 1px solid rgb(254,106,0);
  border-radius: .5em;
  padding: 10px;
  max-width: 500px;
}


.item {
  border-radius:.5em;
  float: left;
   background-color: rgba(254,106,0,.9);
  color: #fff;
  padding: 20px;
  width: 100px;
  margin: 10px;
}


.container p:nth-of-type(1) {
  background-color: yellow;
}

效果：

注意： 需要记住的重要一点是，如果从流中取出一个元素，则需要自己管理重叠，因为块流布局的常规规则不再适用。

布局（Layout）

过去我们们在 HTML 中一般使用 CSS 进行布局，常见的布局有：单列布局、两列自适应布局、圣飞布局和双飞翼布局、伪等高布局、粘连布局。重点介绍下 Flex 布局和 grid 布局：

Flex布局

Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

//html部分同上
.parent {
    display:flex;
}  
.right {
    margin-left:20px; 
    flex:1;
}

推荐W3Cschool上的的Flexbox布局基础入门，可以更好的帮你掌握Flex。

grid布局

Grid 布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计。

//html部分同上
.parent {
    display:grid;
    grid-template-columns:auto 1fr;
    grid-gap:20px
}

对齐（Alignment）

大多数人都会把对齐（Alignment）当作 Flexbox 的一部分，但是这些属性适用于所有布局方法值得在这种情况下理解它们，而不是考虑“ Flexbox Alignment”或“ Flexbox Alignment” “ CSS网格对齐。” 我们有一组Alignment属性，它们在可能的情况下可以以一种通用的方式工作。然后，由于不同的布局方法的行为方式，它们会有一些差异。

尺寸（Sizing）

在 web 上，我们习惯用长度或百分比来设置尺寸，这就是我们如何使用浮动来制作网格类型布局的方法。然而，现代的布局方法可以为我们做很多空间分配——如果我们允许的话。值得花时间去了解 Flexbox 如何分配空间(或 Grid fr 单元如何工作)。

响应式设计（Responsive Design）

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

字体和排版

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

为了探索可变字体和它们的功能，微软提供了一个有趣的演示，以及一些尝试可变字体的游乐场 - Axis Praxis是最知名的（我也喜欢字体游乐场）。

MDN上的指南将证明一开始使用可变字体是非常有用的。要了解如何为不支持可变字体的浏览器实现回退解决方案，请阅读 Oliver Schondorfer的《使用回退Web字体实现可变字体》Firefox DevTools字体编辑器还支持使用可变字体。

变形和动画

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

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

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

使用参考手册

在使用 Grid 或 Flexbox 很多人会很依赖w3cschool上的CSS参考手册，如果没有参考手册就没法工作。这是没有问题的，前面我们也提到可以合理的利用参考手册来提升开发效率，但是前提是得先理解透原理。否则我们在复制语法时，可能会忽略为什么要这样写。然后，当遇到该属性似乎表现不同的情况时，这种明显的不一致会令人困惑找不出问题出在哪。

CSS 是一门经过多年进化的语言，一直在更新，如果是把自己当成学习者的心态来学习的话，永远也是学不完的。然而，一旦你把基础知识及底层原理打牢了以后，你就可以很轻松的面对各种变化了。如果要系统的学习前端推荐学习W3Cschool上的从0基础到前端开发课程。

以上就是编程狮为你整理的关于web前端开发初学者如何科学的快速学会CSS？的全部内容，希望给对css望而生畏初学者有所帮助，如果你有更好的学习方法欢迎分享~

w3cschool 编程狮，随时随地学编程

web前端开发初学者如何科学的快速学会CSS？

什么是 CSS？

CSS 知识点太多记不住？

认识选择器（SELECTORS）

继承和层叠（INHERITANCE AND THE CASCADE）

盒模型（Box Model ）

常规流（normal flow）

格式化上下文（FORMATTING CONTEXTS）

在流中或脱离流（BEING IN OR OUT OF FLOW）

布局（Layout）

对齐（Alignment）

尺寸（Sizing）

响应式设计（Responsive Design）

字体和排版

变形和动画

使用参考手册