詳解CSS屬性值用法

巴扎黑原創: 2017-03-14 10:15:112023瀏覽

萬維網聯盟（<a href="http://www.php.cn/wiki/1550.html" target="_blank">W3C</a>）使用了一套特別的語法來定義 CSS 的<a href="http://www.php.cn/wiki/169.html" target="_blank">屬性</a>值，能讓所有的 CSS 屬性都用。如果你曾經看過 CSS 規範，你可能已經看過這套文法了。就像 <pre class="brush:plain;">border-image-slice</pre> 的語法，讓我們來看看： 64b8683433c0a506a9f30b72fdb9cfba = [d80b5def5ed1be6e26d91c2709f14170 | 42c97a047d75abc12b9b351eb8562711]{1,4 } && fill? 如果你不知道這些符號以及它們如何運作的話，這套文法可能非常難理解。然而，這值得花時間學習。如果你理解 W3C 是如何定義這些屬性值的，你就可以理解 W3C CSS 規範中任一個了。 <img src="https://img.php.cn/upload/article/000/000/007/4677425410cd1e76461f7bcdcbdbfb20-0.jpg" alt="詳解CSS屬性值用法" > <h2>巴科斯範式</h2> #首先，我們來看看巴科斯範式（Backus-Naur <a href="http://www.php.cn/wiki/125.html" target="_blank">For</a>m ），因為這能幫我們理解W3C 的屬性值語法。 Backus–Naur Form （BNF）是用來描述電腦語言語法的正式符號集合。它被設計得很清晰，所以在語言如何表達方面不會造成二義或模糊。 最初Backus-Naur 符號集有很多的擴展與變種在今天都在使用，包括擴展巴科斯範式（EBNF）和擴充巴克斯範式（ABNF）. #一個BNF 規範是按下面的形式寫的一套規則： 5aaf33f5e4c7c54d016a539db37ebcc8 ::= expression 式子左邊通常是一個非終止符，跟著一個 <pre class="brush:plain;">::=</pre> 符號，代表著「可被換為」。式子右邊 <pre class="brush:plain;">expression</pre>由一或多個符號序列組成，這些符號序列被用來推導左邊符號的意義。 BNF 規範從根本上說，「無論左側式子是什麼，也無論右側式子是什麼，左側的式子都能被右側的式子取代」。 <h2>非終止符與終止符</h2> 非終止符是指能在之後被替換或被分解的符號。在 BNF 中，非終止符通常都在尖角括號中，<pre class="brush:plain;"><</pre> 與 <pre class="brush:plain;">></pre>。在下面的範例中，<pre class="brush:plain;"><integet></pre> 和 <pre class="brush:plain;"><digit></pre> 是非終止符。 923a0f05604eba334d6d81b6bf40b5e6 ::= c5029a27389432487892d5b8852c31d0 | c5029a27389432487892d5b8852c31d0979e7f42ea08258251c39ffe96b911f2 終止符表示這個值不能被取代或分解。在下面的例子中，所有的數值都是終止符。 c5029a27389432487892d5b8852c31d0 ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 <h2>CSS 屬性值語法</h2> <h2> #儘管W3C CSS 屬性值語法是基於BNF 的概念，它們也有一些不同。像 BNF 的是，它起始於一個非終止符。不像 BNF 的是，它也描述了用在<a href="http://www.php.cn/wiki/81.html" target="_blank" style="font-size: 14px; line-height: 1.76em;">表達式</a>中作為「成分值（component values）」的符號。 </h2> 在下面的範例中，<pre class="brush:plain;"><line-width></pre> 是非終止符，而 <pre class="brush:plain;"><length></pre>，<pre class="brush:plain;">thin</pre>，<pre class="brush:plain;">medium</pre>和 <pre class="brush:plain;">thick</pre> 是成分值。 98d21c13a45fc62a12a5a028fb348156 = d82af2074b26fcfe177e947839b5d381 | thin | medium | thick <h2>成分值</h2> 有四種成分值：關鍵字、基本<a href="http://www.php.cn/code/5808.html" target="_blank">資料型別</a>、屬性資料型別與非資料資料型別。 <h3>1. 關鍵字值</h3> 關鍵字值不會被引號或尖角括號包圍。它們可直接作為屬性值。因為它們不能再被代替或分解，所以它們是終止符。在下面的範例中，<pre class="brush:plain;">thin</pre>、<pre class="brush:plain;">medium</pre> 和 <pre class="brush:plain;">thick</pre> 都是關鍵字值。這意味著它們在 CSS 中直接使用。 98d21c13a45fc62a12a5a028fb348156 = d82af2074b26fcfe177e947839b5d381 | thin | medium | thick <h3>2. 基本資料型別</h3> #基本資料型態定義了一些核心值，如 <pre class="brush:plain;"><length></pre> 與 <pre class="brush:plain;"><color></pre>。它們是非終止符，因為它們可以被替換成真實的長度或顏色值。在下面的範例中 <pre class="brush:plain;"><color></pre> 是基本資料型別。 aa3e79bec9edd13f9569503c512d7b7e = b10fb37415d019cfffa8c4d7366c607f <pre class="brush:plain;"><color></pre> 可在我們的CSS 中，透過關鍵字，擴充關鍵字，RGB、 RGBA、HSL、HSLA，或 #<pre class="brush:plain;">transparent</pre> 关键字，被替换为实际的颜色值。 .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; } <h3>3. 属性数据类型</h3> 属性数据类型定义了属性实际的名字，是非终止符。它由包含在尖角括号中的属性名（包含引号）定义。在下面的例子中，<pre class="brush:plain;"><'border-width'></pre> 是属性数据类型。 609796a3625d59a67707b006c08cc277 = 98d21c13a45fc62a12a5a028fb348156{1,4} 属性数据类型可作为属性直接出现在我们的 CSS 文件中。在下面的例子中，<pre class="brush:plain;">border-width</pre> 属性给 <pre class="brush:plain;">.exmplate</pre> 类定义了 2px 的边框。 .example { border-width: 2px; } <h3>4. 非属性数据类型</h3> 非属性数据类型并不与属性分享同一个名字，是非终止符。然而，它定义了某个（些）属性的一些层面。例如，<pre class="brush:plain;"><line-width></pre> 不是个属性，但它是一个定义了各种 <pre class="brush:plain;"><border></pre> 的数据类型。 98d21c13a45fc62a12a5a028fb348156 = d82af2074b26fcfe177e947839b5d381 | thin | medium | thick 609796a3625d59a67707b006c08cc277 = 98d21c13a45fc62a12a5a028fb348156{1,4} <h2>成分值组合器（Combinator）</h2> 使用下面的五个方法，成分值能被分配至属性值组合器： <h3>1. 相邻值</h3> 成分值接连而写意味着所有这些值都必须按给定的顺序出现。在下面的例子中，语法列出了三个不同的值：<pre class="brush:plain;">value1</pre>, <pre class="brush:plain;">value2</pre> 与 <pre class="brush:plain;">value3</pre>。在 CSS 规则中，这三个值必须按照正确的顺序出现才算合法。 /* Component ar<a href="http://www.php.cn/wiki/1078.html" target="_blank">range</a>ment: <a href="http://www.php.cn/wiki/1483.html" target="_blank">all</a> in given order */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 value2 value3 /* Example */ .example { property: value1 value2 value3; } <h3>2. 双与符号（&）</h3> 分开两个或更多成分值的双与符号（<pre class="brush:plain;">&&</pre>）意味着，这些值必须出现，顺序任意。在下面的例子中，语法列出了两个值，由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。 /* Component arrangement: all, in any order */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 && value2 /* Examples */ .example { property: value1 value2; } .example { property: value2 value1; } <h3>3. 单管道符号</h3> 分开两个或更多成分值的单管道符号（<pre class="brush:plain;">|</pre>）意味着，这些值中只需一个值出现。在下面的例子中，语法列出了三个值，由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项： /* Component arrangement: one of them must occur */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 | value2 | value3 /* Examples */ .example { property: value1; } .example { property: value2; } .example { property: value3; } <h3>4. 双管道符号</h3> 分开两个或更多选择的双管道符号（<pre class="brush:plain;">||</pre>）意味着，这些值中一个或多个值必须出现，顺序任意。在下面的例子中，语法列出了三个值，由双管道符号分开。在你写 CSS 规则来匹配这个语法时，有大量可选的选择　——　你可以使用一个，两个或三个值，以任意顺序。 /* Component arrangement: one or more in any order */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 || value2 || value3 /* Examples */ .example { property: value1; } .example { property: value2; } .example { property: value3; } .example { property: value1 value2; } .example { property: value1 value2 value3; } ...etc <h3>5. 中括号</h3> 包住了两个或更多选择的中括号（<pre class="brush:plain;">[ ]</pre>）意味着其中的成分值属于一个单独的组。在下面的例子中，语法列出了三个值，但其中两个在中括号中，所以它们属于一个组。所以在 CSS 规则中有两种选择：<pre class="brush:plain;">value1</pre> 与 <pre class="brush:plain;">value3</pre> 或 <pre class="brush:plain;">value2</pre> 与 <pre class="brush:plain;">value3</pre>。 /* Component arrangement: a single grouping */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = [ value1 | value2 ] value3 /* Examples */ .example { property: value1 value3; } .example { property: value2 value3; } <h2>成分值累乘器（Multipliers）</h2> 使用下列 8 个方法之一，成分值也可被重用： <h3>1. <pre class="brush:plain;">?</pre></h3> 问号（<pre class="brush:plain;">?</pre>）表明其之前的类型，关键字或者组，是可选的且出现零次或一次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的问号意味着，<pre class="brush:plain;">value1</pre> 必须出现，但我们也可使用 <pre class="brush:plain;">value1</pre> 和 <pre class="brush:plain;">value2</pre>，以逗号分隔。 /* Component multiplier: zero or one <a href="http://www.php.cn/wiki/1268.html" target="_blank">time</a> */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 [, value2 ]? /* Examples */ .example { property: value1; } .example { property: value1, value2; } <h3>2. <pre class="brush:plain;">*</pre></h3> 星号（<pre class="brush:plain;">*</pre>）表明其之前的类型，关键字或者组出现零次或更多次。在下面的例子中，第二个成分值与一个逗号一起放在了中括号里。放置其后的星号意味着，<pre class="brush:plain;">value1</pre> 必须出现，但我们也能随我们想地使用 <pre class="brush:plain;">value2</pre> 任意次，每个成分值以逗号分隔。 /* Component multiplier: zero or more times */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 [, faedff991d44d6540c9f48e6d09eddb0 ]* /* Examples */ .example { property: value1; } .example { property: value1, faedff991d44d6540c9f48e6d09eddb0; } .example { property: value1, faedff991d44d6540c9f48e6d09eddb0, faedff991d44d6540c9f48e6d09eddb0; } .example { property: value1, faedff991d44d6540c9f48e6d09eddb0, faedff991d44d6540c9f48e6d09eddb0, faedff991d44d6540c9f48e6d09eddb0; } ...etc <h3>3. <pre class="brush:plain;">+</pre></h3> 加号（<pre class="brush:plain;">+</pre>）表明其之前的类型，关键字或者组出现一次或更多次。在下面的例子中，放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。 /* Component multiplier: one or more times */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3+ /* Examples */ .example { property: 8487820b627113dd990f63dd2ef215f3; } .example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; } .example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; } ...etc <h3>4. <pre class="brush:plain;">{A}</pre></h3> 大括号（<pre class="brush:plain;">{A}</pre>）中包含一个数字表明其之前的类型，关键字或者组出现 <pre class="brush:plain;">A</pre> 次。在下面的例子中，value 的两个实例都必须根据出现才合法。 /* Component multiplier: occurs A times */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3{2} /* Examples */ .example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 ; } <h3>5. <pre class="brush:plain;">{A,B}</pre></h3> 大括号（<pre class="brush:plain;">{A,B}</pre>）中包含由逗号分开的两个数字表明其之前的类型，关键字或者组出现至少 <pre class="brush:plain;">A</pre> 次，至少 <pre class="brush:plain;">B</pre> 次。在下面的例子中，最少一个、最多三个值肯能被用来定义该属性。这些成分值不以逗号分离。 /* Component multiplier: at least A and at most B */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3{1,3} /* Examples */ .example { property: 8487820b627113dd990f63dd2ef215f3; } .example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; } .example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; } <h3>6. <pre class="brush:plain;">{A,}</pre></h3> 在 <pre class="brush:plain;">{A,}</pre> 中 <pre class="brush:plain;">B</pre> 被省去了，这意味着至少有 <pre class="brush:plain;">A</pre> 次重复，而没有上限。在下面的例子中，至少需要使用一个成分值，但也可以额外使用任意数量的成分值值。这些成分值不以逗号分离。 /* Component multiplier: at least A, with no upper limit */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3{1,} /* Examples */ .example { property: 8487820b627113dd990f63dd2ef215f3; } .example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; } .example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 ; } ...etc <h3>7. <pre class="brush:plain;">#</pre></h3> 井号（<pre class="brush:plain;">#</pre>）表明其之前的类型，关键字或者组出现一次或多次。在下面的例子中，一个或多个成分值可能被使用，这些成分值以逗号分离。 /* Component multiplier: one or more, separated by commas */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3# /* Examples */ .example { property: 8487820b627113dd990f63dd2ef215f3; } .example { property: 8487820b627113dd990f63dd2ef215f3, 8487820b627113dd990f63dd2ef215f3; } .example { property: 8487820b627113dd990f63dd2ef215f3, 8487820b627113dd990f63dd2ef215f3, 8487820b627113dd990f63dd2ef215f3; } ...etc <h3>8. <pre class="brush:plain;">!</pre></h3> 一个组后的感叹号（<pre class="brush:plain;">!</pre>）意味着该组是必须的且产生至少一个值。在下面的例子中，<pre class="brush:plain;">value1</pre> 是必须的，以及一个来自与由 <pre class="brush:plain;">value2</pre> 与 <pre class="brush:plain;">value3</pre> 组成的组的值。该属性只有两个属性值；它们是，<pre class="brush:plain;">value1</pre>与 <pre class="brush:plain;">value2</pre> 或 <pre class="brush:plain;">value1</pre> 与 <pre class="brush:plain;">value3</pre>。 /* Component multiplier: <a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>d group, at least one value */ ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 [ value2 | value3 ]! /* Examples */ .example { property: value1 value2; } .example { property: value1 value3; } <h2>一个例子：<pre class="brush:plain;"><'text-shadow'></pre> 语法</h2> 让我们把 <pre class="brush:plain;"><'text-shadow'></pre> 当作例子观察一番。这是它在规范里的定义： 69ffac0382129096e29bbee1334f53b2 = none | [ d82af2074b26fcfe177e947839b5d381{2,3} && b10fb37415d019cfffa8c4d7366c607f? ]# 我们可以拆分这些符号： <pre class="brush:plain;">|</pre> 表明我们可以使用关键字 <pre class="brush:plain;">none</pre> 或者一个组 <pre class="brush:plain;">#</pre> 表明我们可以使用这个组一次或多次，以逗号分割 在组中，<pre class="brush:plain;">{2,3}</pre> 表明我们可以使用 2 或 3 个长度值 <pre class="brush:plain;">&&</pre> 意味着我们必须包括所有值，但顺序可以任意 有点棘手的是，<pre class="brush:plain;"><color></pre> 后有一个 <pre class="brush:plain;">?</pre> ，这意味着其可能出现零次或一次。 用简单的话讲，这也可以被写成： <pre class="brush:php;toolbar:false">指明了 none 或一个或多个由逗号分离的组，其中包含了二到三个长度值与一个可选的颜色值。长度值与可选的颜色值可以以任意顺序编写。</pre> 这意味着我们能够以很多不同的方式来写 <pre class="brush:plain;">text-shadow</pre> 属性的值。例如，可以设置其为 <pre class="brush:plain;">none</pre>: .example { text-shadow: none; } 我们也可以只写两个长度值，这意味着我们将设置阴影水平与竖直方向的便宜，但不会有模糊半径或者颜色值。 因为没有定义模糊半径，将会使用初始值 <pre class="brush:plain;">0</pre>；所以，该阴影的边缘会很锋利。由于没有定义颜色，所以阴影将使用文本的颜色。 .example { text-shadow: 10px 10px; } 如果我们使用了三个长度值，我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。 .example { text-shadow: 10px 10px 10px; } 我们也可以加入颜色，且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中，red 值可以放在任一长度值的后面。 .example { text-shadow: 10px 10px 10px red; } .example { text-shadow: red 10px 10px 10px; } 最后，我们也能包含多个<a href="http://www.php.cn/code/6103.html" target="_blank">文本阴影</a>，写作以逗号分隔的组。阴影效果将从前至后分层应用：第一个阴影在最顶层，<a href="http://www.php.cn/java/java-alibaba-qita.html" target="_blank">其它</a>的层在其后。阴影不能覆盖在文本上。在下面的例子中，红色阴影将在绿黄色阴影的顶上。 .example { text-shadow: 10px 10px red, -20px -20px 5px lime; } <h2>结论</h2> 如果你以写 CSS 为生，了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的，CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。 如果像拓展阅读，看看下列的网站吧： “Value Definition Syntax” in “CSS Values and Units <a href="http://www.php.cn/code/8212.html" target="_blank">Module</a> Level 3”, W3C “CSS Reference,” Mozilla Developer Network “How to Read W3C Specs,” J. David Eisenberg, A <a href="http://www.php.cn/wiki/1059.html" target="_blank">List</a> Apart

以上是詳解CSS屬性值用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用CSS邊框特效實現技巧分享下一篇：使用CSS邊框特效實現技巧分享

看更多