大家好，我是零一。前段时间我在知乎刷到这样一个提问：为什么 CSS 这么难学？
知乎某用户提问
看到这个问题以后，我仔细一想，CSS 学习起来好像是挺困难的，它似乎没有像 JavaScript 那样非常系统的学习大纲，大家平时也不会用到所有的 CSS，基本上用来用去就是那么几个常用的属性，甚至就连很多培训机构的入门教学视频都也只会教你一些常用的 CSS（不然你以为一个几小时的教学视频怎么能让你快速入门 CSS 的呢？）
一般别人回答你 CSS 很好学也是因为它只用那些常用的属性，他很有可能并没有深入去了解。要夸张一点说，CSS 应该也能算作一门小小的语言了吧，深入研究进去，知识点也不少。我们如果不是专门研究 CSS 的，也没必要做到了解 CSS 的所有属性的使用以及所有后续新特性的语法，可以根据工作场景按需学习，但要保证你学习的属性足够深入~
那么我们到底该如何学习 CSS 呢？ 为此我列了一个简单的大纲，想围绕这几点大概讲一讲
CSS 学习大纲
这应该是大家学习 CSS 最常见的方式了（我亦如此）。有以下几个场景：
场景一：开发中遇到「文本字数超出后以省略号(...)展示」的需求，打开百度搜索：css 字数过多用省略号展示，诶~搜到了！ctrl+c、ctrl+v，学废了，完工！
搜索引擎学习法
场景二：某天早晨逛技术社区，看到一篇关于 CSS 的文章，看到标题中有个 CSS 属性叫 resize，resize 属性是啥，我咋没用过？点进去阅读得津津有味~ two minutes later ~ 奥，原来还有这个属性，是这么用的呀，涨姿势了！
社区博客学习法
场景三：我决定了，我要好好学 CSS，打开购物网站搜索：CSS 书籍，迅速下单！等书到了，开始每天翻阅学习。当然了此时又有好几种情况了，分别是：
- 就只有刚拿到书的第一天翻阅了一下，往后一直落灰
- 看了一部分，但又懒得动手敲代码，最终感到无趣放弃了阅读
- 认认真真看完了书，也跟着书上的代码敲了，做了很多笔记，最终学到了很多
无论是上面哪几种方式，我觉得都是挺不错的，顺便再给大家推荐几个不错的学习资源
- 张鑫旭大佬的博客[1]
- 大漠老师的 W3Cplus[2]
- coco 大佬的 iCSS[3]
毕竟站在巨人的肩膀上，才是最高效的，你们可以花 1 个小时学习到大佬们花 1 天才总结出来的知识
CSS 比较难学的另一个点，可能多半是因为 CSS 的属性太多了，而且每个属性的值又支持很多种写法，所以想要轻易记住每个属性的所有写法几乎是不太可能的。最近在逛博客时发现原来 CSS 也有自己的数据类型，这里引用一下张鑫旭大佬的 CSS 值类型文档大全[4]，方便大家后续查阅
简单介绍一下 CSS 的数据类型就是这样的：
CSS 数据类型
图中用<>括起来的表示一种 CSS 数据类型，介绍一下图中几个类型：
来看两个 CSS 属性：
从这个例子中我们可以看出，想要尽可能得记住更多的 CSS 属性的使用，可以从记住 CSS 数据类型（现在差不多有 40+种数据类型）开始，这样你每次学习新的 CSS 属性时，思路就会有所转变，如下图
没记住 CSS 数据类型的我：
之前的思想
记住 CSS 数据类型的我：
现在的思想
不知道你有没有发现，如果文档只告诉你 background-position 支持数据类型，你确定你能知道该属性的全部用法吗？你确实知道该属性支持 background-position: 3rem 这样的写法，因为你知道数据类型包含了数据类型，但你知道它还支持 background-position: bottom 50px right 100px;这样的写法吗？为什么可以写四个值并且用空格隔开？这是谁告诉你的？
这就需要我们了解 CSS 的语法了，请认真看下一节
我之前某个样式中需要用到裁剪的效果，所以准备了解一下 CSS 中的 clip-path 属性怎么使用，于是就查询了比较权威的 clip-path MDN[5]，看着看着，我就发现了这个
clip-path 语法
我这才意识到我竟然连 CSS 的语法都看不懂。说实话，以前无论是初学 CSS 还是临时找一下某个 CSS 属性的用法，都是直接百度，瞬间就能找到自己想要的答案（例如菜鸟教程），而这次，我是真的傻了！ 因为本身 clip-path 这个属性就比较复杂，支持的语法也比较多，光看 MDN 给你的示例代码根本无法 Get 到这个属性所有的用法和含义（菜鸟教程就更没法全面地教你了）
于是我就顺着网线去了解了一下 CSS 的语法中的一些符号的含义，帮助我更好得理解语法。
因为关于 CSS 语法符号相关的知识在 CSS 属性值定义语法 MDN[6]上都有一篇超级详细的介绍了，所以我就不多做解释了，这里只放几个汇总表格：
1. 属性组合符号
属性组合：表示多个属性值的书写组合情况。例如在 border: 1px solid #000 中，1px 能否和 solid 互换位置、#000 能否省略等等，这些都是属性的组合情况
2. 组合符优先级
“与”组合符、“或”组合符、“互斥”组合符都是为了表示属性值出现的情况，但这三者之间还有个优先级。例如 bold | thin || ，其中“或”组合符的优先级高于“互斥”组合符，所以该写法等价于 bold | [thin || ]
3. 属性重复符号
属性重复：表示某个或某些属性的出现次数。例如在 rgba(0, 0, 0, 1)中，数字的个数能否是 3 个、最后一位能否写百分比。这有些类似于正则的重复符号
4. 解读 CSS 语法
以本节 clip-path 的语法为例，我们来简单对其中某一个属性来进行解读（只会解读部分哦，因为解读全部的话篇幅会很长很长）
先看看整体的结构
clip-path 的语法
一共分为四部分，顺序是从上到下的，每两个部分之间都以 where 来连接，表示的是 where 下面的部分是对上面那个部分的补充解释
①：表示的是clip-path这个属性支持的写法为：要不只写数据类型的值，要不就最起码从和这两者之间选一种类型的值来写，要不就为none。
②：我们得知①中的数据类型支持的写法为：inset()、circle()、ellipse()、polygon()、path()这5个函数
③：因为我们想了解circle()这个函数的具体使用，所以就先只看这个了。我们得知circle()函数的参数支持和两种数据结构，且两者都是可写可不写，但如果要写 ，那前面必须加一个at
④：首先看到支持的属性是 （这个顾名思义就是和）、closest-side、farthest-side。而数据类型的语法看起来就比较复杂了，我们单独来分析，因为真的非常非常长，我将格式化并美化好给你展现出来，便于你们阅读（我也建议你们如果在学习某个属性的语法时遇到这么长的语法介绍，也像我一样把它格式化一下，这样方便你们阅读和理解）
数据类型的语法
如图可得，整体分为三大部分，且这三部分是互斥关系，即这三部分只能出现一个，再根据我们前面学习的 CSS 语法的符号，就可以知道怎么使用了，因为这里支持的写法太多了，我直接列个表格吧（其实就是排列组合）！如果还有不懂的，你们可以仔细阅读一下 MDN 的语法介绍或者也可以评论区留言问我，我看到会第一时间回复！
<position>类型支持的写法：
嚯！累死我了，这支持的写法也太多太多了吧！
上一节，我们在学习 clip-path 属性的语法以后，知道了我们想要的圆圈裁剪（circle()）的语法怎么写，那么你就真的会了吗？可能你看了 MDN 给你举的例子，知道了 circle(40%)大致实现的效果是咋样的，如下图
MDN clip-path 的简单案例
如我前文说的一样，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(40%)
再修改一下值 clip-path: circle(60%)，看看效果
clip-path: circle(60%)
我似乎摸出了规律，看样子是以元素的中心为基准点，60%的意思就是从中心到边缘长度的 60%为半径画一个圆，裁剪掉该圆之外的内容。这些都是 MDN 文档里没有讲到的，靠我亲手实践验证出来的。
接下来我们来试试其它的语法~
试试将值改成 clip-path: circle(40% at top)
clip-path: circle(40% at top)
诶？很神奇！为什么会变成这个样子，我似乎还没找到什么规律，再把值改一下试试 clip-path: circle(80% at top)
clip-path: circle(80% at top)
看样子圆心挪到了元素最上方的中间，然后以圆心到最下面边缘长度的 80%为半径画了个圆进行了裁剪。至此我们似乎明白了 circle()语法中 at 后面的数据类型是干什么的了，大概就是用来控制裁剪时画的圆的圆心位置
剩下的时间就交给你自己来一个一个试验所有的语法了，再举个简单的例子，比如你再试一下 clip-path: circle(40% at 30px)，你一定好奇这是啥意思，来看看效果
clip-path: circle(40% at 30px)
直观上看，整个圆向左移动了一些距离，在我们没设置 at 30px 时，圆心是在元素的中心的，而现在似乎向右偏移了，大胆猜测 at 30px 的意思是圆心的横坐标距离元素的最左侧 30px
接下来验证一下我们的猜测，继续修改其值 clip-path: circle(40% at 0)
clip-path: circle(40% at 0)
很明显此时的圆心是在最左侧的中间部分，应该可以说是证明了我们刚才的猜测了，那么不妨再来验证一下纵坐标的？继续修改值 clip-path: circle(40% at 0 0)
clip-path: circle(40% at 0 0)
不错，非常顺利，at 0 0 中第二个 0 的意思就是圆心纵坐标离最上方的距离为 0 的意思。那么我们此时就可以放心得出一个结论了，对于像 30px、33em 这样的数据类型的值，其对应的坐标是如图所示的
坐标情况
好了，本文篇幅也已经很长了，我就不继续介绍其它语法的使用了，刚才纯粹是用来举个例子，因为本文我们本来就不是在介绍 circle()的使用教程，感兴趣的读者可以下去自己动手实践哦~
所以实践真的很重要很重要！！MDN 文档没有给你列举每种语法对应的效果，因为每种都列出来，文档看着就很杂乱了，所以这只能靠你自己。记得张鑫旭大佬在一次直播中讲到，他所掌握的 CSS 的特性，也都是用大量的时间去动手试出来的，也不是看看啥文档就能理解的，所以你在大佬们的一篇文章中了解到的某个 CSS 属性的使用，可能是他们花费几小时甚至十几个小时研究出来的。
CSS 很多特性会有兼容性问题，因为市面上有很多家浏览器厂商，它们支持的程度各不相同，而我们平常了解 CSS 某个属性的兼容性，是这样的
查看 MDN 的某个属性的浏览器兼容性
clip-path 的浏览器兼容性
通过 Can I Use[7]来查找某个属性的浏览器兼容性
can i use
这些都是正确的，但有时候可能某些 CSS 属性的浏览器兼容性都无法通过这两个渠道获取到，那么该怎么办呢？手动试试每个浏览器上该属性的效果是否支持呗（鑫旭大佬说他以前也会这么干），这点我就不举例子了，大家应该能体会到
其实每个 CSS 大佬都不是因为某些快捷的学习路径而成功的，他们都是靠着不断地动手尝试、记录、总结各种 CSS 的知识，也会经常用学到的 CSS 知识去做一个小 demo 用于巩固，前几个月加了大漠老师的好友，我就经常看到他朋友圈有一些 CSS 新特性的 demo 演示代码和文章（真心佩服），coco 大佬也是，也经常会发一些单纯用 CSS 实现的炫酷特效
另外，如果想要更加深入，你们还可以关注一下 CSS 的规范，这个比较权威的就是 W3C 的 CSS Working Group[8]了，里面有很多 CSS 的规范文档：
w3c css 规范
好了，再推荐几本业界公认的还算不错的书籍吧~例如《CSS 权威指南》、《CSS 揭秘》、《CSS 世界》、《CSS 新世界》等等...
最后对于「如何学习 CSS？」这个话题，你还有什么问题或者你觉得还不错的学习方法吗？欢迎在评论区留言讨论~
我是零一，分享技术，不止前端，喜欢就给我的文章点个赞吧，感谢你们的支持！！
参考资料
- [1]张鑫旭大佬的博客: https://www.zhangxinxu.com/
- [2]W3Cplus: https://www.w3cplus.com/
- [3]iCSS: https://github.com/chokcoco/iCSS
- [4]CSS 值类型文档大全: https://www.zhangxinxu.com/wordpress/2019/11/css-value-type/
- [5]clip-path MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
- [6]CSS 属性值定义语法 MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax
- [7]Can I Use: https://caniuse.com/
- [8]CSS Working Group: https://www.w3.org/Style/CSS/current-work
欢迎关注作者微信公众号：「前端印象」
复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。
土拨鼠
6918.8w人气 1856文章
发评论！每天赢奖品
点击 登录 后，在评论区留言，系统会随机派送奖品
2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助 联系我们
优设私房课无门槛优惠券
已累计诞生 520 位幸运星
发表评论 已发布3条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