理解CSS属性值语法

作者: 前端知识  发布:2019-08-08

理解CSS属性值语法

2016/08/12 · CSS · 属性值

本文由 伯乐在线 - 殊 翻译,艾凌风 校稿。未经许可,禁止转载!
英文出处:Russ Weakley。欢迎加入翻译组。

W3C 使用特定的语法来定义所有可能在 CSS 属性中使用的值。如果你曾经看过 CSS 规范,你可能已经见过这种语法的使用 – 比如 border-image-slice 语法。让我们来看看:

CSS

<'border-­image-­slice'> = [<number> | <percentage>]{1,4} && fill?

1
<'border-­image-­slice'> = [<number> | <percentage>]{1,4} && fill?

这个语法可能很难理解-如果你不知道其中的各个符号和他们是怎样生效的话。但是,这是值得花时间去学习的。如果你理解了 W3C 是怎样定义这些属性值,你就能理解 W3C 的任何 CSS 规范。

图片 1

概念

cascading style sheet 成叠样式表
主要定义页面中的表现

巴科斯范式

我们将从巴科斯范式开始,因为这会帮助我们理解 W3C 的属性值语法。 巴科斯范式( BNF )是一种用来描述计算机语言语法的符号集。它的设计是明确的,所以对于如何表示语言这方面不存在分歧或歧义。 如今广泛使用的是巴科斯范式的扩展和编译版本,包括扩展巴科斯范式( EBNF )和扩充巴科斯范式( ABNF )。 一个 BNF 规范是一组按照下面的方式书写的规则:

CSS

<symbol> ::= __expression__

1
<symbol>  ::=  __expression__

左边的部分总是一个非终结符,随后是一个 ::= 符号,这个符号的意思是“可以被替换为”。右边是一个 __expression__ ,包含一个或更多用来推导左边符号的含义的符号。 BNF 的基本规范说,“左边的任何都可以被右边的替换”。

发展史

1996 css1,1998 css2,2007 css2.1,2001 css3

非终结符和终结符

非终结符是可以被替换或再细分的符号。在 BNF 中,非终结符出现在 < > 中。在下面的例子中,<integer><digit>是非终结符。

CSS

<integer> ::= <digit> | <digit><integer>

1
<integer>  ::=  <digit> | <digit><integer>

终结符就代表一个值不可被替换或者再细分。在下面的例子中,所有的数值都是终结符。

CSS

<digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

1
<digit>  ::=  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

引入

  • 外部样式表
<head>
    <link rel="stylesheet" href="base.css">
</head>

用link标签引入外部样式表,href属性里写css文件地址

  • 内部样式表
<head>
    <style>
        body{background-color:red}
        p{margin-left:20px}
    </style>
</head>

通过style标签引入,样式内容少时用内部样式。

  • 内嵌样式
<p style="color:red;margin-left:20px;">
    this is a paragraph
</p>

使得html与css杂合在一起不利于维护。不建议引用

CSS 属性值语法

虽然 W3C 的 CSS 属性值语法是基于 BNF 的概念,但它还是有差异的。相似之处在于它开始于非终结符,不同之处在于它使用“组合值”这种表达式来描述符号。 在下面的例子中,<line-width>是一个非终结符,<length>thinmediumthick 就是组合值。

CSS

<line-­width> = <length> | thin | medium | thick

1
<line-­width>  =  <length> | thin | medium | thick

语法

/*用户列表*/
.m-userlist{margin: 0 0 30px}
.m-userlist.list{position: relative;height: 93px;overflow: hidden;}
.m-userlist.list ul{margin: -13px 0 0 -13px;zoom:1;}

selector{property1:value;property2:value;}
大括号之前为选择器,大括号里面属性声明,每个属性声明用分号隔开,每个属性声明=属性名:属性值
注释/* */

组合值

有四种类型的组合值:关键词,基本数据类型,属性数据类型和非属性数据类型。

浏览器私有属性

  • chrome,safari
    -webkit
  • firefox
    -moz
  • IE
    -ms-
  • opera
    -o-
    私有属性为了兼容不同浏览器书写如下
.pic{
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transrorm:rotate(-3deg);
}

把私有的属性写着前面,把标准的写着后面。

1.关键词

关键词出现时不带引号或者尖括号。它们被用作属性值。因为它们不能被替换或者进一步细分,所以它们是终结符。在下面的例子中,thinmediumthick 都是关键词。这意味着它们可以被用作我们 CSS 中的值。

CSS

<line-­width> = <length> | thin | medium | thick

1
<line-­width>  =  <length> | thin | medium | thick

属性值语法

margin: [<length>|<percentage>|auto]{1,4}
基本元素,组和符号,数量符号

2.基本数据类型

基本数据类型定义核心值,如<length><color>。它们是非终结值因为它们可以被实际的长度值或者颜色值来替换。在下面的例子中,<color>符号是一个基本数据类型。

CSS

<'background-color'> = <color>

1
<'background-color'>  =  <color>

这个<color>在我们的 CSS 中可以被一个真实的颜色值替换,使用一个关键词,一个扩展的关键词,一个 RGB 颜色值,RGBA 值,HSL 或者 HSLA 值,或者 transparent 这个关键词。

CSS

.example { background-color: red; } .example { background-color: honeydew; } .example { background-color: rgb(50%,50%,50%); } .example { background-color: rgba(100%,100%,100%,.5); } .example { background-color: hsl(280,100%,50%); } .example { background-color: hsla(280,100%,50%,0.5); } .example { background-color: transparent; }

