diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/css/quotes | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/css/quotes')
-rw-r--r-- | files/zh-cn/web/css/quotes/index.html | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/quotes/index.html b/files/zh-cn/web/css/quotes/index.html new file mode 100644 index 0000000000..41d4290b70 --- /dev/null +++ b/files/zh-cn/web/css/quotes/index.html @@ -0,0 +1,144 @@ +--- +title: quotes +slug: Web/CSS/quotes +translation_of: Web/CSS/quotes +--- +<div>{{CSSRef}}</div> + +<div><code><strong>quotes</strong></code> <a href="/en-US/docs/CSS">CSS</a> 属性用于设置引号的样式。</div> + +<div></div> + +<div>{{EmbedInteractiveExample("pages/css/quotes.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush:css no-line-numbers">/* Keyword value */ +quotes: none; + +/* <string> values */ +quotes: "«" "»"; /* Set <em>open-quote</em> and <em>close-quote</em> to the French quotation marks */ +quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */ + +/* Global values */ +quotes: inherit; +quotes: initial; +quotes: unset; +</pre> + +<h3 id="Values" name="Values">值</h3> + +<dl> + <dt><code>none</code></dt> + <dd> {{cssxref("content")}} 属性的值 <code>open-quote</code> 和 <code>close-quote</code> 将不会展示引号.</dd> + <dt><code>auto</code></dt> + <dd>用适当的引号,基于在所选元素上设置的任何语言值(例如,通过 {{htmlattrxref("lang")}} 属性)。</dd> + <dt><code>[<string> <string>]+</code></dt> + <dd>一组或者多组 {{cssxref("<string>")}} 的值对应 <code>open-quote</code> and <code>close-quote</code>. 第一对表示引号的外层,第二对表示第一个嵌套层,下一对表示第三层,依此类推。</dd> +</dl> + +<h3 id="语法格式">语法格式</h3> + +<pre>{{csssyntax}}</pre> + +<h2 id="示例">示例</h2> + +<h3 id="基本用法">基本用法</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><q>To be or not to be. That's the question!</q> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">q { + quotes: '"' '"' "'" "'"; +} +q::before { + content: open-quote; +} +q:after { + content: close-quote; +}</pre> + +<h4 id="结果">结果</h4> + +<p>{{EmbedLiveSample('Basic_quote_marks', "100%", 60)}}</p> + +<h3 id="自动选择引号">自动选择引号</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre><div lang="fr"> + <q>Ceci est une citation française.</q> +<div> +<hr> +<div lang="ru"> + <q>Это русская цитата</q> +<div> +<hr> +<div lang="de"> + <q>Dies ist ein deutsches Zitat</q> +<div> +<hr> +<div lang="en"> + <q>This is an English quote.</q> +<div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre>/*q { + quotes: auto; +}*/</pre> + +<h4 id="结果_2">结果</h4> + +<p>{{EmbedLiveSample('Auto_quotes', "100%", 200)}}</p> + +<h2 id="Notes" name="Notes">备注</h2> + +<ul> + <li>对于大多数浏览器,引号的默认值始终为auto(Firefox 70+),否则浏览器具有此默认行为(Chromiums,Safari,Edge),因此上面的示例可以在不显式设置的情况下工作。</li> + <li>从Firefox 3.5开始,可以使用 <code>-moz-<a class="internal" href="/en-US/docs/CSS/initial" title="en-US/docs/CSS/initial">initial</a></code>读取quotes属性的初始值,这在Firefox的早期版本中是不可能的。</li> +</ul> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Content", "#quotes", "quotes")}}</td> + <td>{{Spec2("CSS3 Content")}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + + + +<p>{{Compat("css.properties.quotes")}}</p> + +<h2 id="See_also" name="See_also">参考</h2> + +<ul> + <li>{{ Cssxref("content") }}</li> +</ul> |