CSS教程中的属性取值正则表达式介绍(一)

这几天经常有同学反映CSS教程中的属性的取值看不明白。比如background-position的取值[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 。

首先CSS属性的取值是参考了w3c对CSS属性取值的方式(是利用正则表达式表示的),我感觉这种方式能全面的表现CSS属性的各种取值情况。(正则表达式我将在js教程中详细介绍)

下面我就简单介绍一下几个已经涉及到的取值表达式(正则表达式)的符号的含义:

| -- 代表“或”的意思(有且只有一个)

比如color属性的取值: <color> | inherit 。此取值方式说明可以使用<color>(颜色表示法)或者inherit(继承),而且我们只能在<color>和inherit中选其一。(inherit是继承的意思,CSS高级教程我将介绍)

目前CSS教程中的大部分属性都只使用了“|”符号。比较简单:)

 

|| -- 代表“可以取一个或多个”(正好和|符号相对应)

比如background属性的取值:[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit

首先我们将其分解为三部分:

第一部分:

[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]

第二部分:

|

第三部分:

inherit

从上面的分解可以看出background只能有两种取值方式,只能取[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]或者只能取inherit。

如果我们选择第一种取值方式[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>],那么这个取值表达式本身就包含了一个取值表达式。

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>的意思就是说可以取这5种情况的一个或多个。

 

[] -- 代表一个匹配(就是一个表达式)

就是说当不能用一个值来简单的表达的时候,我们就应该使用[]

比如inherit就是一个值,我们就没有必要加[]了,当然加了也没关系。

像<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>不是一个简单的值(是一个表达式),就应该加[]表示。

今天先讲到这(不知道大家明白了吗?),大家先消化一下,过两天我再给大家讲background-position的取值表达式。