大家好，我是 零一 。前段时间我在知乎刷到这样一个发问： 为什么 CSS 这么难学？
看到这个问题当前，我认真一想，CSS 学习起来如同是挺艰难的，它仿佛没有像 JavaScript 那样十分零碎的学习纲要，大家平时也不会用到所有的 CSS，基本上用来用去就是那么几个罕用的属性，甚至就连很多培训机构的入门教学视频都也只会教你一些罕用的 CSS（不然你认为一个几小时的教学视频怎么能让你疾速入门 CSS 的呢？）
个别他人答复你 CSS 很好学也是因为它只用那些罕用的属性，他很有可能并没有深刻去理解。要夸大一点说，CSS 应该也能算作一门小小的语言了吧，深入研究进去，知识点也不少。咱们如果不是专门钻研 CSS 的，也没必要做到理解 CSS 的所有属性的应用以及所有后续新个性的语法，能够依据工作场景按需学习，但要保障你学习的属性足够深刻~
那么咱们到底该如何学习 CSS 呢？ 为此我列了一个简略的纲要，想围绕这几点大略讲一讲
一、书籍、社区文章
这应该是大家学习 CSS 最常见的形式了（我亦如此）。有以下几个场景：
场景一 ：开发中遇到「文本字数超出后以省略号(…) 展现」的需要，关上百度搜寻：css 字数过多用省略号展现，诶~ 搜到了！ctrl+c、ctrl+v，学废了，竣工！
场景二 ：某天晚上逛技术社区，看到一篇对于 CSS 的文章，看到题目中有个 CSS 属性叫resize，resize 属性是啥，我咋没用过？点进去浏览得津津乐道~ two minutes later ~ 奥，原来还有这个属性，是这么用的呀，涨姿态了！
场景三：我决定了，我要好好学 CSS，关上购物网站搜寻：CSS 书籍，迅速下单！等书到了，开始每天翻阅学习。当然了此时又有好几种状况了，别离是：
- 就只有刚拿到书的第一天翻阅了一下，往后始终落灰
- 看了一部分，但又懒得入手敲代码，最终感到无趣放弃了浏览
- 认认真真看完了书，也跟着书上的代码敲了，做了很多笔记，最终学到了很多
无论是下面哪几种形式，我感觉都是挺不错的，顺便再给大家举荐几个不错的学习资源
- 张鑫旭大佬的博客
- 大漠老师的 W3Cplus
- coco 大佬的 iCSS
毕竟站在伟人的肩膀上，才是最高效的，你们能够花 1 个小时学习到大佬们花 1 蠢才总结进去的常识
二、记住 CSS 的数据类型
CSS 比拟难学的另一个点，可能多半是因为 CSS 的属性太多了，而且每个属性的值又反对很多种写法，所以想要轻易记住每个属性的所有写法简直是不太可能的。最近在逛博客时发现原来 CSS 也有本人的数据类型，这里援用一下张鑫旭大佬的 CSS 值类型文档大全，不便大家后续查阅
简略介绍一下 CSS 的数据类型就是这样的：
图中用 <> 括起来的示意一种 CSS 数据类型，介绍一下图中几个类型：
- \<number\>：示意值能够是数字
- \<length\>：示意元素的尺寸长度，例如
3px、33em、34rem - \<percentage\>：示意基于父元素的百分比，例如
33% - \<number-percentage\>：示意值既能够是 \<number\>，也能够是 \<percentage\>
- \<position\>：示意元素的地位。值能够是 \<length\>、\<percentage\>、
left/right/top/bottom
来看两个 CSS 属性：
- 第一个是
width，文档会通知你该属性反对的数据类型有 \<length\> 和 \<percentage\>，那么咱们就晓得该属性有以下几种写法：width: 1px、width: 3rem、width: 33em、width: 33% - 第二个属性是
background-position，文档会通知你该属性反对的数据类型有 \<position\>，那么咱们就晓得该属性有以下几种写法：background-position: left、background-position: right、background-position: top、background-position: bottom、background-position: 30%、background-position: 3rem
从这个例子中咱们能够看出，想要尽可能得记住更多的 CSS 属性的应用，能够从记住 CSS 数据类型（当初差不多有 40+ 种数据类型）开始，这样你每次学习新的 CSS 属性时，思路就会有所转变，如下图
没记住 CSS 数据类型的我：
记住 CSS 数据类型的我：
不晓得你有没有发现，如果文档只通知你 background-position 反对 \<position\> 数据类型，你确定你能晓得该属性的全副用法吗？你的确晓得该属性反对 background-position: 3rem 这样的写法，因为你晓得 \<position\> 数据类型蕴含了 \<length\> 数据类型，但你晓得它还反对 background-position: bottom 50px right 100px; 这样的写法吗？为什么能够写四个值并且用空格隔开？这是谁通知你的？
这就须要咱们理解 CSS 的语法 了，请认真看下一节
三、读懂 CSS 的语法
我之前某个款式中须要用到裁剪的成果，所以筹备理解一下 CSS 中的 clip-path 属性怎么应用，于是就查问了比拟权威的 clip-path MDN，看着看着，我就发现了这个
我这才意识到我居然连 CSS 的语法都看不懂 。说实话，以前无论是初学 CSS 还是长期找一下某个 CSS 属性的用法，都是间接百度，霎时就能找到本人想要的答案（例如菜鸟教程），而这次， 我是真的傻了！ 因为自身 clip-path 这个属性就比较复杂，反对的语法也比拟多，光看 MDN 给你的示例代码根本无法 Get 到这个属性所有的用法和含意（菜鸟教程就更没法全面地教你了）
于是我就顺着网线去理解了一下 CSS 的语法 中的一些符号的含意，帮忙我更好得了解语法
因为对于 CSS 语法符号相干的常识在 CSS 属性值定义语法 MDN 上都有一篇超级具体的介绍了（倡议大家肯定要先看看 MDN 这篇文章！！十分通俗易懂），所以我就不多做解释了，这里只放几个汇总表格
属性组合符号
属性组合 ：示意多个属性值的书写组合状况。例如在border: 1px solid #000 中，1px是否和 solid 调换地位、#000是否省略等等，这些都是属性的组合状况
| 符号 | 名称 | 作用 | ||
|---|---|---|---|---|
| 空格 | 并置 | 空格左右两侧的属性程序不能调换 | ||
| , | 逗号(分隔符) | 逗号两侧的属性之间必须用逗号隔开 | ||
| / | 斜杠(分隔符) | 斜杠两侧的属性之间必须用斜杠隔开 | ||
| && | “ 与 ” 组合符 | “ 与 ” 组合符两侧的属性都必须呈现，但左右程序随便 | ||
| \ | \ | “ 或 ” 组合符 | “ 或 ” 组合符两侧的属性至多呈现一个，且左右程序随便 | |
| \ | “ 互斥 ” 组合符 | “ 互斥 ” 组合符两侧的属性恰好只呈现一个 | ||
| [] | 中括号 | 中括号包住的内容示意一个整体，能够相似看成数学中的小括号() |
组合符优先级
“ 与 ” 组合符、” 或 ” 组合符、” 互斥 ” 组合符都是为了示意属性值呈现的状况，但这三者之间还有个优先级。例如bold | thin || <length>，其中“或”组合符的优先级高于“互斥”组合符，所以该写法等价于bold | [thin || <length>]
| 符号 | 名称 | 优先级（数字越大，优先级越大） | ||
|---|---|---|---|---|
| 空格 | 并置 | 4 | ||
| && | “ 与 ” 组合符 | 3 | ||
| \ | \ | “ 或 ” 组合符 | 2 | |
| \ | “ 互斥 ” 组合符 | 1 |
属性反复符号
属性反复 ：示意某个或某些属性的呈现次数。例如在rgba(0, 0, 0, 1) 中，数字的个数是否是 3 个、最初一位是否写百分比。这有些相似于正则的反复符号
| 符号 | 名称 | 作用 |
|---|---|---|
| 无 | 不写符号 | 默认。不写符号示意这个属性只呈现一次 |
| + | 加号 | 加号左侧的属性或整体呈现一次或屡次 |
| ? | 问号 | 问号左侧的属性或整体呈现零次或一次 |
| * | 星号 | 星号左侧的属性或整体呈现零次或一次或屡次 |
| # | 井号 | 井号左侧的属性或整体呈现一次或屡次，且以逗号 (,) 隔开 |
| {A, B} | 大括号 | 大括号左侧的属性或整体起码呈现 A 次，最多呈现 B 次 |
| ! | 感叹号 | 感叹号左侧的整体中必须呈现一个属性，即便该整体中全副属性都申明了能够呈现零次 |
解读 CSS 语法
以本节 clip-path 的语法为例，咱们来简略对其中某一个属性来进行解读（只会解读局部哦，因为解读全副的话篇幅会很长很长）
先看看整体的构造
一共分为四局部，程序是从上到下的，每两个局部之间都以 where 来连贯，示意的是 where 上面的局部是对下面那个局部的补充解释
①：示意的是 clip-path 这个属性反对的写法为：要不只写 \<clip-source\> 数据类型的值，要不就最起码从 \<basic-shape\> 和 \<geometry-box\> 这两者之间选一种类型的值来写，要不就为none。
②：咱们得悉①中的 \<basic-shape\> 数据类型反对的写法为：inset()、circle()、ellipse()、polygon()、path()这 5 个函数
③：因为咱们想理解 circle() 这个函数的具体应用，所以就先只看这个了。咱们得悉 circle() 函数的参数反对 \<shape-radius\> 和 \<position\> 两种数据结构，且两者都是可写可不写，但如果要写 \<position\>，那后面必须加一个at
④：首先看到 \<shape-radius\> 反对的属性是 \<length-percentage\>（这个顾名思义就是 <length> 和<percentage>）、closest-side、farthest-side。而 \<position\> 数据类型的语法看起来就比较复杂了，咱们独自来剖析，因为真的十分十分长，我将 \<position\> 格式化并丑化好给你展示进去，便于你们浏览（我也倡议你们如果在学习某个属性的语法时遇到这么长的语法介绍，也像我一下把它格式化一下，这样不便你们浏览和了解）
如图可得，整体分为三大部分，且这三局部是互斥关系，即这三局部只能呈现一个，再依据咱们后面学习的 CSS 语法的符号，就能够晓得怎么应用了，因为这里反对的写法太多了，我间接列个表格吧（其实就是排列组合）！如果还有不懂的，你们能够仔细阅读一下 MDN 的语法介绍或者也能够评论区留言问我，我看到会第一工夫回复！
\<position\> 类型反对的写法
| 第一局部 | 第二局部 | 第三局部 |
|---|---|---|
left |
left |
left 30px top 30px 或 top 30px left 30px |
center |
center |
left 30px top 30% 或 top 30% left 30px |
right |
right |
left 30px bottom 30px 或 bottom 30px left 30px |
top |
30% |
left 30px bottom 30% 或 bottom 30% left 30px |
bottom |
3px 或 3em 或 3rem 等长度值 |
left 30% top 30px 或 top 30px left 30% |
left top 或 top left |
left top |
left 30% top 30% 或 top 30% left 30% |
left center 或 center left |
left center |
left 30% bottom 30px 或 bottom 30px left 30% |
left bottom 或 bottom left |
left bottom |
left 30% bottom 30% 或 bottom 30% left 30% |
center center |
left 30% |
right 30px top 30px 或 top 30px right 30px |
right top 或 top right |
left 30px |
right 30px top 30% 或 top 30% right 30px |
right center 或 center right |
center top |
right 30px bottom 30px 或 bottom 30px right 30px |
right bottom 或 bottom right |
center center |
right 30px bottom 30% 或 bottom 30% right 30px |
center bottom |
right 30% top 30px 或 top 30px right 30% |
|
center 30% |
right 30% top 30% 或 top 30% right 30% |
|
center 30px |
right 30% bottom 30px 或 bottom 30px right 30% |
|
right top |
right 30% bottom 30% 或 bottom 30% right 30% |
|
right center |
||
right bottom |
||
right 30% |
||
right 30px |
||
30% top |
||
30% center |
||
30% bottom |
||
30% 30% |
||
30% 30px |
||
30px top |
||
30px center |
||
30px bottom |
||
30px 30% |
||
30px 30px |
嚯！累死我了，这反对的写法也太多太多了吧！
四、多入手尝试
上一节，咱们在学习 clip-path 属性的语法当前，晓得了咱们想要的圆圈裁剪（circle()）的语法怎么写，那么你就真的会了吗？可能你看了 MDN 给你举的例子，晓得了 circle(40%) 大抵实现的成果是咋样的，如下图
如我前文说的一样，MDN 只给你列举了 circle() 这个函数最简略的写法，但咱们刚刚学习了其语法，得悉还有别的写法（例如circle(40% at left)），而且 MDN 文档也只是通知你反对哪些语法，它也并没有明确通知你，哪个语法的作用是怎么样的，能实现什么样的成果。
此时就须要咱们本人上手尝试了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 尝试 clip-path 的 circle()的应用 </title>
<style>
#zero2one {
width: 100px;
height: 100px;
background-color: ;
clip-path: circle(40%); <!-- 等会就在这一行改来改去, 重复尝试！-->
}
</style>
</head>
<body>
<div id="zero2one"></div>
</body>
</html>看一下成果，嗯，跟 MDN 展现的是一样的
再批改一下值clip-path: circle(60%)，看看成果
我仿佛摸出了法则，看样子是以元素的核心为基准点，60%的意思就是从核心到边缘长度的 60% 为半径画一个圆，裁剪掉该圆之外的内容。这些都是 MDN 文档里没有讲到的，靠我亲手实际验证进去的。
接下来咱们来试试其它的语法~
试试将值改成clip-path: circle(40% at top)
诶？很神奇！为什么会变成这个样子，我仿佛还没找到什么法则，再把值改一下试试clip-path: circle(80% at top)
看样子圆心挪到了元素最上方的两头，而后以圆心到最上面边缘长度的 80% 为半径画了个圆进行了裁剪。至此咱们仿佛明确了 circle() 语法中 at 前面的<position> 数据类型是干什么的了，大略就是用来管制裁剪时画的圆的圆心地位
剩下的工夫就交给你本人来一个一个试验所有的语法了，再举个简略的例子，比方你再试一下clip-path: circle(40% at 30px)，你肯定好奇这是啥意思，来看看成果
直观上看，整个圆向左挪动了一些间隔，在咱们没设置 at 30px 时，圆心是在元素的核心的，而当初仿佛向右偏移了，大胆猜想 at 30px 的意思是圆心的横坐标间隔元素的最左侧 30px
接下来验证一下咱们的猜想，持续批改其值clip-path: circle(40% at 0)
很显著此时的圆心是在最左侧的两头局部，应该能够说是证实了咱们方才的猜想了，那么无妨再来验证一下纵坐标的？持续批改值clip-path: circle(40% at 0 0)
不错，十分顺利，at 0 0中第二个 0 的意思就是圆心纵坐标离最上方的间隔为 0 的意思。那么咱们此时就能够释怀得得出一个论断了，对于像 30px、33em 这样的 \<length\> 数据类型的值，其对应的坐标是如图所示的
好了，本文篇幅也曾经很长了，我就不持续介绍其它语法的应用了，方才纯正是用来举个例子，因为本文咱们原本就不是在介绍 circle() 的应用教程，感兴趣的读者能够上来本人入手实际哦~
所以实际真的很重要很重要！！ MDN 文档没有给你列举每种语法对应的成果，因为每种都列出来，文档看着就很芜杂了，所以这只能靠你本人。记得张鑫旭大佬在一次直播中讲到，他所把握的 CSS 的个性，也都是用大量的工夫去入手试出来的，也不是看看啥文档就能了解的，所以你在大佬们的一篇文章中理解到的某个 CSS 属性的应用，可能是他们破费几小时甚至十几个小时钻研进去的。
CSS 很多个性会有兼容性问题，因为市面上有很多家浏览器厂商，它们反对的水平各不相同，而咱们平时理解 CSS 某个属性的兼容性，是这样的
查看 MDN 的某个属性的浏览器兼容性
通过 Can I Use 来查找某个属性的浏览器兼容性
这些都是正确的，但有时候可能某些 CSS 属性的浏览器兼容性都无奈通过这两个渠道获取到，那么该怎么办呢？手动试试每个浏览器上该属性的成果是否反对呗（鑫旭大佬说他以前也会这么干），这点我就不举例子了，大家应该能领会到
☀️ 最初
其实每个 CSS 大佬都不是因为某些快捷的学习门路而胜利的，他们都是靠着一直地入手尝试、记录、总结各种 CSS 的常识，也会常常用学到的 CSS 常识去做一个小 demo 用于坚固，前几个月加了大漠老师的好友，我就常常看到他朋友圈有一些 CSS 新个性的 demo 演示代码和文章（真心拜服），coco 大佬也是，也常常会发一些单纯用 CSS 实现的炫酷特效（据说没有他实现不了的特效哦~）
另外，如果想要更加深刻，你们还能够关注一下 CSS 的标准，这个比拟权威的就是 W3C 的 CSS Working Group 了，外面有很多 CSS 的标准文档
好了，再举荐几本业界公认的还算不错的书籍吧~ 例如《CSS 权威指南》、《CSS 揭秘》、《CSS 世界》、《CSS 新世界》等等 …
最初对于「如何学习 CSS？」这个话题，你还有什么问题或者你感觉还不错的学习办法吗？欢送在评论区留言探讨~
我是 零一 ，分享技术，不止前端，喜爱就给我的文章点个 赞👍🏻吧，感激你们的反对！！
欢送关注我的公众号：前端印象，一起交换技术！