CSS属性值太多记不住？一招教你搞定

现在的你有没有发现，css属性值繁多，如果只靠死记硬背太过痛苦，现在教你一招，如何使用css数据类型，让你快速记住css属性值

css数据类型是什么

CSS 数据类型是 CSS 属性和函数中使用的具体值类型，定义了 CSS 中可以使用的各种值的格式和结构。

语法格式，使用关键字外加一对尖括号（"<"和">"）表示，例如数值类型是、色值类型是等。

为什么要学习

css属性值一定包含一个或多个数据类型，同时决定了css属性值之间会存在交叉。

在css2时代，常用的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 数据类型

1. 基本数据类型

• <length> ：表示长度值（如 10px , 2em , 5cm）
• <percentage> ：百分比（如 50% ）
• <number> ：纯数字（如 1 , 0.5）
• <integer> ：整数（如 1 , 3）
• <angle> ：角度（如 45deg , 1rad）
• <time> ：时间（如 2s , 500ms）
• <frequency> ：频率（如 100Hz , 2kHz）
• <resolution> ：分辨率（如 300dpi , 2x）

2. 颜色数据类型

• <color> ：颜色值

  • 关键词（red , transparent）
  • 十六进制（ #ff0000 , #f00）
  • RGB/RGBA（rgb(255,0,0) , rgba(255,0,0,0.5) ）
  • HSL/HSLA（hsl(0,100%,50%) , hsla(0,100%,50%,0.5) ）

3. 文本数据类型

• <string> ：字符串（如 "Hello" , 'World' ）
• <ident> ：标识符（如自定义属性名、动画名等）

4. 复合数据类型

• <position> ：位置（如 center top , 10px 20px）
• <transform-function> ：变换函数（如 rotate(45deg) , scale(2) ）
• <gradient> ：渐变（如 linear-gradient(red, blue) ）

5. 特殊数据类型

• <url> ：资源路径（如 url(image.png) ）

• <image> ：图像（包括 <url> 和 <gradient> ）

• <custom-ident> ：用户自定义标识符

总结

CSS数据类型，无论是现有的还是未来新增的属性，都能辅助你提高记忆效率，降低学习成本。

资料扩展

CSS值类型文档大全 << 张鑫旭-鑫空间-鑫生活

<<css新世界>>