你不得不了解的CSS数据类型

在我之前的开发中，CSS对于我来说，要用什么找什么，对CSS的了解并不算深入；在我刚开始深入学习CSS时，第一个遇到的就是CSS数据类型，我听说过JS、TS的数据类型，CSS怎么也有数据类型？但是随着我对CSS数据类型的了解，CSS的大门也在缓缓为我打开！！！

什么是CSS数据类型？

引用《CSS新世界》中的介绍：

CSS数据类型的定义是CSS属性中具有代表性的值，在规范的语法格式中，使用关键字外加一对尖括号表示。

怎么去理解呢，我们可以去看看官方文档中对于 background-color的描述：

background-color : <color>

上面语法示例中的 <color>就是我们说的CSS数据类型；

掌握CSS数据类型对了解CSS新世界的体系和快速学习CSS新特性非常有帮助！！！！！（切记）

为什么要学习CSS数据类型？

首先我们要知道，在CSS中任何CSS属性值，都一定包含一个或者多个数据类型！

在CSS2时代，CSS数据类型的概念并不重要，因为CSS常用的属性翻来覆去就那么几个，这些属性在我们工作中经常用到，久而久之我们也就都记住了。

但是！在CSS3到来的时代，由于各个CSS模块独立发展，CSS3之后并不会再有统一的大版本变化，而是将CSS各个功能模块拆分为小模块独立发展，这也就导致短时间内大量的CSS新属性如雨后春笋般的冒了出来！

为了加速没有争议的CSS特性的标准化，W3C的CSS工作组做出了一项被称为“Beijing doctrine”的决定，该决定将CSS划分为更小的组件，并把这些组件成为模块。这些模块互相独立，各自按照自己的速度走向标准化。

例如：CSS选择器模块已经到了Level 4 了；弹性布局模块还是 Level 1

如果此时我们还和CSS2那样，只是凭借经验去记忆CSS的属性值，去学习CSS的新特性，那么学习起来肯定是十分痛苦的，因为效率非常低下！！！

因此CSS数据类型的优势就出来了，我们无需记住数量繁多的CSS属性值，只需要记住支持的数据类型即可！！

学习CSS数据类型有什么用？

我们直接来举个例子：

background-image 是一个非常常用的CSS属性，我们来看看它的语法结构：

background-image : <image> | none

上面的 <image> 就是一个CSS数据类型，它包括下面这些类型和函数：

• <url>
• <gradient>
• element()
• image()
• image-set()
• cross-fade()
• paint()

也就是说，我们可以看到background-image属性不仅支持url函数和渐变图像，还支持element()等函数！！

这是，我突然问你：CSS的mask-image属性支持的属性值有哪些呢？

这么突然疑问，如果你没有用过这个属性，那相比一时半会你也想不出答案，让我们来看看官方文档吧！

mask-image : none | <image> | <mask-source>

这个语法中出现了与background-image 一样的 <image> 数据类型！！！这些就豁然开朗了！

这不就代表，background-image 支持的那些<url>、<gradient>、element()、image()等等这些属性在mask-image中都是支持的?

这样，我们通过理解CSS数据类型，就学会了mask-image这个语法的一半！

CSS数据类型的互通互联

CSS数据类型除了可以帮助我们快速学习掌握CSS的语法，还能快速更新整个CSS世界的知识库。

举个例子：

我们都知道 background-image属性是支持 paint()函数的，但是我们现在问你，mask-image属性是否支持paint()函数？

此时，如果你是靠记忆实际属性，由于你大脑中的记忆库里没有相关信息的储备，因此你会疑惑，会不解，随后去翻阅官方文档，甚至还要做一个小demo来确认一下。

但是，如果你记忆的是<image>类型，你可以迅速回答出：肯定支持，因为mask-image属性值支持<image>数据类型，<image>数据类型中存在paint()函数。

因此，大家一定要关注CSS的数据类型，这可以让我们学习CSS得新特性更迅速，理解CSS新特新更轻松！

试着学习几个常见的CSS数据类类型。

在以后的工作生活中！尝试去记住数据类型，而不是去记实际的每个属性的属性值吧；

用记住的数据类型，去延伸出实际的属性值，也许会有额外的收获！！！