1
2
3
4
5
6
7
.example { background-color: red; }
.example { background-color: honeydew; }
.example { background-color: rgb(50%,50%,50%); }
.example { background-color: rgba(100%,100%,100%,.5); }
.example { background-color: hsl(280,100%,50%); }
.example { background-color: hsla(280,100%,50%,0.5); }
.example { background-color: transparent; }

基本元素

  • 关键字
    -auto,solid,bold…
  • 类型
    基本类型(<length>,<percentage>,<color>…)
    其他类型(<'padding-width'>.<color-stop>…)
  • 符号(/,)
    分割属性值
  • inherit,initial

3.属性数据类型

属性数据类型是一个用来定义属性真实值的一个非终结符号。它用尖括号包住属性的名字(使用引号包住)。在下面的例子中,<'border-width'>字符是一个属性数据类型。

CSS

<'border-­width'> = <line-­width>{1,4}

1
<'border-­width'>  =  <line-­width>{1,4}

属性数据类型可能会直接作为属性出现在我们的 CSS 中。在下面的例子中,border-width属性就被用来为.example类名定义一个 2px 的边框。

CSS

.example { border-width: 2px; }

1
.example { border-width: 2px; }

组和符号-空格

<'font-size'> <'font-family'>
两个都要出现且顺序一致

  • 合法值
    -12px arial
  • 不合法值
    -2em
    -arial 14px

4.非属性数据类型

非属性数据类型是一个和属性名称不相同的非终结符。然而,它定义了某个属性的各方面。举例来说,<line-width>不是一个属性,但是它是一个定义了各种<border>属性的数据类型。

CSS

<line-­width> = <length> | thin | medium | thick <'border-­width'> = <line-­width>{1,4}

1
2
<line-­width>  =  <length> | thin | medium | thick
<'border-­width'>  =  <line-­width>{1,4}

组和符号-&&

<length>&&<color>
两个都要出现,顺序不要求

  • 合法值
    -green 2px
    -1em blue
  • 不合法值
    -blue

组合值选择符

组合值可以通过下面五种方法之一被用到属性值选择符中。

组合符号-||

underline||overline||line-through||blink
至少出现一个顺序没有关系

  • 合法值
    -underline
    -overline underline

1.相邻值

组合值中一个接着一个的写法意味着这些值都必须以给定的顺序出现。在下面的例子中,这种语法列出了3个不同的值:value1value2value3 。在 CSS 规则中,这三个值以正确的顺序出现在属性语法中才是有效的。

JavaScript

/* Component arrangement: all in given order */ <'property'> = value1 value2 value3 /* Example */ .example { property: value1 value2 value3; }

1
2
3
4
5
/* Component arrangement: all in given order */
<'property'> = value1 value2 value3
 
/* Example */
.example { property: value1 value2 value3; }

组和符号-|

<color>|transparent
两个基本元素只能出现一个

  • 合法值
    -orange
    -transparent
  • 不合法值
    -blue transparent

2.&&

用两个&符号(&&)分隔的两个或者多个值意味着它们必须出现,以任何顺序。在下面的例子中,这种语法列出两个值,通过 && 分隔。CSS 规则表明这两个值必须都要出现但是可能是任何顺序出现。

CSS

/* Component arrangement: all, in any order */ <'property'> = value1 && value2 /* Examples */ .example { property: value1 value2; } .example { property: value2 value1; }

1
2
3
4
5
6
/* Component arrangement: all, in any order */
<'property'> = value1 && value2
 
/* Examples */
.example { property: value1 value2; }
.example { property: value2 value1; }

组和符号-[]

bold[thin||<length>]
分组作用,大括号里可以看作一个整体

  • 合法值
    -bold thin
    -bold 2em

3.|

| 符号分隔的两个或者多个值意味着它们中的一个必须出现。在下面的例子中,这种语法列出 3 个值,通过 | 分隔。下面的 CSS 规则展示了 3 种可能的选择。

CSS

/* Component arrangement: one of them must occur */ <'property'> = value1 | value2 | value3 /* Examples */ .example { property: value1; } .example { property: value2; } .example { property: value3; }

1
2
3
4
5
6
7
/* Component arrangement: one of them must occur */
<'property'> = value1 | value2 | value3
 
/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }

数量符号-无

<length>
基本元素只能出现一次

  • 合法值
    -1px
    -10em

4.||

|| 分隔的两个或者多个值意味着它们中的一个或者多个必须出现,以任意的顺序。在下面的例子中,这种语法列出了 3 个值,它们通过 || 分隔。当你写 CSS 规则来匹配这个语法时,有很多可用的选择 – 你可以使用一个,两个,或者三个值,以任意的顺序。

CSS

/* Component arrangement: one or more in any order */ <'property'> = value1 || value2 || value3 /* Examples */ .example { property: value1; } .example { property: value2; } .example { property: value3; } .example { property: value1 value2; } .example { property: value1 value2 value3; } ...etc

1
2
3
4
5
6
7
8
9
10
/* Component arrangement: one or more in any order */
<'property'> = value1 || value2 || value3
 
/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }
.example { property: value1 value2; }
.example { property: value1 value2 value3; }
...etc

数量符号-+

<color-stop>[,<color-stop>]
出现一次或者多次

  • 合法值
    -#ff,red
    -blue,green50%,gray
  • 不合法值
    -red

本文由金沙澳门官网发布于前端知识,转载请注明出处:理解CSS属性值语法

关键词: 金沙澳门官网