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缩写中,用于分隔类型相同但属于不同CSS属性的值 -
组合符号
符号 名称 描述 空格 并列 普通空格字符,表示各个部分必须出现,同时需要按顺序出现 && “与”组合符 各部分必须出现,但可以不按顺序出现 | | “或”组合符 各部分至少出现一个,可以不按顺序出现 | “互斥”组合符 各部分恰好出现其中一个 [ ] 方括号 将各部分进行分组以绕过上面几个符号的优先规则,因此方括号的优先级最高 -
数量符号
符号 名称 描述 空格 无数量符号 恰好出现一次 && 星号 可以出现任意次数 + 加号 可以出现一次或多次 ? 问号 可以出现零次或者一次,也就是说该元素可有可无 花括号 出现最少A次,最多B次 # 井号 可以出现一次或多次,但多次出现时必须以逗号分隔 ! 叹号 表示当前分组必须产生一个值,该符号多出现在组合符号方括号后面
有了上面三个表格,我们理解CSS属性定义语法就变得更容易了。
例如线性渐变语法解析,如下图所示:
![s](https://my-note-images-mac.oss-cn-shanghai.aliyuncs.com/code-image/89ApBO.png)
CSS属性定义语法详解
等待更新中。。。
试一试
等待更新中。。。
标签:定义,符号,渐变,语法,CSS,属性 From: https://www.cnblogs.com/mosaicMask/p/17282619.html