blob: 41d4290b70e4a2e254688d9f8cc25df426899eb2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
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>
|
