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