DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
CSS 中的 quotes
属性允许您指定通过 content: open-quote;
或 content: close-quote;
规则添加引号时使用的引号类型。 以下是使用方法
q {
quotes: "“" "”" "‘" "’";
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
在上面的示例中,添加了四个值。 一组双 智能引号 和一对单智能引号。 这有点令人困惑,因为每个引号都用引号包裹 - 但这些只是程序引号(可能是双引号 (“) 或单引号 (’)),就像 CSS 中的任何其他地方一样。 内部引号将在页面上使用。
与 quotes
属性相关的 content 属性有四个值:open-quote
、close-quote
、no-open-quote
和 no-close-quote
。
值中的第一对引号是开头和结尾引号。 第二对引号是嵌套在也使用 quotes
属性的其他引号中的一级深的引号的开头和结尾引号。 例如,<q>
元素位于 <q>
元素内部。

一些示例
第一个引号使用双引号,
第二个引号使用单引号。
带法语引号的引号。
您可以在 quotes
属性中放置任意多对引号。 但您不必放置超过两对,因为对于每个额外的引号,它只简单地重复 quotes
值的开头部分。
no-open-quote
和 no-close-quote
值会阻止引号显示,但它们会继续增加引号深度。
更多信息
- 除非您要引用某人的话,否则不要使用
<q>
元素。 在所有其他情况下(讽刺、反讽或您使用引号的其他目的),只需使用引号本身(比如这些:” “)。 - 这不仅仅适用于
<q>
元素,它也可能适用于<blockquote>
或其他任何元素。 - 引号和重音符
相关属性
其他资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
11+ | 任何 | 1.5+ | 4+ | 8+ | 任何 | 任何 |
不是我的引言,但我已经采用了它。
“伟大的设计将让人们爱上您的产品/公司”
来自秘鲁的问候 :D!
在多语言网站中,我们可以使用
html
标签上的lang
属性,而不是向引言添加类。像这样经过大量研究,包括查看许多报纸的在线版本以了解其用法和一致性,我发现虽然各国官方风格指南可能指定了引号字符,但同一国家内部的用法存在很大的差异,因此试图将引号字符与语言联系起来以供通用目的使用可能会造成挫败感。
例如,在法国,双撇号似乎只在传统报纸中使用,但在全国大部分地区,人们使用的是朝内的或普通的双引号,就像在美国一样。西班牙也一样。除了朝鲜,几乎所有其他地方都是如此!
这似乎是网络对国家文化影响的又一个例子,在线作家可能更多地受到美国在线庞大存在的影响,而不是他们自己的印刷媒体。我知道有些人希望在他们自己的国家使用“适当”的风格,但现在这些东西流动性更大,因为“正常”的范围比以前大了很多!
最终要看的是了解读者习惯。如果他们不期望使用双撇号,提供它们可能会对“时尚”产生错误的印象。
对于我正在创建的工具,我将提供 19 种主要的两级引号字符组合变体供选择,以及语言。
不幸的是,我刚刚发现 Chrome 不喜欢使用通过 css quotes 属性指定的引号,所以我要看看是否有解决方法。
至少 html dir=rtl 属性可以从以“ar”、“dv”、“fa”、“he”、“ps”、“ur”或“yi”开头的语言派生。不幸的是,这必须通过 php 函数完成,而不是 css。 :(
在大多数情况下,最好使用
:lang()
伪类,参见 http://www.w3.org/International/questions/qa-css-lang在多语言页面上应该呈现哪个引号并不取决于整个页面的语言,而是取决于引号周围文本的语言,参见 https://lists.w3.org/Archives/Public/www-international/2011JulSep/0069.html 使用
:lang(fr) > q
。在法语排版中,引号和引号之间有空格,即
quotes: "«\A0" "\A0 »";
@ Patanjali
是的,这是因为双撇号在键盘上不容易找到。有趣的是,法国前政府实际上委托一个标准组织设计了一个键盘布局,在这个布局中,他们将(以及带重音的字符)设计双撇号。
最令人恼火的事情无疑是规范,因为它对于法国的默认设置完全错误。
它建议 “«” “»” “«” “»” 作为默认值,但这是错误的。
首先,您需要在开始引号之后和结束引号之前添加一个不间断的(细)空格。然后,嵌套引号应该是花括号,因为嵌套双撇号会使文本难以阅读。
法国读者对双撇号没有任何问题。他们一旦开始阅读就会习惯(除了 John Doe 的电脑上,因为它需要疯狂的 Windows alt-d+ 组合才能访问双撇号)。
事实上,在某些情况下,直引号被认为是不专业的,排版错误,更重要的是,对法语/文化不尊重。
我发现需要在 ‘quotes’ 属性中对双引号进行反斜杠转义才能使它们正常工作。
使用 Mac OS X 上的 Chrome 28.0.1500.71。
这是因为您(错误地)使用了直引号而不是排版引号(参见 https://en.wikipedia.org/wiki/Quotation_mark)。
我偶然发现了一个网站,它有一个在线 css 压缩器,它将像 “{quotes:’\201C’ ‘\201D’ ‘\2018’ ‘\2019’;}” 这样的序列转换为 “{quotes:201C201D20182019;}”,尽管为了可读性,我将其保留为 “{quotes:201C 201D 2018 2019;}”。它在大多数浏览器中都能正常工作,除了桌面和移动版 Chrome。
在阅读完您的帖子后,我将其改回,并让 Chrome 再次正常工作!
感谢您!
对于 Chrome,情况并非如此简单。
对于其他浏览器(IE、三星、iOS),在 body 和后代元素上应用定义引号的样式会产生预期的结果,即
a) body 元素定义规则,除非后代元素也具有规则,与 lang 属性无关。
b) 如果 q 元素具有 quotes 样式,则只有嵌入式 q 元素会获得新样式,而父元素仍然具有其先前的引号,与任何元素上的 lang 属性无关。
不幸的是,Chrome 只有在元素上没有 lang 属性时才会遵守样式。一旦将 lang 属性应用于元素,则“正式”适用于 lang 属性的引号将应用于其后代 q 元素,但如果它是 q 元素,也会应用于自身。这完全搞砸了。
如果可以的话:
a) 所有浏览器都这样做。
b) 每个人都使用语言的“官方”引号。
c) Chrome 将其应用于 body 元素。
lang 属性用于语义目的,可能用于语言工具(拼写、语法),因为它实际上不是布局文本所需方向所必需的,而是正确的 dir 属性,可以从 lang 直接派生(通过使用自定义 php 函数),用于确保其他元素(如表格和字段集)的正确对齐。
现在,我正在为 HTML 虚拟用户设计工具,并希望避免让用户处理此类问题。我预计大多数人不会在一个页面上使用多种语言,但我希望以“正交”(一致且规则)的方式应用这些工具,这样,为语义元素(如部分)指定语言将使其内容以适当的方式布局,但他们可以根据目标受众选择合适的引号集。
由于存在 Chrome 问题,我似乎必须选择以下一项:
a) 让 Chrome 用户忍受它。也就是说,可能在具有 lang 属性的 q 元素或语言特定块中忍受奇怪的引号。
b) 让页面编写者(“虚拟用户”)显式地指定 dir 属性,但省略 lang 属性。
c) 让页面编写者在每个地方都放入显式引号。
我倾向于 a),因为对于
a) 只有在需要在另一种语言中嵌入引号时才会出现。我不期望我的用户在一个页面上使用多种语言。当然,他们必须不在一级 q 元素上使用引号类,但这在语义上是不正确的。
b) 我更希望方向与语言使用明确绑定,这正是
首先使用它的主要原因。我的目标用户不太可能出于任何其他原因使用它。
c) 我想避免用户做出太多微小的决定。
有什么意见吗?
实际上,在 css 中正确定义我的引号使它们独立于 lang 属性,尽管这意味着必须在每个使用 lang 属性的元素上使用一个类。
我的样式(随意使用)是
/引号/
body{quotes:'\201C' '\201D' '\2018' '\2019';}/“”‘’默认/
.Q_SuiDui * {quotes:'\2018' '\2019' '\201C' '\201D';}/‘’“”/
.Q_DuiSui * {quotes:'\201C' '\201D' '\2018' '\2019';}/“”‘’/
.Q_DS * {quotes:'\22' '\22' '\27' '\27';}/""''/
.Q_DsS * {quotes:'\301D' '\301E' '\27' '\27';}/〝〞''/
.Q_GdoGso * {quotes:'\AB' '\BB' '\2039' '\203A';}/«»‹›/
.Q_GdoDui * {quotes:'\AB' '\BB' '\201C' '\201D';}/«»“”/
.Q_GdoDol * {quotes:'\AB' '\BB' '\201E' '\201D';}/«»„”/
.Q_NK * {quotes:'\300A' '\300B' '\3008' '\3009';}/《》〈〉/
.Q_CJK * {quotes:'\300C' '\300D' '\300E' '\300F';}/「」『』/
.Q_DooSoo * {quotes:'\201E' '\201C' '\201A' '\2018';}/„“‚‘/
.Q_DolSui * {quotes:'\201E' '\201D' '\2018' '\2019';}/„”‘’/
.Q_DolSul * {quotes:'\201E' '\201D' '\2019' '\2019';}/„”’’/
.Q_DolGdo * {quotes:'\201E' '\201D' '\AB' '\BB';}/„”«»/
.Q_DolSuo * {quotes:'\201E' '\201D' '\2019' '\2018';}/„”’‘/
.Q_DolGdi * {quotes:'\201E' '\201D' '\BB' '\AB';}/„”»«/
.Q_GdiGsi * {quotes:'\BB' '\AB' '\203A' '\2039';}/»«›‹/
.Q_DulSul * {quotes:'\201D' '\201D' '\2019' '\2019';}/””’’/
.Q_Ja * {quotes:'\3010' '\3011' '\3016' '\3017';}/【】〖〗/
我的类名是有方法的。例如,DolGdo = Double opposite left Guillemot double outwards。
嘿,克里斯,你忘了提
<cite>
标签,它也与引号相关。不,因为 标签不再用于引号(html4)。在 HTML5 中,它定义了作品的标题。
@奥雷利安
没错,但在一些国家,引号用于此,因此 CSS 可能被设置为“cite:before{content:open-quote;} cite:after{content:close-quote;}”。
@Gunnar Bittersmann
正如我之前所说,将引号与语言联系起来可能不合适,因为在线通常使用的引号,以及人们通常期望的引号,大多是美国使用的“ … ‘ … ‘ … ”的变体。
现在,人们可以只将这些用于一个国家,但它们的使用并不一致,一些作者可能希望吸引那些确实期望看到官方国家引号的读者,就像我在法国找到的唯一一种引号。
您好,
在 scss 代码中,我使用的是“\201D”,但是 Grunt 构建后它被转换为“\201D”。我不确定为什么。有人可以帮我解决一下这个问题吗?
谢谢
普拉蒂克
您好,
在 scss 代码中,我使用的是“\201D”,但是 Grunt 构建后它被转换为“\\201D”。我不确定为什么。有人可以帮我解决一下这个问题吗?
谢谢
普拉蒂克
如果你想看看你感兴趣的国家在线新闻网站使用的是什么引号,请访问:http://www.enewsreference.com/country_news.shtml
该页面按国家列出,每个链接都指向所有出版物的列表,每个出版物都指示其是否在线(使用“IN”),以及其提供哪些语言版本。
关于法国,大多数在线网站都是英文的,在法语网站中,大约有一半使用美国引号。时代在变!
非常好,如果你需要德语引号!
https://jsfiddle.net/bloggerschmidt/hnaw4p2j/
我不明白为什么需要 before 和 after 伪元素。当删除整个代码块时,包含 q 选择器和 quotes 属性的那一行代码似乎仍然可以工作。我错过了什么?