CSS新世界
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.1　互通互联的CSS数据类型

CSS数据类型定义的是CSS属性中具有代表性的值，在规范的语法格式中，使用关键字外加一对尖括号（“<”和“>”）表示，例如数值类型是<number>、色值类型是<color>等。

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

任何CSS属性值一定包含一个或多个数据类型。

在CSS2时代，CSS数据类型的概念并不怎么重要，因为常用的CSS属性翻来覆去就那几个，这些CSS属性支持的属性值我们反复使用就记住了。但是在CSS新世界中，由于各个CSS模块独立发展，没有统一的大版本进行约束，因此CSS的发展和变化非常快，这导致短时间内大量的CSS新属性如雨后春笋般涌现。

如果此时还和过去一样，只是凭借经验去学习CSS新特性，那么学习起来肯定是十分困难的，因为效率比较低下。此时CSS数据类型的价值就体现出来了，当CSS新属性出现的时候，我们无须记忆数量众多的属性值名称，只需要记住支持的数据类型即可，这样学习成本就大大降低了。

举一个例子，background-image是使用频率非常高的一个CSS属性，这个CSS属性的语法结构是下面这样的：

background-image: none | <image>

这个语法中出现的<image>就是一种数据类型，它包括下面这些类型和函数：

● <url>；

● <gradient>；

● element()；

● image()；

● image-set()；

● cross-fade()。

也就是说，CSS的background-image属性不仅支持url()函数和渐变图像，还支持element()、image()、image-set()和cross-fade()等函数。

通过上面这段描述大家已经知道了background-image属性原来支持这么多种类型的属性值，那么请问，CSS的mask-image属性支持的属性值都有哪些呢？

这么突然一问，想必大家一时也想不出准确的答案，毕竟见得少、用得少，这么细节的知识哪能知道呢？没关系，我们看一看mask-image属性的语法：

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

这个语法中出现了<image>数据类型！这下就豁然开朗了，这个<image>不就是background- image语法中的<image>吗？没错，两者是一样的。也就是说，mask-image属性不仅支持url()函数和渐变图像，还支持element()、image()、image-set()和cross-fade()等函数。这样CSS的mask-image属性的语法就学会了一半，真是高效！

由于CSS属性值包含的CSS数据类型都是互通互联的，因此，CSS数据类型只要学习一次，就可以广泛运用，这样要比根据经验记忆几个片面的CSS属性值实用多了。

CSS数据类型除了可以帮助我们快速掌握CSS的语法，还能快速更新整个CSS世界的知识库。例如上面介绍的<image>数据类型中，我还故意漏了一个新成员，那就是paint()函数，它是CSS Paint API带来的新成员，相关规范在2016年才开始制定。

如果你是通过记住具体的CSS属性值来学习CSS，那么你应该会知道background-image属性支持paint()函数，因为几乎所有CSS Paint API案例都是用background-image属性来举例的：

.example {
    background-image: paint(some-ident);
}

不过要是此时问你mask-image属性是否支持paint()函数，由于你大脑中的记忆库里没有相关信息的储备，因此你会疑惑，会不确定，会想要重新去翻阅资料学习，甚至还会做个演示案例确认一下。

如果你记忆的是<image>数据类型，再问你mask-image属性是否支持paint()函数，你肯定会毫不犹豫地回复支持，因为mask-image属性值支持<image>数据类型，而paint()函数就属于<image>数据类型。

不仅是mask-image属性，CSS新世界中还有很多支持<image>数据类型的CSS属性，以及以后会支持<image>数据类型的CSS属性都会同步更新paint()函数这个新特性。因此，大家一定要关注CSS数据类型，这可以让我们学习CSS新特性更迅速，理解CSS新特性更轻松。

CSS数据类型非常多，保守估计，至少有50个，这里介绍几个常见且值得一提的数据类型。

CSS Shapes布局中有一个名为shape-outside的属性，我们不用关心这个CSS属性的含义，只看这个CSS属性的语法：

shape-outside: none | <shape-box> || <basic-shape> | <image>

这里出现了3种不同的数据类型，下面分别介绍一下。

（1）<shape-box>支持的属性值如下：

● <box>；

● margin-box。

在CSS世界中，需要用到margin-box的属性并不多，shape-outside属性就是一个特例。虽然<shape-box>数据类型并不常用，但是<box>数据类型却很常见，<box>数据类型包括下面这些属性值：

● content-box；

● padding-box；

● border-box。

background-origin和background-clip等CSS属性的属性值就是<box>数据类型。

（2）<basic-shape>支持的属性值如下：

● inset()；

● circle()；

● ellipse()；

● polygon()；

● path()。

clip-path和offset-path等CSS属性的属性值属于<basic-shape>数据类型。

（3）<image>支持的属性值如下：

● <url>；

● <gradient>；

● element()；

● image()；

● image-set()；

● cross-fade()；

● paint()。

上述属性值中<url>也是一种数据类型，用于表示使用url()函数调用的图像资源；<gradient>也是一种数据类型，用于表示渐变图像。

background-image和mask-image等CSS属性的属性值属于<image>数据类型。

从上面的介绍可以看出，CSS的shape-outside支持的属性值非常庞杂，不过只要牢记这3个数据类型，就可以轻松记住很多属性值，至于其中的每一个属性值究竟有什么含义，在这里不展开讲解，之后会有详细的阐述。

最后再介绍一下<color>数据类型，这个数据类型使用非常广泛，几乎所有带有color关键字的CSS属性都支持这个数据类型，如border-color、outline-color、background- color等。例如：

color: <color>

这里的<color>数据类型支持的属性值如下：

● <rgb()>；

● <rgba()>；

● <hsl()>；

● <hsla()>；

● <hex-color>；

● <named-color>；

● currentColor；

● <deprecated-system-color>。

最后一个属性值<deprecated-system-color>指废弃的系统颜色，这在《CSS世界》一书的第9章中有专门的介绍，本书不再赘述，其他属性值在对应章节都会有详细的讲解。

以上就是我要简单介绍的几个常见且值得一提的数据类型。至于其他数据类型，要么比较简单，例如<number>、<percent>等数据类型，指数值和百分比值；要么比较生僻且唯一，例如<quote>数据类型，指content属性中表示各类引号的关键字值，如open-quote和close-quote等。

本书不会逐个展开介绍CSS数据类型，想要了解更完整的CSS数据类型，读者可以参考我的一篇文章《CSS值类型文档大全》（https://www.zhangxinxu.com/wordpress/2019/11/css-value-type/）。

上一章目录下一章