diff options
Diffstat (limited to 'files/zh-cn/web/css/@property/syntax/index.html')
| -rw-r--r-- | files/zh-cn/web/css/@property/syntax/index.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/@property/syntax/index.html b/files/zh-cn/web/css/@property/syntax/index.html new file mode 100644 index 0000000000..ab6fae937d --- /dev/null +++ b/files/zh-cn/web/css/@property/syntax/index.html @@ -0,0 +1,128 @@ +--- +title: syntax +slug: Web/CSS/@property/syntax +tags: + - CSS + - Reference + - Web + - Property + - Houdini +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p><strong><code>syntax</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 描述符在使用{{cssxref("@property")}} {{cssxref("at-rule")}}时是必需的，它描述了该属性所允许的语法结构。</p> + +<h2 id="Syntax">Syntax</h2> + +<p>如下是所有的有效syntax字符串:</p> + +<pre class="brush: css no-line-numbers">syntax: '<color>'; /* 接收一个颜色值 */ + +syntax: '<length> | <percentage>'; /* 接收长度或百分比参数，但是二者之间不进行计算合并 */ + +syntax: 'small | medium | large'; /* 接收这些参数值之一作为自定义标识符 */ + +syntax: '*'; /* 任何有效字符 */ +</pre> + +<h2 id="值">取值</h2> + +<p>规范定义的、受语法支持的字符串。支持的语法是<a href="/en-US/docs/Web/CSS/CSS_Types">CSS types</a>的子集。 这些可以单独使用，一些类型也可以结合使用。</p> + +<dl> + <dt><code>"<length>"</code></dt> + <dd>任何有效的 {{cssxref("<length>")}} 值.</dd> + <dt><code>"<number>"</code></dt> + <dd>任何有效的 {{cssxref("<number>")}} 值.</dd> + <dt><code>"<percentage>"</code></dt> + <dd>任何有效的 {{cssxref("<percentage>")}} 值.</dd> + <dt><code>"<length-percentage>"</code></dt> + <dd>任何有效的 {{cssxref("<length-percentage>")}} 值.</dd> + <dt><code>"<color>"</code></dt> + <dd>任何有效的 {{cssxref("<color>")}} 值.</dd> + <dt><code>"<image>"</code></dt> + <dd>任何有效的 {{cssxref("<image>")}} 值.</dd> + <dt><code>"<url>"</code></dt> + <dd>任何有效的 {{cssxref("url()","url()")}} 值.</dd> + <dt><code>"<integer>"</code></dt> + <dd>任何有效的 {{cssxref("<integer>")}} 值.</dd> + <dt><code>"<angle>"</code></dt> + <dd>任何有效的 {{cssxref("<angle>")}} 值.</dd> + <dt><code>"<time>"</code></dt> + <dd>任何有效的 {{cssxref("<time>")}} 值.</dd> + <dt><code>"<resolution>"</code></dt> + <dd>任何有效的 {{cssxref("<resolution>")}} 值.</dd> + <dt><code>"<transform-function>"</code></dt> + <dd>任何有效的 {{cssxref("<transform-function>")}} 值.</dd> + <dt><code>"<custom-ident>"</code></dt> + <dd>任何有效的 {{cssxref("<custom-ident>")}} 值.</dd> + <dt><code>"<transform-list>"</code></dt> + <dd>A list of valid {{cssxref("<transform-function>")}} 值.</dd> +</dl> + +<h2 id="Formal_definition">标准定义</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax">标准语法</h2> + +<pre class="brush: css">{{csssyntax}}</pre> + +<h2 id="Examples">实例</h2> + +<p>为 <code>--my-color</code> {{cssxref('--*', '自定义属性')}}添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。</p> + +<p>使用 <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref('@property')}} <a href="/en-US/docs/Web/CSS/At-rule">规则</a>:</p> + +<pre class="brush: css">@property --my-color { + syntax: '<color>'; + inherits: false; + initial-value: #c0ffee; +} +</pre> + +<p>使用 <a href="/en-US/docs/Web/JavaScript">JavaScript中的</a> {{domxref('CSS.registerProperty')}}函数:</p> + +<pre class="brush: js">window.CSS.registerProperty({ + name: '--my-color', + syntax: '<color>', + inherits: false, + initialValue: '#c0ffee', +}); +</pre> + +<h2 id="Formal_syntax">标准语法</h2> + +<pre class="brush: css">{{csssyntax}}</pre> + +<h2 id="Specifications">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">提案</th> + </tr> + <tr> + <td>{{SpecName('CSS Properties and 值 API', '#at-property-rule')}}</td> + <td>{{Spec2('CSS Properties and 值 API')}}</td> + <td>初始定义.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">浏览器兼容性</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("css.at-rules.property")}}</p> + +<h2 id="See_also">另见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/CSS_Properties_and_值_API">CSS属性与值 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Painting_API">CSS 绘图 API</a></li> + <li><a href="/zh-CN/docs/Web/API/CSS_Typed_OM_API">CSS 类型对象模型</a></li> + <li><a href="/zh-CN/docs/Web/Houdini">CSS Houdini</a></li> +</ul> |