//margin 形式語法： [ <length> | <percentage> | auto ]{1,4} //合法例項： margin: style /*單值語法 */ 舉例： margin: 1em; margin: vertical horizontal /*二值語法 */ 舉例： margin: 5% auto; margin: top horizontal bottom /*三值語法 */ 舉例： margin: 1em auto 2em; margin: top right bottom left /*四值語法 */ 舉例： margin: 2px 1em 0 auto; margin: inherit
上面margin的形式語法中 <length>, <percentage>,auto為基本元素
[],|為組合符號，{1,4}為數量符號
在比如下面的border-width屬性值語法：
border-width: [<length> | thin | medium | thick]{1,4}
基本元素可以是
- 關鍵字型別
- auto，solid，bold，red，blue。。。
- 一般型別
- 基本型別，比如<length>,<percentage>,<color>。。。
- 其他複雜型別，比如< 'padding-widht'>可以取<length>基本型別，或者percentage基本型別， <color-stop>
- 符號(/,)用於分割
- inherit,initial為兩個特殊的基本元素，幾乎每一個html元素都可以有這兩個值
組合符號-空格
< 'font-size' > < 'font-family'>
//合法值：
12px arial
//不合法值：
2em
arial 14px
上面由空格連線了兩個複雜型別，表示這兩個型別必須出現並且順序也必須是按照語法示例要求的。
組合符號-&&
<length>&&<color>
//合法：
green && 1px
10px && red
//非法
purple
10px
上面由&&連線了兩個基本型別，他們是必須出現的，但是其順序是不要求的
組合符號-||
underline || overline || line-through || blink
//表示至少要出現一個，順序是沒有關係的
//合法的：
underline
overline underline
line-through blink overline
上面由||連線了四個關鍵字型別的值，他們必須出現至少一個，但是其出現順序沒有關係
組合符號-|
<color> | transparent
//由|連線的值表示只能出現一個
//合法值：
orange
transparent
red
#134556
//非法值：
orange transparent
組合符號-[]
bold [ thin || <length> ]
/*[]表示一個作為一個整體來對待*/
//合法： bold thin bold 2em
//非法：
2em bold //原因是空格組合符號表示必須按順序出現，但是這裡順序顛倒了
數量符號-無
<length> /*這裡沒有數量符號修飾，則表示只有一個可以出現*/ /*合法值*/ 1em 2px /*非法*/ 1px 2em
數量符號-+
<color-stop> [, <color-stop> ]+ /*+表示前面修飾的值可以出現1次或多次*/ /*合法值*/ #fff , red blue, green 50%, grey /*不合法*/ red /*因為+表示至少要出現一次，而這裡出現了0次*/
數量符號-?
inset?&&<color> /*?表示可以出現也可以不出現*/ /*合法*/ inset blue red /*由於是可選的，所以即使不出現也是符合語法的*/
數量符號-{}
<length>{2,4} /*{}表示可以出現的次數，最少2次最多4次*/ /*合法值*/ 1px 2px 1px 2px 3em /*非法*/ 2px /*因為只出現了1次*/
數量符號-*
<time> [, <time>]*
/*表示可以出現0次或多次*/ /*合法*/ 1s 1s, 4ms 1s, 3ms, 2s
數量符號-#
<time># /*需要出現1次或多次，中間必須用,都好隔開*/ /*合法*/ 2s, 4s /*不合法*/ 2s 4s /*因為他用空格隔開了*/