重学前端
程劭非（winter）
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后，你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起，重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一：JavaScript (15讲)
JavaScript类型：关于类型，有哪些你不知道的细节？
JavaScript对象：面向对象还是基于对象？
JavaScript对象：我们真的需要模拟类吗？
JavaScript对象：你知道全部的对象分类吗？
JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？
JavaScript执行（二）：闭包和执行上下文到底是怎么回事？
JavaScript执行（三）：你知道现在有多少种函数吗？
JavaScript执行（四）：try里面放return，finally还会执行吗？
JavaScript词法：为什么12.toString会报错？
（小实验）理解编译原理：一个四则运算的解释器
JavaScript语法（预备篇）：到底要不要写分号呢？
JavaScript语法（一）：在script标签写export为什么会抛错？
JavaScript语法（二）：你知道哪些JavaScript语句？
JavaScript语法（三）：什么是表达式语句？
JavaScript语法（四）：新加入的**运算符，哪里有些不一样呢？
模块二：HTML和CSS (16讲)
HTML语义：div和span不是够用了吗？
HTML语义：如何运用语义类标签来呈现Wiki网页？
CSS语法：除了属性和选择器，你还需要知道这些带@的规则
HTML元信息类标签：你知道head里一共能写哪几种标签吗？
CSS 选择器：如何选中svg里的a元素？
CSS选择器：伪元素是怎么回事儿？
HTML链接：除了a标签，还有哪些标签叫链接？
CSS排版：从毕升开始，我们就开始用正常流了
HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？
HTML小实验：用代码分析HTML标准
CSS Flex排版：为什么垂直居中这么难？
CSS动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？
HTML语言：DTD到底是什么？
CSS渲染：CSS是如何绘制颜色的？
CSS小实验：动手做，用代码挖掘CSS属性
HTML·ARIA：可访问性是只给盲人用的特性么？
模块三：浏览器实现原理与API (9讲)
浏览器：一个浏览器是如何工作的？（阶段一）
浏览器：一个浏览器是如何工作的？（阶段二）
浏览器：一个浏览器是如何工作的（阶段三）
浏览器：一个浏览器是如何工作的？（阶段四）
浏览器：一个浏览器是如何工作的？（阶段五）
浏览器DOM：你知道HTML的节点有哪几种吗？
浏览器CSSOM：如何获取一个元素的准确位置
浏览器事件：为什么会有捕获过程和冒泡过程？
浏览器API（小实验）：动手整理全部API
模块四：前端综合应用 (5讲)
性能：前端的性能到底对业务数据有多大的影响？
工具链：什么样的工具链才能提升团队效率？
持续集成：几十个前端一起工作，如何保证工作质量？
搭建系统：大量的低价值需求应该如何应对？
前端架构：前端架构有哪些核心问题？
特别加餐 (9讲)
新年彩蛋 | 2019，有哪些前端技术值得关注？
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {}，两种写法有什么区别吗？
答疑加餐 | 学了这么多前端的“小众”知识，到底对我有什么帮助？
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑（一）：前端代码单元测试怎么做？
期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？
加餐 | 一个前端工程师到底需要掌握哪些技能？
尾声 (1讲)
尾声 | 长风破浪会有时，直挂云帆济沧海
重学前端
登录|注册
CSS语法：除了属性和选择器，你还需要知道这些带@的规则
winter 2019-02-07
你好，我是 winter。
今天我们进入 CSS 的学习。CSS 是前端工程师几乎每天都要用的技术了，不过 CSS 的学习资料却是最糟糕的，这是因为 CSS 并没有像 HTML 和 JavaScript 那样的一份标准文档。
如果我们到 W3C 的网站上搜索看看，可以得到一些信息：
在这里，我们一共看到了 98 份 CSS 相关的标准，它们各自从一些角度规定了 CSS 的特性。
这里我们暂且去掉 Working Draft 状态的标准，可以得到 22 份候选标准和 6 份推荐标准。
既然我们的专栏内容强调去系统性学习 CSS，于是，面对这 22+6 份标准，我们就又需要一条线索，才能把这些离散的标准组织成易于理解和记忆的形式。
在这样的需求下，我找到的线索就是 CSS 语法，任何 CSS 的特性都必须通过一定的语法结构表达出来，所以语法可以帮助我们发现大多数 CSS 特性。
CSS 语法的最新标准，你可以戳这里查看：
这篇文档的阅读体验其实是非常糟糕的，它对 CSS 语法的描述使用了类似 LL 语法分析的伪代码，而且没有描述任何具体的规则。
这里你就不必自己去阅读了，我来把其中一些有用的关键信息抽取出来描述一下，我们一起来看看。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》，如需阅读全部文章，
请订阅文章所属专栏。
请订阅文章所属专栏。
立即订阅
登录 后留言
精选留言(32)
CC在网站上搜索了一下，发现 css 函数有不少，尤其是近三年，增加的函数几乎超过过去的总和。
按照 winter 老师提到「知识完备性」的思路，尝试整理了一下 CSS 函数。
按照功能，分成以下 5 个类别（可能并不完全准确）：
# 1. 图片
* filter
* blur()
* brightness()
* contrast()
* drop-shadow()
* grayscale()
* hue_rotate()
* invert()
* opacity()
* saturate()
* sepia()
* cross-fade()
* element()
* image-set()
* imagefunction()
# 2. 图形绘制
* conic-gradient()
* linear-gradient()
* radial-gradient()
* repeating-linear-gradient()
* repeating-radial-gradient()
* shape()
# 3. 布局
* calc()
* clamp()
* fit-content()
* max()
* min()
* minmax()
* repeat()
# 4. 变形/动画
* transform
* matrix()
* matrix3d()
* perspective()
* rotate()
* rotate3d()
* rotateX()
* rotateY()
* rotateZ()
* scale()
* scale3d()
* scaleX()
* scaleY()
* scaleZ()
* skew()
* skewX()
* skewY()
* translate()
* translate3d()
* translateX()
* translateY()
* translateZ()
# 5. 环境与元素
* var()
* env()
* attr()2019-02-07 2 249
Sevens 些粉推荐一下《css世界》这本书，有理论基础也有实战应用和常遇坑，看了两章感觉不错。2019-02-08 1 55
莲我看到winter老师讲解这些冷门的知识，忽然意识到什么叫做精通？要精通就要抠这种细节，这样才能做到精通
做就要做精通，前端是一种手艺人2019-02-09 23
文全@import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个 JavaScript 文件的全部内容。这段写错了 应该是css 文件全部内容2019-02-07 14- mimof9试了一下 toggle这个函数 并没有效果。clac实测下来是有效果的。2019-02-08 3 8
Aaaaaaaaaaayou“只有伪类可以出现在伪元素之后”是不是写反了2019-02-07 7
无痕“||”这个选择器我怎么没搜到，是什么意思2019-03-04 4
花骨朵css函数：https://www.w3cplus.com/css/css-functions.html2019-02-28 2- Rushan-Chen@mimof9
文章的链接是CSS4 working draft状态的文档，是很新的文档。
看了下CSS3 Candidate Recommendation状态的文档，没有toggle()、min()、max()、clamp()，这几个函数应该是css4新加的，基本上浏览器都还不支持。
attr()虽然css3文档有，查了下，浏览器也都不支持。😂
等浏览器支持估计还要一段时间吧，现在先知道有这个东西就好，我是这样想的。2019-02-13 2 
南蓝@ counter-style 只在火狐上有用
<style>
@counter-style circled-alpha {
system: fixed;
symbols: "\7532""\4E59""\4E19""\4E01""\620A""\5DF1""\5E9A""\8F9B""\58EC""\7678";
/* 甲 乙 丙 丁 戊 己 庚 辛 壬 癸 */
suffix: " ";
}
ul li {
list-style: circled-alpha;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>2019-02-12 2
饼不少函数还没法用，目前还是var clac比较接近实用了2019-06-05 1
王峰选择器还有一种情况就是*通配符，它不属于标签选择器，也没有优先级2019-04-17 1
🚂🚂🚂CSS Functions
Alphabetical list of CSS functions included in CSS3.
attr()
blur()
brightness()
calc()
circle()
contrast()
counter()
counters()
cubic-bezier()
drop-shadow()
ellipse()
grayscale()
hsl()
hsla()
hue-rotate()
hwb()
image()
inset()
invert()
linear-gradient()
matrix()
matrix3d()
opacity()
perspective()
polygon()
radial-gradient()
repeating-linear-gradient()
repeating-radial-gradient()
rgb()
rgba()
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
saturate()
sepia()
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
skew()
skewX()
skewY()
symbols()
translate()
translate3d()
translateX()
translateY()
translateZ()
url()2019-03-04 1- 吴前端toggle()函数试了下在google 火狐打开都没用呢显示无效属性值
作者回复: 移动端问题不大，已经都是webkit了。
不过我还真没注意火狐没这个函数。2019-02-19 1 
胡永Pseudo class selector2019-02-12 1- hhkcss语法：at 规则 + 普通规则
普通规则：选择器 + 声明区块
另外，margin 的读音好像读错了2019-02-07 1 
小夜@namespace svg url(http://www.w3.org/2000/svg)
请问这个 声明这个 namespace 的必要性在哪里，在什么情况下会需要使用这个规则作者回复: 这是选svg元素的时候的简写啊，跟html的namespace对应的
2019-10-25- Jackzhoumine按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。2019-09-14
CrisWinter老师的课程，给我的帮助就是能够让我宏观上建立知识框架，至于细枝末节，也需要自己私下里再下功夫2019-09-12
融梨为什么，我没想到，学习CSS的完备性，也就是不管中规豹。2019-07-17
收起评论