css属性值语法解读

//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 /*因为他用空格隔开了*/