css语法小结

前言：

或许我们平时已经习惯了css的赋值但却不知道其属性值语法，就好像我们大多数人习惯于使用汉语交流但却没有具体学习过它的语法一样。
其实css属性值语法很简单(类似于正则)，那我们为什么要学习它呢？记着怎么赋值不就好了？（我自己认为的）优点有以下三点：

1. 遇到陌生的属性，你可以知道怎么赋值。
2. 样式有问题时我们能快速检查是否是语法有问题。

一、属性值的组成

属性值由以下三部分组成：

• 基本元素
• 组合符号
• 数量符号
• [] 符号、\符号、, 符号

举例：

border-radius的属性值：

[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]?|[initial|inherit|unset|revert]
复制代码

在上面的语法中：

基本元素有：<length> <percentage> initial inherit unset revert

其中：

initial inherit unset revert 属于关键字，可以直接使用。

<length> <percentage> 属于基本类型，还需要具体赋值，例如5px，10%等。

组合符号是： |

数量符号有： {1,4} 、 ?

还有用于分隔属性值的 []、/

现在先有个大概印象就行,下面会用例子分别说明。

以下部分所有的举例为方便说明，均只截取一部分语法，详细语法请自行查看

二、组合符号

空格

举例:

<font-size> <font-family> 
复制代码

解释：

赋值时必须按照顺序。

例如：

• 16px Arial (合法)
• Arial 16px (不合法)

&& 符号

举例：

<length>&&<color> 
复制代码

解释：

属性必须赋值，但不考虑顺序

例如：

• 16px red (合法)
• red 16px (合法)
• 16px (不合法)

| | 符号

举例：

underline||overline||linethrough||blink 
复制代码

解释：

可以从 || 分隔的属性值里面选择一个或多个

例如：

• underline overline (合法)
• overline blink (合法)
• underline(合法)

| 符号

举例：

<color>|<transparent> 
复制代码

解释：

从| 分隔的属性里面选取且只能选取一个属性值

例如：

• red （合法）
• red transparent （不合法）

看到这里你可能发现跟js的运算符有那么一点点相似。

三、分隔属性值的符号

[ ] 符号

举例：

[<length>|<percentage>] 
复制代码

解释：

用于把属性值分组。

/ 符号

举例：

<font-size>[/<line-height>]?
复制代码

解释：

分隔属性值

举例：

• 16px/1.5 (合法)
• 16px 1.5 (不合法)

, 符号

举例：

<color-stop>[,<color-stop>]+ 
复制代码

解释：

使用, 号分隔属性值

举例:

• red,gray (合法)
• red gray (不合法)

四、数量符号

+ 符号

举例：

<color-stop>[,<color-stop>]+ 
复制代码

还是这个例子.

解释：

该属性值至少出现一次

举例:

• red,gray (合法)
• red (不合法)

? 符号

举例：

<font-size>[/<line-height>]? 
复制代码

还是这个例子。

解释：

该属性值出现1次或0次

举例：

• 16px/1.5 (合法)
• 16px (合法)
• 16px/1.5/2 (不合法)

* 符号

举例：

<time>[,<time>]* 
复制代码

解释：

该属性值出现任意次

举例:

• 1s(合法)
• 1s,5ms(合法)
• 1s,1ms,3ms(合法)

{ } 符号

举例：

[<length>|<percentage>]{1,4} 
复制代码

解释：

该属性值出现 {} 内指定范围的次数,如果只有一个数字n,则需要该属性值n次.

举例:

• 16px 16px 16px 16px (合法)
• 16px 16px(合法)
• 16px 16px 16px 16px　16px (不合法)

看到这里你可能会发现跟正则差不多一个意思。

遇到长的属性语法

如果遇到长的属性语法，我的理解步骤是：

1. 先看属性值语法分了几组
2. 看哪些属性值是必须的，哪些是可选的
3. 先把必须属性值写出来,再把可选属性值添加到必须属性里面

回到最开始的例子：

[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]?|[initial|inherit|unset|revert]
复制代码

用｜ 分隔，二选一

[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]? 复制代码

[initial|inherit|unset|revert] 
复制代码

如果选前者，即：

[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]? 
复制代码

发现

[/<length>|<percentage>]{1,4}]? 
复制代码

并不是必须的。

于是，我可以只关注这里：

[<length>|<percentage>]{1,4} 
复制代码

那么我可以写：

border-radius: 5px

如果有需要，可以写：

border-radius: 5px/2px

当然，以上只是举例，没人会闲得连border-radius都要看语法