CSS属性值有专门的一套定义语法，同来表达CSS语法的合法组成。
例如线性渐变的语法为：
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )
如果你不理解CSS的定义语法，那相信是很难阅读上面这串代码的，我们接着往下看。
为什么要学习定义语法？
如果你也经常写出下面这样的代码：
background:linear-gradient(to bottom,blue,pink)
上面这句CSS声明有问题吗？从语法和功能上来说是完全没问题的，线性渐变也可以正常在页面中显示，但是在写法上却又瑕疵，“to bottom” 这几个字符是多余的。我们可以直接用下面这种方式书写：
background:lineara-gradient(blue,pink)
如果你能看得懂CSS的定义语法，那么在学习的时候，只需要稍微看看线性渐变的语法，就能轻松的知道“线性渐变的方向设置是可以省略的”。
这就是看懂CSS定义语法的好处！不仅有助于你快速了解CSS新属性，还有助于发现别人注意不到的细节知识！而这些细节就是提升你个人竞争力的方式！
CSS属性值定义语法详解
CSS属性值定义语法，是专门为用来限定CSS属性合法取值的语法，这种语法包含以下三种基本组成的元素：
还是用线性渐变的语法举例：
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )
to 就是关键字；
关键字分为通用关键字和全局关键字，后面的文章会介绍。
<angle>、<side-or-corner>、<color-stop-list> 就是数据类型；
数据类型就是我们上一篇介绍的。
[]、|、? 就是符号。
符号是CSS语法中的重点和难点。我们在下一章会详细介绍。
重要的语法符号
CSS中的符号主要分为以下三类：
CSS属性定义语法详解
下面，还是以linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )这段语法来进行详解。
逗号（并列分隔符）没有什么特殊意义，但是我们要注意以下写法是不合法的：
/*0deg 后面少了逗号，不合法*/
background: linear-gradient(0deg blue, pink)
空格（组合符号），表示参数并列，同时保证各部分按顺序出现，一次如果我们把<color-stop-list>参数放在前面，也是不合法的：
/*不合法，顺序错误*/
background: linear-gradient(blue, pink，0deg)
“互斥”组合符（｜）表示我们参数中，角度和方位，只能出现一个，两者不能同时出现，因此下面的语法是错误的：
/*不合法，角度和方位不能同时出现*/
background: linear-gradient(0deg to bottom, blue, pink)
方括号（[ ]）用来分组，方便调整符号优先级以及指定数量
问号（ ? ）是数量符号，表示参数可以出现零次或者一次，也就是可有可无。下面的写法是不合法的：
/*不合法，角度参数多次出现*/
background: linear-gradient(0deg, 0deg, blue, pink)
其他符号详解：
字面符号/的详细介绍
在CSS总，凡是出现/的地方，/前后的数据类型一定是相同或者是部分相同的。如果我们实在记不住包含/的CSS缩写语法，那么只要记住这个规则就好了。
background属性值中，需要使用/分隔的两个属性，一定是background-size 和background-position，因为只有这两个值的属性值类型相似，且都可以使用百分比表示，所以下面这些语法都是合法的：
background: 0 / 0
font属性的斜杠前后，一定是font-size属性值和line-heght属性值，以为两者都可以使用px长度单位。
font：16px / 1.5 sans-serif
斜杠这个符号，除了出现在部分CSS的缩写语法中，还可能出现在一些CSS函数中，用来表示分隔
例如CSS中的RGB函数rgba()
/* 合法 */
rgba(255 0 0 / 0.3)
rgba(10% 1% 50% / 0.1)
类似这样的语法，如果我们不看官方的语法，是绝对不知道还能这样的，也不知道为什么能这样。所以，要想CSS学的好，CSS属性值定义语法一定要学好！
其他符号详细介绍
“或”组合符（ | | ）。 | | 在CSS语法中很常见，例如border属性的语法：
border : <line-width> || <line-style> || <color>
这一语法表示，border属性的3个值的顺序是随机的，组合也是随机的！
“与”组合符号( && )。&& 符号的出现，表明语法中各部分必须出现，但可以不按顺序出现。
叹号（ ! ）。在image()函数中出现：
<image()> : image(<imahe-tags>? [ <image-src>? , <color>? ]!)
这语法表示 <image-src>和<color> 至少出现一个！当然两者也可以同时出现。
最后的计数符号#，和 * 按照他的定义去理解接好，#可以出现一次或多次，*出现任意次。
让我门尝试阅读CSS的语法吧！巩固上面我们所学的知识！
阅读 width 属性值定义语法
width = auto | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> )
在这里出现的是 ｜ 互斥组合符号，那就意味着，这其中的属性值每次只能出现其中一个。
