你還在記css的賦值順序嗎?

01-29

前言：
或許我們平時已經習慣了css的賦值但卻不知道其屬性值語法，就好像我們大多數人習慣於使用漢語交流但卻沒有具體學習過它的語法一樣。
其實css屬性值語法很簡單，那我們為什麼要學習它呢？記著怎麼賦值不就好了？（我自己認為的）優點有以下三點：
1. 遇到陌生的屬性，你可以知道怎麼賦值。
2. 不用總記著賦值順序，我們時間有限，幹嘛花時間記順序？

3. 樣式有問題時我們能快速檢查是否是語法有問題。
本人使用的是JETBRAINS家的WebStorm，使用它家IDE的同學應該已經很熟悉怎麼快速查看參數、屬性值語法及文檔了。

一、屬性值的組成

屬性值由以下三部分組成：

基本元素
組合符號
數量符號
[] 符號、符號、, 符號

舉例：

border-radius的屬性值：

[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]?|[initial|inherit|unset|revert]n

在上面的語法中：

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

其中：

initial inherit unset revert 屬於關鍵字，可以直接使用。

<length> <percentage> 屬於基本類型，還需要具體賦值，例如5px，10%等。

組合符號是： |

數量符號有： {1,4} 、 ?

還有用於分隔屬性值的 []、/

現在先有個大概印象就行,下面會用例子分別說明。

以下部分所有的舉例為方便說明，均只截取一部分語法，詳細語法請自行查看

二、組合符號

空格

舉例:

<font-size> <font-family> n

解釋：

賦值時必須按照順序。

例如：

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

&& 符號

舉例：

<length>&&<color> n

解釋：

屬性必須賦值，但不考慮順序

例如：

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

| | 符號

舉例：

underline||overline||linethrough||blink n

解釋：

可以從 || 分隔的屬性值裡面選擇一個或多個

例如：

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

| 符號

舉例：

<color>|<transparent> n

解釋：

從| 分隔的屬性裡面選取且只能選取一個屬性值

例如：

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

看到這裡你可能發現跟js的運算符有那麼一點點相似。

三、分隔屬性值的符號

[ ] 符號

舉例：

[<length>|<percentage>] n

解釋：

用於把屬性值分組。

/ 符號

舉例：

<font-size>[/<line-height>]?n

解釋：

分隔屬性值

舉例：

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

, 符號

舉例：

<color-stop>[,<color-stop>]+ n

解釋：

使用, 號分隔屬性值

舉例:

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

四、數量符號

+ 符號

舉例：

<color-stop>[,<color-stop>]+ n

還是這個例子.

解釋：

該屬性值至少出現一次

舉例:

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

? 符號

舉例：

<font-size>[/<line-height>]? n

還是這個例子。

解釋：

該屬性值出現1次或0次

舉例：

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

* 符號

舉例：

<time>[,<time>]* n

解釋：

該屬性值出現任意次

舉例:

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

{ } 符號

舉例：

[<length>|<percentage>]{1,4} n

解釋：

該屬性值出現 {} 內指定範圍的次數,如果只有一個數字n,則需要該屬性值n次.

舉例:

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

看到這裡你可能會發現跟正則差不多一個意思。

遇到長的屬性語法

如果遇到長的屬性語法，我的理解步驟是：

先看屬性值語法分了幾組
看哪些屬性值是必須的，哪些是可選的
先把必須屬性值寫出來,再把可選屬性值添加到必須屬性裡面

回到最開始的例子：

[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]?|[initial|inherit|unset|revert]n

用｜ 分隔，二選一

[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]? n

[initial|inherit|unset|revert] n

如果選前者，即：

[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]? n

發現

[/<length>|<percentage>]{1,4}]? n

並不是必須的。

於是，我可以只關注這裡：

[<length>|<percentage>]{1,4} n

那麼我可以寫：

border-radius: 5px

如果有需要：

border-radius: 5px/2px

當然，以上只是舉例，沒人會閑得連border-radius都要看語法

還不明白怎麼用？

Ctrl + Q 快速查看文檔吧！

參考

無