diff options
Diffstat (limited to 'files/zh-cn/web/css/value_definition_syntax')
| -rw-r--r-- | files/zh-cn/web/css/value_definition_syntax/index.html | 431 |
1 files changed, 431 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/value_definition_syntax/index.html b/files/zh-cn/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..d0f739b61d --- /dev/null +++ b/files/zh-cn/web/css/value_definition_syntax/index.html @@ -0,0 +1,431 @@ +--- +title: CSS属性值定义语法 +slug: Web/CSS/Value_definition_syntax +translation_of: Web/CSS/Value_definition_syntax +--- +<p>{{ CSSRef() }}</p> + +<p><span class="seoSummary"><strong>CSS属性值定义语法</strong></span>（CSS value definition syntax）是用来限定CSS属性合法取值的专门语法。在此基础之上，一个CSS属性的合法取值也由语义所限制，比如一些数字必须是正数。</p> + +<p>CSS属性值定义语法描述了哪些值是可取的CSS属性，基本组成元素包括关键字、符号与带类型的参数。</p> + +<h2 id="基本组成元素">基本组成元素</h2> + +<h3 id="关键字">关键字</h3> + +<h4 id="一般关键字">一般关键字</h4> + +<p>有预定义含义的一般关键字按字面意义出现，不需要引号，如<code>auto</code>, <code>smaller</code> 或 <code>ease-in</code>。</p> + +<h4 id="特殊关键字：inherit、initial和unset">特殊关键字：<code>inherit</code>、<code>initial</code>和<code>unset</code></h4> + +<p>所有CSS属性值都可以使用<code>inherit</code>、<code>initial</code>和<code>unset</code>，它们的定义贯穿 CSS 始终。它们未显示在值定义中，但都是隐含可用的。</p> + +<h3 id="符号">符号</h3> + +<p>CSS中，有一些符号是可以出现的，比如斜杠('<code>/</code>')或者逗号('<code>,</code>')等。它们用来分隔属性值：逗号用来分隔数个并列值，或者分隔函数的参数；斜杠用来分隔一个值的多个部分，通常用在CSS缩写中分离具有相同类型但属于不同属性的组件。</p> + +<p>这两种符号会以其字面意义出现在CSS属性值定义中。</p> + +<h3 id="带类型的参数">带类型的参数</h3> + +<h4 id="基本类型">基本类型</h4> + +<p>一些类型在CSS中经常出现，CSS规范中将其专门定义，称为<em>基本类型</em>，用一对尖括号表示：'<code><</code>'与'<code>></code>'，例如：{{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …</p> + +<h4 id="其他类型">其他类型</h4> + +<p>其他类型同样也用一对尖括号表示：'<code><</code>'与'<code>></code>'。</p> + +<p>其他类型分为两种：</p> + +<ul> + <li><em>共享同一个属性名称</em>的数个类型。在这种情况下，数据类型与属性共享同一组值。它们出现在一对引号之中，经常用于属性的缩写。</li> + <li><em>不共享同一个属性名称</em>的数个类型，它们与基本类型很相似，不同是：这种参数仅在规范中相关属性的描述处定义，而基本类型在规范中有专门定义。</li> +</ul> + +<h2 id="组合符号">组合符号</h2> + +<h3 id="方括号">方括号</h3> + +<p><em>方括号</em>将数个基本元素组成一个整体，用来<strong>强调组合的优先级</strong>。例如：</p> + +<pre class="syntaxbox"><code>bold [ thin && <length> ]</code></pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>bold thin 2vh</code></li> + <li><code>bold 0 thin</code></li> + <li><code>bold thin 3.5em</code></li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>thin bold 3em</code> 因为<code>bold</code>被放置在方括号定义的整体之中。根据定义，<code>bold</code>必须出现在方括号定义的整体之前。</li> +</ul> + +<h3 id="并置">并置</h3> + +<p><em>并置</em>是指将数个关键字、符号或类型，用空格分开写在一起。并置中所有的元素都<strong>必须出现并且按所规定的顺序出现</strong>。例如：</p> + +<pre class="syntaxbox">bold <length> , thin +</pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>bold 1em, thin</code></li> + <li><code>bold 0, thin</code></li> + <li><code>bold 2.5cm, thin</code></li> + <li><code>bold 3vh, thin</code></li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>thin 1em, bold</code>因为顺序有错。</li> + <li><code>bold 1em thin</code>因为所有元素都必须出现，包括逗号。</li> + <li><code>bold 0.5ms, thin</code>因为<code>ms</code>是时间值，不是长度值：{{cssxref("<length>")}}</li> +</ul> + +<h3 id="“与”组合符：">“与”组合符：&&</h3> + +<p><em>“与”组合符</em>连接的各个部分都<strong>必须出现，但是顺序任意</strong>。例如：</p> + +<pre class="syntaxbox">bold && <length> +</pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>bold 1em</code></li> + <li><code>bold 0</code></li> + <li><code>2.5cm bold</code></li> + <li><code>3vh bold</code></li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>bold</code>因为长度值没有出现。</li> + <li><code>bold 1em bold</code>因为各部分必须恰好出现一次。</li> +</ul> + +<div class="note"><strong>注：</strong>并置的优先级高于“与”组合符。例如<code>bold thin && <length></code>等价于<code>[ </code><code>bold thin ] && <length></code>。它们的合法取值是：<code>bold thin <length></code>或<code><length></code><code> bold thin</code>但不是<code>bold <length></code><code> thin</code>。</div> + +<h3 id="“或”组合符：">“或”组合符：||</h3> + +<p><em>“或”组合符</em>表示其连接的所有组成元素是可选的，<strong>次序任意，但是至少其中一个要出现</strong>。“或”组合符通常用来描述<a href="/zh-CN/docs/CSS/Shorthand_properties" title="/zh-CN/docs/CSS/Shorthand_properties">属性缩写</a>中的各部分。</p> + +<pre class="syntaxbox"><'border-width'> || <'border-style'> || <'border-color'> +</pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>1em solid blue</code></li> + <li><code>blue 1em</code></li> + <li><code>solid 1px yellow</code></li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>blue yellow</code>因为一个组成部分最多出现一次。</li> + <li><code>bold</code>因为它不允许出现。</li> +</ul> + +<div class="note"><strong>注：</strong>“与”组合符的优先级高于“或”组合符，比如<code>bold || thin && <length></code>等价于<code>bold || [ thin && <length> ]</code>。它们的合法取值是：<code>bold</code>, <code>thin</code> <code><length></code>, <code>bold thin</code> <code><length></code>, 或者<code>thin <length> bold</code> ，但不是：<code><length></code><code> bold thin</code>因为bold若出现，则必须出现在<code>thin && <length></code>整体的前面或后面。</div> + +<h3 id="“互斥”组合符：">“互斥”组合符：|</h3> + +<p><em>“互斥”组合符</em>表示各组成部分中只能<strong>恰好出现一个</strong>，通常用来分隔一个属性的所有可选值。例如：</p> + +<pre class="syntaxbox"><percentage> | <length> | left | center | right | top | bottom</pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>3%</code></li> + <li><code>0</code></li> + <li><code>3.5em</code></li> + <li><code>left</code></li> + <li><code>center</code></li> + <li><code>right</code></li> + <li><code>top</code></li> + <li><code>bottom</code></li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>center 3%</code> as only one of the components must be present.</li> + <li><code>3em 4.5em</code> as a component must be present at most one time.</li> +</ul> + +<div class="note"> +<p><strong>注：</strong>“或”组合符的优先级高于“互斥”组合符，比如<code>bold | thin || <length></code>等价于<code>bold | [ thin || <length> ]</code>。它们的合法取值是：<code>bold</code>, <code>thin</code>, <code><length></code>, <code><length> thin</code>, 或<code>thin <length>，但不能是bold <length>，</code>因为“互斥”组合符所连接的数个部分中，只有一个能出现。</p> +</div> + +<h2 id="数量符号">数量符号</h2> + +<p>数量符号用来描述一个元素可以出现多少次。若不标注，则这个元素比如恰好出现一次。</p> + +<p>注意数量描述符不能叠加出现，并且优先级最高。</p> + +<h3 id="星号_*">星号 (<code>*</code>)</h3> + +<p><em>星号</em>表示可以出现<strong>零次（即不出现），一次，或任意多次</strong>。例如：</p> + +<pre class="syntaxbox"><code>bold smaller*</code></pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code> and so on.</li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>smaller</code> 因为<code>bold</code>并置于<code>smaller</code>，必须出现在任何<code>smaller</code>之前。</li> +</ul> + +<h3 id="加号">加号 (<code>+</code>)</h3> + +<p><em>加号</em>表示可以出现<strong>一次或多次</strong>。例如：</p> + +<pre class="syntaxbox"><code>bold smaller+</code></pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code> and so on.</li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>bold</code> 因为<code>smaller</code>必须出现至少一次。</li> + <li><code>smaller</code> 因为<code>bold</code> 是并置关系，必须在<code>smaller</code>之前出现。</li> +</ul> + +<h3 id="问号">问号 (<code>?</code>)</h3> + +<p><em>问号</em>表示可选，即出现<strong>零次或一次</strong>。例如：</p> + +<pre class="syntaxbox"><code>bold smaller?</code></pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>bold</code></li> + <li><code>bold smaller</code></li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>bold smaller smaller</code> 因为<code>smaller</code>最多出现一次。</li> + <li><code>smaller</code> 因为<code>bold</code>是并置关系，必须出现在<code>smaller</code>之前。</li> +</ul> + +<h3 id="大括号">大括号 (<code>{ }</code>)</h3> + +<p><em>大括号</em>包含两个以逗号分隔的整数A与B，表示<strong>最少出现A次，且最多出现B次</strong>。例如：</p> + +<pre class="syntaxbox"><code>bold smaller{1,3}</code></pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller smaller</code></li> + <li><code>bold smaller smaller smaller</code></li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>bold</code> 因为<code>smaller</code> 至少要出现一次。</li> + <li><code>bold smaller smaller smaller smaller</code> 因为<code>smaller</code> 最多出现三次。</li> + <li><code>smaller</code> 因为<code>bold</code>是并置关系，必须出现在<code>smaller</code>之前。</li> +</ul> + +<h3 id="井号">井号 (<code>#</code>)</h3> + +<p><em>井号</em>表示<strong>可以出现一次或多次</strong>，与<em>加号</em>相似。但是其多次出现必须<strong>以逗号分隔</strong>。例如：</p> + +<pre class="syntaxbox"><code>bold smaller#</code></pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>bold smaller</code></li> + <li><code>bold smaller, smaller</code></li> + <li><code>bold smaller, smaller, smaller</code> and so on.</li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>bold</code> 因为<code>smaller</code>必须至少出现一次。</li> + <li><code>bold smaller smaller smaller</code> 因为多个<code>smaller</code>必须以逗号分隔。</li> + <li><code>smaller</code> 因为<code>bold</code>是并置关系，必须出现在<code>smaller</code>之前。</li> +</ul> + +<h3 id="Exclamation_point" name="Exclamation_point"><a id="Exclamation_point_(!)" name="Exclamation_point_(!)">叹号 (<code>!</code>)</a></h3> + +<p>组后面的叹号表示该组是必需的，并且至少产生一个值；即使组内项目的语法允许省略全部的值，也至少要保留一个值。</p> + +<pre class="syntaxbox">[ bold? smaller? ]! +</pre> + +<p>以下均为该例的合法取值：</p> + +<ul> + <li><code>bold</code></li> + <li><code>smaller</code></li> + <li><code>bold smaller</code></li> +</ul> + +<p>但以下不是合法取值：</p> + +<ul> + <li><code>bold</code> 和 <code>smaller</code>都没有：因为至少要出现一个。</li> + <li><code>smaller bold</code>：因为 <code>bold</code> 必须出现在 <code>smaller</code> 前面。</li> + <li><code>bold smaller bold</code>：因为 <code>bold</code> 只能出现一次。</li> +</ul> + +<h2 id="总结">总结</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">符号</th> + <th scope="col">名称</th> + <th scope="col">描述</th> + <th scope="col">示例</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="4">组合符号</th> + </tr> + <tr> + <td></td> + <td>并置</td> + <td>各部分必须出现且按顺序出现</td> + <td><code>solid <length></code></td> + </tr> + <tr> + <td><code>&&</code></td> + <td>“与”组合符</td> + <td>各部分必须出现，但可以不按顺序</td> + <td><code><length> && <string></code></td> + </tr> + <tr> + <td><code>||</code></td> + <td>“或”组合符</td> + <td>各部分至少出现一个，可以不按顺序</td> + <td><code><'border-image-outset'> || <'border-image-slice'></code></td> + </tr> + <tr> + <td><code>|</code></td> + <td>“互斥”组合符</td> + <td>各部分恰好出现一个</td> + <td><code>smaller | small | normal | big | bigger</code></td> + </tr> + <tr> + <td><code>[ ]</code></td> + <td>方括号</td> + <td>强调优先级</td> + <td><code>bold [ thin && <length> ]</code></td> + </tr> + <tr> + <th colspan="4">数量符号</th> + </tr> + <tr> + <td></td> + <td>无数量符号</td> + <td>恰好一次</td> + <td><code>solid</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>星号</td> + <td>零次、一次或多次</td> + <td><code>bold smaller*</code></td> + </tr> + <tr> + <td><code>+</code></td> + <td>加号</td> + <td>一次或多次</td> + <td><code>bold smaller+</code></td> + </tr> + <tr> + <td><code>?</code></td> + <td>问号</td> + <td>零次或一次（即可选）</td> + <td><code>bold smaller?</code></td> + </tr> + <tr> + <td><code>{A,B}</code></td> + <td>大括号</td> + <td>至少<code>A</code>次，至多<code>B</code>次</td> + <td><code>bold smaller{1,3}</code></td> + </tr> + <tr> + <td><code>#</code></td> + <td>井号</td> + <td>一次或多次，但多次出现必须以逗号分隔</td> + <td><code>bold smaller#</code></td> + </tr> + <tr> + <td><code>!</code></td> + <td>叹号</td> + <td>组必须产生一个值</td> + <td><code>[ bold? smaller? ]!</code></td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}</td> + <td>{{ Spec2('CSS3 Values') }}</td> + <td>{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }} 添加了井号数量符。</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>{{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }} 添加了“与”组合符。</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>最初定义。</td> + </tr> + </tbody> +</table> + +<h2 id="参考条目">参考条目</h2> + +<ul> + <li>{{ CSS_key_concepts() }}</li> +</ul> |