CSSプロパティ値の使い方の詳しい説明

<p>World Wide Web Consortium (<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">properties</a> 値を定義し、すべての CSS プロパティを使用できるようにします。 CSS 仕様を見たことがあれば、おそらくこの構文を見たことがあるでしょう。 </p><pre class="brush:plain;">border-image-slice</pre><p> の構文と同じように、次を見てみましょう: <br><br>3768ac3e61d463cf4f661690ab8d24d3]{1,4} && fill?これらの記号とその仕組みを知っていても、この構文を理解するのは非常に難しい場合があります。ただし、時間をかけて学ぶ価値はあります。 W3C がこれらのプロパティ値をどのように定義しているかを理解していれば、W3C CSS 仕様を理解することができます。 <br><br><br><img src="https://img.php.cn/upload/article/000/000/007/4677425410cd1e76461f7bcdcbdbfb20-0.jpg" alt="CSSプロパティ値の使い方の詳しい説明" ><br><br></p>Backus-Naur <h2></h2>まず、Backus-Naur <p>For<a href="http://www.php.cn/wiki/125.html" target="_blank">m を見てみましょう。これは、W3C の属性値の構文を理解するのに役立ちます。 </a><br>Backus–Naur Form (BNF) は、コンピューター言語の構文を記述するために使用される正式な記号セットです。言語の表現方法に曖昧さやあいまいさがないよう、明確になるように設計されています。 <br><br>オリジナルのバッカス・ナウア記号セットには、拡張バッカス正規形 (EBNF) や拡張バッカス正規形 (ABNF) など、現在使用されている多くの拡張機能とバリアントがあります。 <br><br> BNF 仕様は、次の形式のルール セットで記述されます。 <br><br>c4ec8ad10aeca72c5f8424a8900bf63e ::= 式<br>の左側は通常、非終端文字であり、その後に「で置き換えることができる」ことを意味する<br><pre class="brush:plain;">::=</pre></p>記号が続きます。式 <p><pre class="brush:plain;">expression</pre></p> の右側は、左側の記号の意味を推測するために使用される 1 つ以上の記号シーケンスで構成されます。 <p></p>BNFの仕様は基本的に「左の式がどんなものであっても、右の式がどんなものであっても、左の式は右の式に置き換えることができる」というものです。 <p><br></p>非終端記号と終端記号<h2></h2>非終端記号とは、後で置換または分解できる記号を指します。 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> は非終端文字です。 <p>e213cb4e07a69795da4172f670e4dad2 ::= c5029a27389432487892d5b8852c31d0979e7f42ea08258251c39ffe96b911f2 ターミネータは、この値が置換または分解できないことを示します。次の例では、すべての値がターミネータです。 <br>c5029a27389432487892d5b8852c31d0 ::= 1 | 5 | 6 7 | 9<br><br>CSS プロパティ値の構文BNF、彼らにもいくつかの違いがあります。 BNF と同様に、非終端文字で始まります。 BNF とは異なり、</p> <h2>式</h2> <h2>の「コンポーネント値」として使用されるシンボルについても説明します。 <span style="font-size: 14px; line-height: 1.76em;"></span><a href="http://www.php.cn/wiki/81.html" target="_blank" style="font-size: 14px; line-height: 1.76em;">以下の例では、</a><pre class="brush:plain;"><line-width></pre><span style="font-size: 14px; line-height: 1.76em;">が非終端文字で、</span><pre class="brush:plain;"><length></pre></h2>、<p><pre class="brush:plain;">thin</pre></p>、<p><pre class="brush:plain;">medium</pre></p>、<p><pre class="brush:plain;">thick</pre></p>がコンポーネント値です。 <p></p>98d21c13a45fc62a12a5a028fb348156 = d82af2074b26fcfe177e947839b5d381 細い | 太い <p></p> <p>コンポーネント値 <br><br> には、キーワード、基本データ型、および非データ型の 4 つの値があります。 <br></p> <h2>1. キーワード値 </h2> <p>キーワード値は引用符や山括弧で囲まれていません。これらは属性値として直接使用できます。交換したり分解したりすることができないため、ターミネーターになります。以下の例では、<a href="http://www.php.cn/code/5808.html" target="_blank"><pre class="brush:plain;">thin</pre></a>、<br><pre class="brush:plain;">medium</pre></p>、および <h3><pre class="brush:plain;">thick</pre></h3> はすべてキーワード値です。これは、CSS で直接使用されることを意味します。 <p></p>98d21c13a45fc62a12a5a028fb348156 = d82af2074b26fcfe177e947839b5d381 細い | 太い<p></p> 2. 基本データ型は、<p><pre class="brush:plain;"><length></pre></p> などのいくつかのコア値を定義します。これらは実際の長さまたは色の値に置き換えることができるため、非終端的です。以下の例では、<p><pre class="brush:plain;"><color></pre><br> が基本データ型です。 <br>dc9e7d072bf20f8e58ea665789d5e213 = b10fb37415d019cfffa8c4d7366c607f</p> <h3></h3><pre class="brush:plain;"><color></pre><p> は、キーワード拡張、RGB、RGBA、HSL、HSLA、または </p> によって CSS で使用できます。<pre class="brush:plain;">transparent</pre><p> 关键字，被替换为实际的颜色值。<br>.example { background-color: red; }<br>.example { background-color: honeydew; }<br>.example { background-color: rgb(50%,50%,50%); }<br>.example { background-color: rgba(100%,100%,100%,.5); }<br>.example { background-color: hsl(280,100%,50%); }<br>.example { background-color: hsla(280,100%,50%,0.5); }<br>.example { background-color: transparent; }<br></p> <h3>3. 属性数据类型</h3> <p>属性数据类型定义了属性实际的名字，是非终止符。它由包含在尖角括号中的属性名（包含引号）定义。在下面的例子中，</p><pre class="brush:plain;"><'border-width'></pre><p> 是属性数据类型。<br><br>609796a3625d59a67707b006c08cc277  =  98d21c13a45fc62a12a5a028fb348156{1,4}<br>属性数据类型可作为属性直接出现在我们的 CSS 文件中。在下面的例子中，</p><pre class="brush:plain;">border-width</pre><p> 属性给 </p><pre class="brush:plain;">.exmplate</pre><p> 类定义了 2px 的边框。<br>.example { border-width: 2px; }<br></p> <h3>4. 非属性数据类型</h3> <p>非属性数据类型并不与属性分享同一个名字，是非终止符。然而，它定义了某个（些）属性的一些层面。例如，</p><pre class="brush:plain;"><line-width></pre><p> 不是个属性，但它是一个定义了各种 </p><pre class="brush:plain;"><border></pre><p> 的数据类型。<br><br>98d21c13a45fc62a12a5a028fb348156  =  d82af2074b26fcfe177e947839b5d381 | thin | medium | thick<br>609796a3625d59a67707b006c08cc277  =  98d21c13a45fc62a12a5a028fb348156{1,4}<br></p> <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><br>/* 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 */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 value2 value3<br>/* Example */<br>.example { property: value1 value2 value3; }<br></p> <h3>2. 双与符号（&）</h3> <p>分开两个或更多成分值的双与符号（</p><pre class="brush:plain;">&&</pre><p>）意味着，这些值必须出现，顺序任意。在下面的例子中，语法列出了两个值，由双与符号分开。下面的 CSS 规则说明了这两个值都得出现但可能是不同的顺序。<br><br>/* Component arrangement: all, in any order */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 && value2<br><br>/* Examples */<br>.example { property: value1 value2; }<br>.example { property: value2 value1; }<br></p> <h3>3. 单管道符号</h3> <p>分开两个或更多成分值的单管道符号（</p><pre class="brush:plain;">|</pre><p>）意味着，这些值中只需一个值出现。在下面的例子中，语法列出了三个值，由单管道符号分开。在下面的 CSS 规则中展示了三个可能选项：<br><br>/* Component arrangement: one of them must occur */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 | value2 | value3<br>/* Examples */<br>.example { property: value1; }<br>.example { property: value2; }<br>.example { property: value3; }<br></p> <h3>4. 双管道符号</h3> <p>分开两个或更多选择的双管道符号（</p><pre class="brush:plain;">||</pre><p>）意味着，这些值中一个或多个值必须出现，顺序任意。在下面的例子中，语法列出了三个值，由双管道符号分开。在你写 CSS 规则来匹配这个语法时，有大量可选的选择　——　你可以使用一个，两个或三个值，以任意顺序。<br><br>/* Component arrangement: one or more in any order */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 || value2 || value3<br><br>/* Examples */<br>.example { property: value1; }<br>.example { property: value2; }<br>.example { property: value3; }<br>.example { property: value1 value2; }<br>.example { property: value1 value2 value3; }<br>...etc<br></p> <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><p>。<br><br>/* Component arrangement: a single grouping */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = [ value1 | value2 ] value3<br><br>/* Examples */<br>.example { property: value1 value3; }<br>.example { property: value2 value3; }<br></p> <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>/* Component multiplier: zero or one <a href="http://www.php.cn/wiki/1268.html" target="_blank">time</a> */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 [, value2 ]?<br><br>/* Examples */<br>.example { property: value1; }<br>.example { property: value1, value2; }<br></p> <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>/* Component multiplier: zero or more times */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 [, faedff991d44d6540c9f48e6d09eddb0 ]*<br><br>/* Examples */<br>.example { property: value1; }<br>.example { property: value1, faedff991d44d6540c9f48e6d09eddb0; }<br>.example { property: value1, faedff991d44d6540c9f48e6d09eddb0, faedff991d44d6540c9f48e6d09eddb0; }<br>.example { property: value1, faedff991d44d6540c9f48e6d09eddb0, faedff991d44d6540c9f48e6d09eddb0, faedff991d44d6540c9f48e6d09eddb0; }<br>...etc<br></p> <h3>3. <pre class="brush:plain;">+</pre></h3> <p>加号（</p><pre class="brush:plain;">+</pre><p>）表明其之前的类型，关键字或者组出现一次或更多次。在下面的例子中，放置于成分值之后的加号意味着该值必须被使用超过一次 —— 无需逗号。<br><br>/* Component multiplier: one or more times */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3+<br><br>/* Examples */<br>.example { property: 8487820b627113dd990f63dd2ef215f3; }<br>.example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; }<br>.example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; }<br>...etc<br></p> <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>/* Component multiplier: occurs A times */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3{2}<br><br>/* Examples */<br>.example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 ; }<br></p> <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>/* Component multiplier: at least A and at most B */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3{1,3}<br><br>/* Examples */<br>.example { property: 8487820b627113dd990f63dd2ef215f3; }<br>.example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; }<br>.example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; }<br></p> <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>/* Component multiplier: at least A, with no upper limit */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3{1,}<br><br>/* Examples */<br>.example { property: 8487820b627113dd990f63dd2ef215f3; }<br>.example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3; }<br>.example { property: 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 8487820b627113dd990f63dd2ef215f3 ; }<br>...etc<br></p> <h3>7. <pre class="brush:plain;">#</pre></h3> <p>井号（</p><pre class="brush:plain;">#</pre><p>）表明其之前的类型，关键字或者组出现一次或多次。在下面的例子中，一个或多个成分值可能被使用，这些成分值以逗号分离。<br><br>/* Component multiplier: one or more, separated by commas */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = 8487820b627113dd990f63dd2ef215f3#<br><br>/* Examples */<br>.example { property: 8487820b627113dd990f63dd2ef215f3; }<br>.example { property: 8487820b627113dd990f63dd2ef215f3, 8487820b627113dd990f63dd2ef215f3; }<br>.example { property: 8487820b627113dd990f63dd2ef215f3, 8487820b627113dd990f63dd2ef215f3, 8487820b627113dd990f63dd2ef215f3; }<br>...etc<br></p> <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>/* Component multiplier: <a href="http://www.php.cn/wiki/136.html" target="_blank">require</a>d group, at least one value */<br>ec94f9a9b2b5f7dd2da17a77a3bf6064 = value1 [ value2 | value3 ]!<br><br>/* Examples */<br>.example { property: value1 value2; }<br>.example { property: value1 value3; }<br></p> <h2>一个例子：<pre class="brush:plain;"><'text-shadow'></pre> 语法</h2> <p>让我们把 </p><pre class="brush:plain;"><'text-shadow'></pre><p> 当作例子观察一番。这是它在规范里的定义：<br><br>69ffac0382129096e29bbee1334f53b2 = none | [ d82af2074b26fcfe177e947839b5d381{2,3} && b10fb37415d019cfffa8c4d7366c607f? ]#<br>我们可以拆分这些符号：<br></p><pre class="brush:plain;">|</pre><p> 表明我们可以使用关键字 </p><pre class="brush:plain;">none</pre><p> 或者一个组<br></p><pre class="brush:plain;">#</pre><p> 表明我们可以使用这个组一次或多次，以逗号分割<br><br>在组中，</p><pre class="brush:plain;">{2,3}</pre><p> 表明我们可以使用 2 或 3 个长度值<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>这意味着我们能够以很多不同的方式来写 </p><pre class="brush:plain;">text-shadow</pre><p> 属性的值。例如，可以设置其为 </p><pre class="brush:plain;">none</pre><p>:<br><br>.example { text-shadow: none; }<br>我们也可以只写两个长度值，这意味着我们将设置阴影水平与竖直方向的便宜，但不会有模糊半径或者颜色值。<br><br>因为没有定义模糊半径，将会使用初始值 </p><pre class="brush:plain;">0</pre><p>；所以，该阴影的边缘会很锋利。由于没有定义颜色，所以阴影将使用文本的颜色。<br><br>.example { text-shadow: 10px 10px; }<br>如果我们使用了三个长度值，我们将会同时定义阴影的水平与竖直方向的偏移和模糊半径。<br><br>.example { text-shadow: 10px 10px 10px; }<br>我们也可以加入颜色，且颜色可以出现在 2 或 3 个长度值的前面或后面。在下面的例子中，red 值可以放在任一长度值的后面。<br><br>.example { text-shadow: 10px 10px 10px red; }<br>.example { text-shadow: red 10px 10px 10px; }<br>最后，我们也能包含多个<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>的层在其后。阴影不能覆盖在文本上。在下面的例子中，红色阴影将在绿黄色阴影的顶上。<br><br>.example {<br>    text-shadow:<br>        10px 10px red,<br>        -20px -20px 5px lime;<br>}<br></p> <h2>结论</h2> <p>如果你以写 CSS 为生，了解如何正确地写合法的 CSS 属性值很重要。一旦你了解了不同的值是如何被组合或累乘的，CSS 属性值语法就变得非常容易理解了。然后看 CSS 的规范与写合法的 CSS 都会变得更容易了。<br><br>如果像拓展阅读，看看下列的网站吧：<br><br>“Value Definition Syntax” in “CSS Values and Units <a href="http://www.php.cn/code/8212.html" target="_blank">Module</a> Level 3”, W3C<br><br>“CSS Reference,” Mozilla Developer Network<br><br>“How to Read W3C Specs,” J. David Eisenberg, A <a href="http://www.php.cn/wiki/1059.html" target="_blank">List</a> Apart</p> <!--<p class='doc-content-pic doc-pic'><img src="https://img.php.cn/upload/article/000/000/007/4677425410cd1e76461f7bcdcbdbfb20-1.jpg" / alt="CSSプロパティ値の使い方の詳しい説明" ></p>-->

以上がCSSプロパティ値の使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。