• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • css 属性值定义语法

    CSS属性值定义语法(CSS value definition syntax)是用来限定CSS属性合法取值的专门语法。在此基础之上,一个CSS属性的合法取值也由语义所限制,比如一些数字必须是正数。

    CSS属性值定义语法描述了哪些值是可取的CSS属性,基本组成元素包括关键字、符号与带类型的参数。

    基本组成元素

    关键字

    一般关键字

    有预定义含义的一般关键字按字面意义出现,不需要引号,如auto,smallerease-in

    特殊关键字:inheritinitialunset

    所有CSS属性值都可以使用inheritinitialunset,它们的定义贯穿 CSS 始终。它们未显示在值定义中,但都是隐含可用的。

    符号

    CSS中,有一些符号是可以出现的,比如斜杠('/')或者逗号(',')等。它们用来分隔属性值:逗号用来分隔数个并列值,或者分隔函数的参数;斜杠用来分隔一个值的多个部分,通常用在CSS缩写中分离具有相同类型但属于不同属性的组件。

    这两种符号会以其字面意义出现在CSS属性值定义中。

    带类型的参数

    基本类型

    一些类型在CSS中经常出现,CSS规范中将其专门定义,称为基本类型,用一对尖括号表示:'<'与'>',例如: 用于表示角的大小,单位为度(degrees)、 百分度(gradians)、弧度(radians)或圈数(turns)。在 <gradient> 和 transform 的某些方法等场景中有所应用。"><angle>, 数据类型是由包含在英文双引号(")或英文单引号(')中的任意数量的Unicode字符组成。"><string>,…

    其他类型

    其他类型同样也用一对尖括号表示:'<'与'>'。

    其他类型分为两种:

    • 共享同一个属性名称的数个类型。在这种情况下,数据类型与属性共享同一组值。它们出现在一对引号之中,经常用于属性的缩写。
    • 不共享同一个属性名称的数个类型,它们与基本类型很相似,不同是:这种参数仅在规范中相关属性的描述处定义,而基本类型在规范中有专门定义。

    组合符号

    方括号

    方括号将数个基本元素组成一个整体,用来强调组合的优先级。例如:

    bold [ thin && <length> ]

    以下均为该例的合法取值:

    • bold thin 2vh
    • bold 0 thin
    • bold thin 3.5em

    但以下不是合法取值:

    • thin bold 3em因为bold被放置在方括号定义的整体之中。根据定义,bold必须出现在方括号定义的整体之前。

    并置

    并置是指将数个关键字、符号或类型,用空格分开写在一起。并置中所有的元素都必须出现并且按所规定的顺序出现。例如:

    bold <length> , thin
    

    以下均为该例的合法取值:

    • bold 1em, thin
    • bold 0, thin
    • bold 2.5cm, thin
    • bold 3vh, thin

    但以下不是合法取值:

    • thin 1em, bold因为顺序有错。
    • bold 1em thin因为所有元素都必须出现,包括逗号。
    • bold 0.5ms, thin因为ms是时间值,不是长度值:是表示距离尺寸的一种css数据格式。许多CSS属性使用它,比如width、margin、padding、font-size、border-width、text-shadow。"><length>

    “与”组合符:&&

    “与”组合符连接的各个部分都必须出现,但是顺序任意。例如:

    bold && <length>
    

    以下均为该例的合法取值:

    • bold 1em
    • bold 0
    • 2.5cm bold
    • 3vh bold

    但以下不是合法取值:

    • bold因为长度值没有出现。
    • bold 1em bold因为各部分必须恰好出现一次。
    注:并置的优先级高于“与”组合符。例如bold thin &&<length>等价于[bold thin ]&&<length>。它们的合法取值是:bold thin <length><length> bold thin但不是bold <length> thin

    “或”组合符:||

    “或”组合符表示其连接的所有组成元素是可选的,次序任意,但是至少其中一个要出现。“或”组合符通常用来描述属性缩写中的各部分。

    <'border-width'> || <'border-style'> || <'border-color'>
    

    以下均为该例的合法取值:

    • 1em solid blue
    • blue 1em
    • solid 1px yellow

    但以下不是合法取值:

    • blue yellow因为一个组成部分最多出现一次。
    • bold因为它不允许出现。
    注:“与”组合符的优先级高于“或”组合符,比如bold || thin &&<length>等价于bold ||[ thin &&<length>]。它们的合法取值是:bold,thin<length>,bold thin<length>,或者thin <length> bold,但不是:<length> bold thin因为bold若出现,则必须出现在thin &&<length>整体的前面或后面。

    “互斥”组合符:|

    “互斥”组合符表示各组成部分中只能恰好出现一个,通常用来分隔一个属性的所有可选值。例如:

    <percentage> | <length> | left | center | right | top | bottom

    以下均为该例的合法取值:

    但以下不是合法取值:

    • center 3% as only one of the components must be present.
    • 3em 4.5em as a component must be present at most one time.

    注:“或”组合符的优先级高于“互斥”组合符,比如bold | thin ||<length>等价于bold |[ thin ||<length>]。它们的合法取值是:bold,thin,<length>,<length> thin,或thin <length>,但不能是bold <length>,因为“互斥”组合符所连接的数个部分中,只有一个能出现。

    数量符号

    数量符号用来描述一个元素可以出现多少次。若不标注,则这个元素比如恰好出现一次。

    注意数量描述符不能叠加出现,并且优先级最高。

    星号(*)

    星号表示可以出现零次(即不出现),一次,或任意多次。例如:

    bold smaller*

    以下均为该例的合法取值:

    • bold
    • bold smaller
    • bold smaller smaller
    • bold smaller smaller smaller and so on.

    但以下不是合法取值:

    • smaller因为bold并置于smaller,必须出现在任何smaller之前。

    加号(+)

    加号表示可以出现一次或多次。例如:

    bold smaller+

    以下均为该例的合法取值:

    • bold smaller
    • bold smaller smaller
    • bold smaller smaller smaller and so on.

    但以下不是合法取值:

    • bold因为smaller必须出现至少一次。
    • smaller因为bold是并置关系,必须在smaller之前出现。

    问号(?)

    问号表示可选,即出现零次或一次。例如:

    bold smaller?

    以下均为该例的合法取值:

    • bold
    • bold smaller

    但以下不是合法取值:

    • bold smaller smaller因为smaller最多出现一次。
    • smaller因为bold是并置关系,必须出现在smaller之前。

    大括号({})

    大括号包含两个以逗号分隔的整数A与B,表示最少出现A次,且最多出现B次。例如:

    bold smaller{1,3}

    以下均为该例的合法取值:

    • bold smaller
    • bold smaller smaller
    • bold smaller smaller smaller

    但以下不是合法取值:

    • bold因为smaller至少要出现一次。
    • bold smaller smaller smaller smaller因为smaller最多出现三次。
    • smaller因为bold是并置关系,必须出现在smaller之前。

    井号(#)

    井号表示可以出现一次或多次,与加号相似。但是其多次出现必须以逗号分隔。例如:

    bold smaller#

    以下均为该例的合法取值:

    • bold smaller
    • bold smaller, smaller
    • bold smaller, smaller, smaller and so on.

    但以下不是合法取值:

    • bold因为smaller必须至少出现一次。
    • bold smaller smaller smaller因为多个smaller必须以逗号分隔。
    • smaller因为bold是并置关系,必须出现在smaller之前。

    叹号(!)

    组后面的叹号表示该组是必需的,并且至少产生一个值;即使组内项目的语法允许省略全部的值,也至少要保留一个值。

    [ bold? smaller? ]!
    

    以下均为该例的合法取值:

    • bold
    • smaller
    • bold smaller

    但以下不是合法取值:

    • boldsmaller都没有:因为至少要出现一个。
    • smaller bold:因为bold必须出现在smaller前面。
    • bold smaller bold:因为bold只能出现一次。

    总结

    符号名称描述示例
    组合符号
    并置各部分必须出现且按顺序出现solid <length>
    &&“与”组合符各部分必须出现,但可以不按顺序<length>&&<string>
    ||“或”组合符各部分至少出现一个,可以不按顺序<'border-image-outset'>||<'border-image-slice'>
    |“互斥”组合符各部分恰好出现一个smaller | small | normal | big | bigger
    []方括号强调优先级bold[ thin &&<length>]
    数量符号
    无数量符号恰好一次solid
    *星号零次、一次或多次bold smaller*
    +加号一次或多次bold smaller+
    ?问号零次或一次(即可选)bold smaller?
    {A,B}大括号至少A次,至多Bbold smaller{1,3}
    #井号一次或多次,但多次出现必须以逗号分隔bold smaller#
    !叹号组必须产生一个值[ bold? smaller?]!