gpt4 book ai didi

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

转载 作者:我是一只小鸟 更新时间:2023-04-02 14:31:12 24 4
gpt4 key购买 nike

在我之前的开发中,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数据类类型。

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

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

最后此篇关于你不得不了解的CSS数据类型的文章就讲到这里了,如果你想了解更多关于你不得不了解的CSS数据类型的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com