CSS数据类型和符号
时间：2023-03-27 23:45:55
HTML
css数据类型定义了css属性的代表值。在规范的语法格式中，由关键字加一对<和>表示，如数值类型，颜色值类型等。例如：css属性background-image的语法结构为如下：背景图像：无|这里的图片是一个数据类型，包括以下类型和函数：1、2、3、element()4、image()5、iamge-set()6、cross-fade()7、paint()这意味着background-image属性不仅支持url()函数和渐变图片，还支持element()、image()、image-set()等函数。我们再看一个例子：mask-image，这个属性可以设置图片遮罩，它的数据类型是：mask-image:none|<图像>|/*效果如下*/.masks{width:200px;高度：200px；背景色：青色；掩码图像：url（../images/music.png）；-webkit-mask-image:url(../images/music.png);/*Googlecompatible*/
数据类型文档：mdnwebdocs文档：https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-值数据类型文档：https://www.zhangxinxu.com/wordpress/2019/11/css-value-type/#color-zxxCSS属性值定义语法详解css语法基本包括以下三个基本元素：关键字数据类型符号示例示例：线性渐变背景图像：线性渐变（到右下角，红色，黄色）;/*反汇编*/线性渐变（[<角度>|to
,]?);/*to:关键字，用于指定方向:颜色集合（红色，黄色）*/1。关键字：关键字分为通用关键字和全局关键字，如aoto、none、ease等关键字为通用关键字，这些关键字仅被部分css属性支持inherit、initial、unset、revert为全局关键字，将被所有CSS属性。2.数据类型：上面已经说了，这里就不细说了。3、符号：CSS语法中的符号分为三类：文字符号、组合符号和数量符号。(1)文字符号：css属性值中原来支持的合法符号是文字符号，目前有两种：符号描述，并列定界符，用来分隔几个并列值，或者用来划分函数的参数值/缩写分隔符，用于分隔一个值的多个部分，在css缩写中用于分隔相同类型但属于不同css属性的值，在一些css函数中使用。无论出现/在哪里，斜杠前后的数据类型必须相同或部分相同，否则整个语句是非法的。(2)组合符号：用于表示几个基本元素之间的组合关系，目前有5个：：并列，符号位为普通空格字符，表示各部分必须出现，需要按顺序出现|&&:"和"组合字符，每个部分必须出现，但可以乱序出现，相当于js的&&||乱序|：“互斥”组合，每个部分恰好出现[]之一：方括号，部分分组绕过上述符号的优先级规则，所以方括号的优先级最高3，个数ofsymbols用来描述一个元素可以出现多次。数量符号不能叠加出现，并且比组合符号具有更高的优先级。目前有6个符号。符号说明未量化符号，表示*星只出现一次，可以出现任意次+可以出现一次或多次？可以出现零次或一次，即元素可选{a,b}最少出现一次，最多出现b次#可以出现一次或多次，但出现多次时必须用逗号隔开！表示当前组必须产生一个值，这个符号经常出现在组合符号的方括号后面。了解了这些之后，我们来拆解上面的线性渐变background-image:linear-gradient(tobottomright,red,yellow);/*disassembly*/linear-gradient([|to,]?);background-image:linear-gradient(red,yellow);[<角度>|到,]？/*表示只能选择一个角度或方向，要么角度要么选择方向，如果选择方向，可以设置多个方向*//*表示一组平行色：红色,blue*//*线性渐变效果*/background-image:linear-gradient(tobottomright,red,yellow);效果：通过上面的例子，我们来做一些扩展扩展1：/*只要每个部分出现一个，就可以满足条件*/border:||<线型>||/*typecoloroflinewidth*//*可以从这里得到*/border:1pxsolidred;/*也可以*/border:1pxsolid;扩展2：边框阴影：无|[,]#/*等同于*/border-shadow:none|[,]*/*Effect*/box-shadow:10px0px0px0red,-10px10px0px0cyan;
