理解 CSS 属性值语法

njcl6522 5年前
   <p>万维网联盟(W3C)使用了一套特别的语法来定义 CSS 的属性值,能让所有的 CSS 属性都用。如果你曾看过 CSS 规范,你可能已经见过这套语法了。就像 <a href="/misc/goto?guid=4959734153320181671" rel="nofollow,noindex"> border-image-slice 的语法 </a> ,让我们看看:</p>    <pre>  <code class="language-css"><'border-image-slice'> = [<number> | <percentage>]{1,4} && fill?</code></pre>    <p>如果你不知道这些符号以及它们如何工作的话,这套语法可能非常难理解。然而,这值得花时间来学。如果你理解 W3C 是如何定义这些属性值的,你就可以理解 W3C <a href="/misc/goto?guid=4959552864623639347" rel="nofollow,noindex">CSS 规范</a> 中任意一个了。</p>    <p><img src="https://simg.open-open.com/show/5839686ad8104dcbe1121ec5d134057f.jpg"></p>    <h2>巴科斯范式</h2>    <p>首先,我们看看巴科斯范式(Backus-Naur Form),因为这能帮我们理解 W3C 的属性值语法。</p>    <p><a href="/misc/goto?guid=4959734153455839962" rel="nofollow,noindex">Backus–Naur Form</a> (BNF) 是用来描述计算机语言语法的正式符号集。它被设计得很清晰,所以在语言如何表达方面不会造成二义或者模糊。</p>    <p>最初 Backus-Naur 符号集有很多的扩展与变种在今天都在使用,包括 <a href="/misc/goto?guid=4959734153548360267" rel="nofollow,noindex">扩展巴科斯范式</a> (EBNF)和 <a href="/misc/goto?guid=4959734153640800240" rel="nofollow,noindex">扩充巴克斯范式</a> (ABNF).</p>    <p>一个 BNF 规范是按下面的形式编写的一套规则:</p>    <pre>  <code class="language-css"><symbol>  ::=  __expression__</code></pre>    <p>式子左边通常是一个非终止符,跟着一个 ::= 符号,代表着“可被换为”。式子右边 __expression__ 由一或多个符号序列组成,这些符号序列被用来推导左侧符号的意义。</p>    <p>BNF 规范从根本上说,“无论左侧式子是什么,也无论右侧式子是什么,左侧的式子都能被右侧的式子替换”。</p>    <h2>非终止符与终止符</h2>    <p>非终止符是指能在之后被替换或被分解的符号。在 BNF 中,非终止符通常都在尖角括号中, < 与 > 。在下面的例子中, <integet> 和 <digit> 是非终止符。</p>    <pre>  <code class="language-css"><integer>  ::=  <digit> | <digit><integer></code></pre>    <p>终止符表明这个值不能被替换或者分解。在下面的例子中,所有的数值都是终止符。</p>    <pre>  <code class="language-css"><digit>  ::=  0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9</code></pre>    <h2>CSS 属性值语法</h2>    <p>尽管 W3C CSS 属性值语法是基于 BNF 的概念,它们也有一些不同。像 BNF 的是,它起始于一个非终止符。不像 BNF 的是,它还描述了用在表达式中作为“成分值(component values)”的符号。</p>    <p>在下面的例子中, <line-width> 是非终止符,而 <length> , thin , medium 和 thick 是成分值。</p>    <pre>  <code class="language-css"><line-width>  =  <length> | thin | medium | thick</code></pre>    <h2>成分值</h2>    <p>有四种成分值:关键字、基本数据类型、属性数据类型与非数据数据类型。</p>    <h3>1. 关键字值</h3>    <p>关键字值不被引号或尖角括号包围。它们可直接作为属性值。因为它们不能再被代替或分解,所以它们是终止符。在下面的例子中, thin 、 medium 和 thick 都是关键字值。这意味着它们在 CSS 中直接使用。</p>    <pre>  <code class="language-css"><line-width>  =  <length> | thin | medium | thick</code></pre>    <h3>2. 基本数据类型</h3>    <p>基本数据类型定义了一些核心值,如 <length> 与 <color> 。它们是非终止符,因为它们可以被替换成真实的长度或颜色值。在下面的例子中 <color> 是基本数据类型。</p>    <pre>  <code class="language-css"><'background-color'>  =  <color></code></pre>    <p><color> 可在我们的 CSS 中,通过关键字,扩展关键字, RGB 、 RGBA 、 HSL 、 HSLA ,或 transparent 关键字,被替换为实际的颜色值。</p>    <pre>  <code class="language-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; }</code></pre>    <h3>3. 属性数据类型</h3>    <p>属性数据类型定义了属性实际的名字,是非终止符。它由包含在尖角括号中的属性名(包含引号)定义。在下面的例子中, <'border-width'> 是属性数据类型。</p>    <pre>  <code class="language-css"><'border-width'>  =  <line-width>{1,4}</code></pre>    <p>属性数据类型可作为属性直接出现在我们的 CSS 文件中。在下面的例子中, border-width 属性给 .exmplate 类定义了 2px 的边框。</p>    <pre>  <code class="language-css">.example { border-width: 2px; }</code></pre>    <h3>4. 非属性数据类型</h3>    <p>非属性数据类型并不与属性分享同一个名字,是非终止符。然而,它定义了某个(些)属性的一些层面。例如, <line-width> 不是个属性,但它是一个定义了各种 <border> 的数据类型。</p>    <pre>  <code class="language-css"><line-width>  =  <length> | thin | medium | thick  <'border-width'>  =  <line-width>{1,4}</code></pre>    <h2>成分值组合器(Combinator)</h2>    <p>使用下面的五个方法,成分值能被分配至属性值组合器:</p>    <h3>1. 相邻值</h3>    <p>成分值接连而写意味着所有这些值都必须按给定的顺序出现。在下面的例子中,语法列出了三个不同的值: value1 , value2 与 value3 。在 CSS 规则中,这三个值必须按照正确的顺序出现才算合法。</p>    <pre>  <code class="language-css">/* Component arrangement: all in given order */  <'property'> = value1 value2 value3    /* Example */  .example { property: value1 value2 value3; }</code></pre>    <h3>2. 双与符号(&)</h3>    <p>分开两个或更多成分值的双与符号( && )意味着,这些值必须出现,顺序任意。在下面的例子中,语法列出了两个值,由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。</p>    <pre>  <code class="language-css">/* Component arrangement: all, in any order */  <'property'> = value1 && value2    /* Examples */  .example { property: value1 value2; }  .example { property: value2 value1; }</code></pre>    <h3>3. 单管道符号</h3>    <p>分开两个或更多成分值的单管道符号( | )意味着,这些值中只需一个值出现。在下面的例子中,语法列出了三个值,由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项:</p>    <pre>  <code class="language-css">/* Component arrangement: one of them must occur */  <'property'> = value1 | value2 | value3    /* Examples */  .example { property: value1; }  .example { property: value2; }  .example { property: value3; }</code></pre>    <h3>4. 双管道符号</h3>    <p>分开两个或更多选择的双管道符号( || )意味着,这些值中一个或多个值必须出现,顺序任意。在下面的例子中,语法列出了三个值,由双管道符号分开。在你写 CSS 规则来匹配这个语法时,有大量可选的选择 —— 你可以使用一个,两个或三个值,以任意顺序。</p>    <pre>  <code class="language-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</code></pre>    <h3>5. 中括号</h3>    <p>包住了两个或更多选择的中括号( [ ] )意味着其中的成分值属于一个单独的组。在下面的例子中,语法列出了三个值,但其中两个在中括号中,所以它们属于一个组。所以在 CSS 规则中有两种选择: value1 与 value3 或 value2 与 value3 。</p>    <pre>  <code class="language-css">/* Component arrangement: a single grouping */  <'property'> = [ value1 | value2 ] value3    /* Examples */  .example { property: value1 value3; }  .example { property: value2 value3; }</code></pre>    <h2>成分值累乘器(Multipliers)</h2>    <p>使用下列 8 个方法之一,成分值也可被重用:</p>    <h3>1. ?</h3>    <p>问号( ? )表明其之前的类型,关键字或者组,是可选的且出现零次或一次。在下面的例子中,第二个成分值与一个逗号一起放在了中括号里。放置其后的问号意味着, value1 必须出现,但我们也可使用 value1 和 value2 ,以逗号分隔。</p>    <pre>  <code class="language-css">/* Component multiplier: zero or one time */  <'property'> = value1 [, value2 ]?    /* Examples */  .example { property: value1; }  .example { property: value1, value2; }</code></pre>    <h3>2. *</h3>    <p>星号( * )表明其之前的类型,关键字或者组出现零次或更多次。在下面的例子中,第二个成分值与一个逗号一起放在了中括号里。放置其后的星号意味着, value1 必须出现,但我们也能随我们想地使用 value2 任意次,每个成分值以逗号分隔。</p>    <pre>  <code class="language-css">/* Component multiplier: zero or more times */  <'property'> = value1 [, <value2> ]*    /* Examples */  .example { property: value1; }  .example { property: value1, <value2>; }  .example { property: value1, <value2>, <value2>; }  .example { property: value1, <value2>, <value2>, <value2>; }  ...etc</code></pre>    <h3>3. +</h3>    <p>加号( + )表明其之前的类型,关键字或者组出现一次或更多次。在下面的例子中,放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。</p>    <pre>  <code class="language-css">/* Component multiplier: one or more times */  <'property'> = <value>+    /* Examples */  .example { property: <value>; }  .example { property: <value> <value>; }  .example { property: <value> <value> <value>; }  ...etc</code></pre>    <h3>4. {A}</h3>    <p>大括号( {A} )中包含一个数字表明其之前的类型,关键字或者组出现 A 次。在下面的例子中,value 的两个实例都必须根据出现才合法。</p>    <pre>  <code class="language-css">/* Component multiplier: occurs A times */  <'property'> = <value>{2}    /* Examples */  .example { property: <value> <value> ; }</code></pre>    <h3>5. {A,B}</h3>    <p>大括号( {A,B} )中包含由逗号分开的两个数字表明其之前的类型,关键字或者组出现至少 A 次,至少 B 次。在下面的例子中,最少一个、最多三个值肯能被用来定义该属性。这些成分值不以逗号分离。</p>    <pre>  <code class="language-css">/* Component multiplier: at least A and at most B */  <'property'> = <value>{1,3}    /* Examples */  .example { property: <value>; }  .example { property: <value> <value>; }  .example { property: <value> <value> <value>; }</code></pre>    <h3>6. {A,}</h3>    <p>在 {A,} 中 B 被省去了,这意味着至少有 A 次重复,而没有上限。在下面的例子中,至少需要使用一个成分值,但也可以额外使用任意数量的成分值值。这些成分值不以逗号分离。</p>    <pre>  <code class="language-css">/* Component multiplier: at least A, with no upper limit */  <'property'> = <value>{1,}    /* Examples */  .example { property: <value>; }  .example { property: <value> <value>; }  .example { property: <value> <value> <value> ; }  ...etc</code></pre>    <h3>7. #</h3>    <p>井号( # )表明其之前的类型,关键字或者组出现一次或多次。在下面的例子中,一个或多个成分值可能被使用,这些成分值以逗号分离。</p>    <pre>  <code class="language-css">/* Component multiplier: one or more, separated by commas */  <'property'> = <value>#    /* Examples */  .example { property: <value>; }  .example { property: <value>, <value>; }  .example { property: <value>, <value>, <value>; }  ...etc</code></pre>    <h3>8. !</h3>    <p>一个组后的感叹号( ! )意味着该组是必须的且产生至少一个值。在下面的例子中, value1 是必须的,以及一个来自与由 value2 与 value3 组成的组的值。该属性只有两个属性值;它们是, value1 与 value2 或 value1 与 value3 。</p>    <pre>  <code class="language-css">/* Component multiplier: required group, at least one value */  <'property'> = value1 [ value2 | value3 ]!    /* Examples */  .example { property: value1 value2; }  .example { property: value1 value3; }</code></pre>    <h2>一个例子: <'text-shadow'> 语法</h2>    <p>让我们把 <'text-shadow'> 当作例子观察一番。这是它在 <a href="/misc/goto?guid=4959734153733888490" rel="nofollow,noindex">规范</a> 里的定义:</p>    <pre>  <code class="language-css"><'text-shadow'> = none | [ <length>{2,3} && <color>? ]#</code></pre>    <p>我们可以拆分这些符号:</p>    <ul>     <li>| 表明我们可以使用关键字 none 或者一个组</li>     <li># 表明我们可以使用这个组一次或多次,以逗号分割</li>     <li>在组中, {2,3} 表明我们可以使用 2 或 3 个长度值</li>     <li>&& 意味着我们必须包括所有值,但顺序可以任意</li>     <li>有点棘手的是, <color> 后有一个 ? ,这意味着其可能出现零次或一次。</li>    </ul>    <p>用简单的话讲,这也可以被写成:</p>    <p>指明了 none <strong>或</strong> 一个或多个由逗号分离的组,其中包含了二到三个长度值与一个可选的颜色值。长度值与可选的颜色值可以以任意顺序编写。</p>    <p>这意味着我们能够以很多不同的方式来写 text-shadow 属性的值。例如,可以设置其为 none :</p>    <pre>  <code class="language-css">.example { text-shadow: none; }</code></pre>    <p>我们也可以只写两个长度值,这意味着我们将设置阴影水平与竖直方向的便宜,但不会有模糊半径或者颜色值。</p>    <p>因为没有定义模糊半径,将会使用初始值 0 ;所以,该阴影的边缘会很锋利。由于没有定义颜色,所以阴影将使用文本的颜色。</p>    <pre>  <code class="language-css">.example { text-shadow: 10px 10px; }</code></pre>    <p>如果我们使用了三个长度值,我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。</p>    <pre>  <code class="language-css">.example { text-shadow: 10px 10px 10px; }</code></pre>    <p>我们也可以加入颜色,且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中, red 值可以放在任一长度值的后面。</p>    <pre>  <code class="language-css">.example { text-shadow: 10px 10px 10px red; }  .example { text-shadow: red 10px 10px 10px; }</code></pre>    <p>最后,我们也能包含多个文本阴影,写作以逗号分隔的组。阴影效果将从前至后分层应用:第一个阴影在最顶层,其它的层在其后。阴影不能覆盖在文本上。在下面的例子中,红色阴影将在绿黄色阴影的顶上。</p>    <pre>  <code class="language-css">.example {      text-shadow:          10px 10px red,          -20px -20px 5px lime;  }</code></pre>    <h2>结论</h2>    <p>如果你以写 CSS 为生,了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的,CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。</p>    <p>如果像拓展阅读,看看下列的网站吧:</p>    <ul>     <li>“ <a href="/misc/goto?guid=4959734153829862687" rel="nofollow,noindex">Value Definition Syntax</a> ” in “CSS Values and Units Module Level 3”, W3C</li>     <li>“ <a href="/misc/goto?guid=4959734153920934148" rel="nofollow,noindex">CSS Reference</a> ,” Mozilla Developer Network</li>     <li>“ <a href="/misc/goto?guid=4959734154008212643" rel="nofollow,noindex">How to Read W3C Specs</a> ,” J. David Eisenberg, A List Apart</li>    </ul>    <p> </p>    <p>来自:http://www.w3cplus.com/css/understanding-the-css-property-value-syntax.html</p>    <p> </p>