css屬性值語法的詳細介紹
- 黄舟原創
- 2017-10-25 09:58:221734瀏覽
<div></div>
<p>萬維網聯盟（W3C） 使用了一套特別的語法來定義 CSS 的屬性值，能讓所有的 CSS 屬性都用。如果你曾經看過 CSS 規範，你可能已經看過這套文法了。就像 </p><pre class="brush:css;toolbar:false;">border-image-slice</pre><p> 的語法 ，讓我們看看：<br></p><pre class="brush:css;toolbar:false"><'border-image-slice'> = [<number> | <percentage>]{1,4} && fill?</pre><p>如果你不知道這些符號以及它們如何運作的話，這套語法可能非常難理解。然而，這值得花時間學習。如果你理解 W3C 是如何定義這些屬性值的，你就可以理解 W3C CSS 規範 中任一個了。 <br><br><img src="https://img.php.cn/upload/article/000/000/194/4b2e0cb3ffe4e9d2c7616cbfbd8d0a35-0.jpg" alt="css屬性值語法的詳細介紹" ><br><br></p>
<h2>巴科斯範式</h2>
<p>#首先，我們來看看巴科斯範式（Backus-Naur Form），因為這能幫我們理解W3C 的屬性值語法。 <br><br>Backus–Naur Form （BNF） 是用來描述電腦語言語法的正式符號集合。它被設計得很清晰，所以在語言如何表達方面不會造成二義或模糊。 <br><br>最初Backus-Naur 符號集有很多的擴展與變種在今天都在使用，包括 擴展巴科斯範式（EBNF）和擴充巴克斯範式（ABNF）.<br><br>#一個BNF 規範是按下面的形式編寫的一套規則：<br></p><pre class="brush:css;toolbar:false"><symbol> ::= __expression__</pre><p>式子左邊通常是一個非終止符，跟著一個 <br></p><pre class="brush:css;toolbar:false;">::=</pre><p> 符號，代表「可被換為」。式子右邊 </p><pre class="brush:plain;">__expression__</pre><p>由一或多個符號序列組成，這些符號序列被用來推導左邊符號的意義。 <br><br>BNF 規範從根本上說，「無論左側式子是什麼，也無論右側式子是什麼，左側的式子都能被右側的式子取代」。 <br><br></p>
<h2>非終止符與終止符</h2>
<p>非終止符是指能在之後被替換或被分解的符號。在 BNF 中，非終止符通常都在尖角括號中，</p><pre class="brush:plain;"><</pre><p> 與 </p><pre class="brush:plain;">></pre><p>。在下面的範例中，</p><pre class="brush:plain;"><integet></pre><p> 和 </p><pre class="brush:plain;"><digit></pre><p> 是非終止符。 <br></p><pre class="brush:css;toolbar:false"><integer> ::= <digit> | <digit><integer></pre><p>終止符表示這個值不能被取代或分解。在下面的例子中，所有的數值都是終止符。 <br></p><pre class="brush:css;toolbar:false"><digit> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9</pre><h2>CSS 屬性值語法</h2>
<p>#儘管 W3C CSS 屬性值語法是基於 BNF 的概念，它們也有一些不同。像 BNF 的是，它起始於一個非終止符。不像 BNF 的是，它也描述了用在表達式中作為「成分值（component values）」的符號。 <br><br>在下面的範例中，</p><pre class="brush:plain;"><line-width></pre><p> 是非終止符，而 </p><pre class="brush:plain;"><length></pre><p>，</p><pre class="brush:plain;">thin</pre><p>，</p><pre class="brush:plain;">medium</pre><p> 和 </p><pre class="brush:plain;">thick</pre><p> 是成分值。 <br></p><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick</pre><h2>成分值</h2>
<p>有四種成分值：關鍵字、基本資料型態、屬性資料型別與非資料資料型態。 <br></p>
<h3>1. 關鍵字值</h3>
<p>關鍵字值不會被引號或尖角括號包圍。它們可直接作為屬性值。因為它們不能再被代替或分解，所以它們是終止符。在下面的範例中，</p><pre class="brush:plain;">thin</pre><p>、</p><pre class="brush:plain;">medium</pre><p> 和 </p><pre class="brush:plain;">thick</pre><p> 都是關鍵字值。這意味著它們在 CSS 中直接使用。 <br></p><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick</pre><h3>2. 基本資料型別</h3>
<p>基本資料型別定義了一些核心值，如 </p><pre class="brush:plain;"><length></pre><p> 與 </p><pre class="brush:plain;"><color></pre><p>。它們是非終止符，因為它們可以被替換成真實的長度或顏色值。在下面的範例中 </p><pre class="brush:plain;"><color></pre><p> 是基本資料型別。 <br></p><pre class="brush:css;toolbar:false"><'background-color'> = <color></pre><pre class="brush:plain;"><color></pre><p> 可在我們的CSS 中，透過關鍵字，擴充關鍵字，RGB、RGBA、HSL、HSLA，或 </p><pre class="brush:plain;">transparent</pre><p> 關鍵字，被替換為實際的顏色值。 <br><br></p><pre class="brush:css;toolbar:false">.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; }</pre><h3>3. 屬性資料型別</h3>
<p>屬性資料型別定義了屬性實際的名字，是非終止符。它由包含在尖角括號中的屬性名（包含引號）定義。在下面的範例中，</p><pre class="brush:plain;"><'border-width'></pre><p> 是屬性資料型別。 <br></p><pre class="brush:css;toolbar:false"><'border-width'> = <line-width>{1,4}</pre><p>屬性資料型別可作為屬性直接出現在我們的 CSS 檔案中。在下面的範例中，<br></p><pre class="brush:plain;">border-width</pre><p> 屬性給 </p><pre class="brush:plain;">.exmplate</pre><p> 類別定義了 2px 的邊框。 <br></p><pre class="brush:css;toolbar:false">.example { border-width: 2px; }</pre><h3>4. 非屬性資料型別</h3>
<p>非屬性資料型別並不與屬性分享同一個名字，是非終止符。然而，它定義了某個（些）屬性的一些層面。例如，</p><pre class="brush:plain;"><line-width></pre><p> 不是屬性，但它是定義了各種 </p><pre class="brush:plain;"><border></pre><p> 的資料型別。 <br></p><pre class="brush:css;toolbar:false"><line-width> = <length> | thin | medium | thick
<'border-width'> = <line-width>{1,4}</pre><h2>成分值組合器（Combinator）</h2>
<p>使用下面的五個方法，成分值能被指派至屬性值組合器：<br></p>
<h3> 1. 相鄰值</h3>
<p>成分值接連而寫意味著所有這些值都必須依照給定的順序出現。在下面的範例中，文法列出了三個不同的值：</p><pre class="brush:plain;">value1</pre><p>, </p><pre class="brush:plain;">value2</pre><p> 與 </p><pre class="brush:plain;">value3</pre><p>。在 CSS 規則中，這三個值必須按照正確的順序出現才算合法。 <br></p><pre class="brush:css;toolbar:false">/* Component arrangement: all in given order */
<'property'> = value1 value2 value3
/* Example */
.example { property: value1 value2 value3; }</pre><h3>2. 雙與符號（&）</h3>
<p>分開兩個或更多成分值的雙與符號（</p><pre class="brush:plain;">&&</pre><p>）意味着，这些值必须出现，顺序任意。在下面的例子中，语法列出了两个值，由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。<br><br></p><pre class="brush:css;toolbar:false">/* Component arrangement: all, in any order */
<'property'> = value1 && value2
/* Examples */
.example { property: value1 value2; }
.example { property: value2 value1; }</pre><h3>3. 单管道符号</h3>
<p>分开两个或更多成分值的单管道符号（</p><pre class="brush:plain;">|</pre><p>）意味着，这些值中只需一个值出现。在下面的例子中，语法列出了三个值，由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项：<br><br></p><pre class="brush:css;toolbar:false">/* Component arrangement: one of them must occur */
<'property'> = value1 | value2 | value3
/* Examples */
.example { property: value1; }
.example { property: value2; }
.example { property: value3; }</pre><h3>4. 双管道符号</h3>
<p>分开两个或更多选择的双管道符号（</p><pre class="brush:plain;">||</pre><p>）意味着，这些值中一个或多个值必须出现，顺序任意。在下面的例子中，语法列出了三个值，由双管道符号分开。在你写 CSS 规则来匹配这个语法时，有大量可选的选择 —— 你可以使用一个，两个或三个值，以任意顺序。<br><br></p><pre class="brush:css;toolbar:false">/* 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</pre><h3>5. 中括号</h3>
<p>包住了两个或更多选择的中括号（</p><pre class="brush:plain;">[ ]</pre><p>）意味着其中的成分值属于一个单独的组。在下面的例子中，语法列出了三个值，但其中两个在中括号中，所以它们属于一个组。所以在 CSS 规则中有两种选择：</p><pre class="brush:plain;">value1</pre><p> 与 </p><pre class="brush:plain;">value3</pre><p> 或 </p><pre class="brush:plain;">value2</pre><p> 与 </p><pre class="brush:plain;">value3</pre><pre class="brush:css;toolbar:false">/* Component arrangement: a single grouping */
<'property'> = [ value1 | value2 ] value3
/* Examples */
.example { property: value1 value3; }
.example { property: value2 value3; }</pre><h2>成分值累乘器（Multipliers）</h2>
<p>使用下列 8 个方法之一，成分值也可被重用：<br></p>
<h3>1. <pre class="brush:plain;">?</pre></h3>
<p>问号（</p><pre class="brush:plain;">?</pre><p>）表明其之前的类型，关键字或者组，是可选的且出现零次或一次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的问号意味着，</p><pre class="brush:plain;">value1</pre><p> 必须出现，但我们也可使用 </p><pre class="brush:plain;">value1</pre><p> 和 </p><pre class="brush:plain;">value2</pre><p>，以逗号分隔。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: zero or one time */
<'property'> = value1 [, value2 ]?
/* Examples */
.example { property: value1; }
.example { property: value1, value2; }</pre><h3>2. <pre class="brush:plain;">*</pre></h3>
<p>星号（</p><pre class="brush:plain;">*</pre><p>）表明其之前的类型，关键字或者组出现零次或更多次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的星号意味着，</p><pre class="brush:plain;">value1</pre><p> 必须出现，但我们也能随我们想地使用 </p><pre class="brush:plain;">value2</pre><p> 任意次，每个成分值以逗号分隔。<br><br></p><pre class="brush:css;toolbar:false">/* 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</pre><h3>3. <pre class="brush:plain;">+</pre></h3>
<p>加号（</p><pre class="brush:plain;">+</pre><p>）表明其之前的类型，关键字或者组出现一次或更多次。在下面的例子中，放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: one or more times */
<'property'> = <value>+
/* Examples */
.example { property: <value>; }
.example { property: <value> <value>; }
.example { property: <value> <value> <value>; }
...etc</pre><h3>4. <pre class="brush:plain;">{A}</pre></h3>
<p>大括号（</p><pre class="brush:plain;">{A}</pre><p>）中包含一个数字表明其之前的类型，关键字或者组出现 </p><pre class="brush:plain;">A</pre><p> 次。在下面的例子中，value 的两个实例都必须根据出现才合法。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: occurs A times */
<'property'> = <value>{2}
/* Examples */
.example { property: <value> <value> ; }</pre><h3>5. <pre class="brush:plain;">{A,B}</pre></h3>
<p>大括号（</p><pre class="brush:plain;">{A,B}</pre><p>）中包含由逗号分开的两个数字表明其之前的类型，关键字或者组出现至少 </p><pre class="brush:plain;">A</pre><p> 次，至少 </p><pre class="brush:plain;">B</pre><p> 次。在下面的例子中，最少一个、最多三个值肯能被用来定义该属性。这些成分值不以逗号分离。<br><br></p><pre class="brush:css;toolbar:false">/* 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>; }</pre><h3>6. <pre class="brush:plain;">{A,}</pre></h3>
<p>在 </p><pre class="brush:plain;">{A,}</pre><p> 中 </p><pre class="brush:plain;">B</pre><p> 被省去了，这意味着至少有 </p><pre class="brush:plain;">A</pre><p> 次重复，而没有上限。在下面的例子中，至少需要使用一个成分值，但也可以额外使用任意数量的成分值值。这些成分值不以逗号分离。<br><br></p><pre class="brush:css;toolbar:false">/* 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</pre><h3>7. <pre class="brush:plain;">#</pre></h3>
<p>井号（</p><pre class="brush:plain;">#</pre><p>）表明其之前的类型，关键字或者组出现一次或多次。在下面的例子中，一个或多个成分值可能被使用，这些成分值以逗号分离。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: one or more, separated by commas */
<'property'> = <value>#
/* Examples */
.example { property: <value>; }
.example { property: <value>, <value>; }
.example { property: <value>, <value>, <value>; }
...etc</pre><h3>8. <pre class="brush:plain;">!</pre></h3>
<p>一个组后的感叹号（</p><pre class="brush:plain;">!</pre><p>）意味着该组是必须的且产生至少一个值。在下面的例子中，</p><pre class="brush:plain;">value1</pre><p> 是必须的，以及一个来自与由 </p><pre class="brush:plain;">value2</pre><p> 与 </p><pre class="brush:plain;">value3</pre><p> 组成的组的值。该属性只有两个属性值；它们是，</p><pre class="brush:plain;">value1</pre><p>与 </p><pre class="brush:plain;">value2</pre><p> 或 </p><pre class="brush:plain;">value1</pre><p> 与 </p><pre class="brush:plain;">value3</pre><p>。<br><br></p><pre class="brush:css;toolbar:false">/* Component multiplier: required group, at least one value */
<'property'> = value1 [ value2 | value3 ]!
/* Examples */
.example { property: value1 value2; }
.example { property: value1 value3; }</pre><h2>一个例子：<pre class="brush:plain;"><'text-shadow'></pre> 语法</h2>
<p>让我们把 </p><pre class="brush:plain;"><'text-shadow'></pre><p> 当作例子观察一番。这是它在规范里的定义：<br></p><pre class="brush:css;toolbar:false"><'text-shadow'> = none | [ <length>{2,3} && <color>? ]#</pre><p>我们可以拆分这些符号：<br></p><pre class="brush:plain;">|</pre><p> 表明我们可以使用关键字 </p><pre class="brush:plain;">none</pre><p> 或者一个组<br><br></p><pre class="brush:plain;">#</pre><p> 表明我们可以使用这个组一次或多次，以逗号分割<br><br>在组中，</p><pre class="brush:plain;">{2,3}</pre><p> 表明我们可以使用 2 或 3 个长度值<br><br></p><pre class="brush:plain;">&&</pre><p> 意味着我们必须包括所有值，但顺序可以任意<br><br>有点棘手的是，</p><pre class="brush:plain;"><color></pre><p> 后有一个 </p><pre class="brush:plain;">?</pre><p> ，这意味着其可能出现零次或一次。<br><br>用简单的话讲，这也可以被写成：<br><br></p>
<pre class="brush:php;toolbar:false">指明了 none 或 一个或多个由逗号分离的组，其中包含了二到三个长度值与一个可选的颜色值。长度值与可选的颜色值可以以任意顺序编写。</pre>
<p><br>这意味着我们能够以很多不同的方式来写 </p><pre class="brush:plain;">text-shadow</pre><p> 属性的值。例如，可以设置其为 </p><pre class="brush:plain;">none</pre><p>:<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: none; }</pre><p>我们也可以只写两个长度值，这意味着我们将设置阴影水平与竖直方向的便宜，但不会有模糊半径或者颜色值。<br><br>因为没有定义模糊半径，将会使用初始值 <br></p><pre class="brush:plain;">0</pre><p>；所以，该阴影的边缘会很锋利。由于没有定义颜色，所以阴影将使用文本的颜色。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px; }</pre><p>如果我们使用了三个长度值，我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px 10px; }</pre><p>我们也可以加入颜色，且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中，red 值可以放在任一长度值的后面。<br><br></p><pre class="brush:css;toolbar:false">.example { text-shadow: 10px 10px 10px red; }
.example { text-shadow: red 10px 10px 10px; }</pre><p>最后，我们也能包含多个文本阴影，写作以逗号分隔的组。阴影效果将从前至后分层应用：第一个阴影在最顶层，其它的层在其后。阴影不能覆盖在文本上。在下面的例子中，红色阴影将在绿***阴影的顶上。<br><br></p><pre class="brush:css;toolbar:false">.example {
text-shadow:
10px 10px red,
-20px -20px 5px lime;
}</pre><h2>结论</h2>
<p>如果你以写 CSS 为生，了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的，CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。<br></p>
<div></div>
<!--<p class='doc-content-pic doc-pic'><img src="https://img.php.cn/upload/article/000/000/194/2dc0b7317ecd295de8469d48c5768c41-1.jpg" / alt="css屬性值語法的詳細介紹" >
</p>-->
以上是css屬性值語法的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css實作隱藏捲軸的程式碼案例下一篇：css實作隱藏捲軸的程式碼案例