css语法小结

前言：

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

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

1、属性值的组成

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

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

举例：

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} 、 ?

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

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

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

2、组合符号

空格

举例:

<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的运算符有那么一点点类似。

3、分隔属性值的符号

[ ] 符号

举例：

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

解释：

用于把属性值分组。

/ 符号

举例：

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

解释：

分隔属性值

举例：

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

, 符号

举例：

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

解释：

使用, 号分隔属性值

举例:

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

4、数量符号

+ 符号

举例：

<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都要看语法