css属性值语法解读
来源：互联网 发布：软件系统集成商 编辑：程序博客网 时间：2024/05/16 13:52
//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 && 1px10px && red//非法purple10px上面由&&连接了两个基本类型，他们是必须出现的，但是其顺序是不要求的
组合符号-||
underline || overline || line-through || blink//表示至少要出现一个，顺序是没有关系的//合法的：underline overline underlineline-through blink overline上面由||连接了四个关键字类型的值，他们必须出现至少一个，但是其出现顺序没有关系
组合符号-|
<color> | transparent//由|连接的值表示只能出现一个//合法值：orangetransparentred#134556//非法值：orange transparent组合符号-[]
bold [ thin || <length> ]/*[]表示一个作为一个整体来对待*///合法： bold thin bold 2em
//非法：
2em bold //原因是空格组合符号表示必须按顺序出现，但是这里顺序颠倒了
数量符号-无
<length>/*这里没有数量符号修饰，则表示只有一个可以出现*//*合法值*/1em2px/*非法*/1px 2em
数量符号-+
<color-stop> [, <color-stop> ]+/*+表示前面修饰的值可以出现1次或多次*//*合法值*/#fff , redblue, green 50%, grey/*不合法*/red /*因为+表示至少要出现一次，而这里出现了0次*/
数量符号-?
inset?&&<color>/*?表示可以出现也可以不出现*//*合法*/inset bluered /*由于是可选的，所以即使不出现也是符合语法的*/
数量符号-{}
<length>{2,4}/*{}表示可以出现的次数，最少2次最多4次*//*合法值*/1px 2px1px 2px 3em/*非法*/2px /*因为只出现了1次*/
数量符号-*
<time> [, <time>]*
/*表示可以出现0次或多次*//*合法*/1s1s, 4ms1s, 3ms, 2s
数量符号-#
<time>#/*需要出现1次或多次，中间必须用,都好隔开*//*合法*/2s, 4s/*不合法*/2s 4s /*因为他用空格隔开了*/
