CSS - 引号

CSS 的 `quotes` 属性允许浏览器为内容渲染引号。

引号可以添加到任何元素。它利用伪元素::before 和 ::after 在引文的开头和结尾插入引号。这些伪元素由 `content` 属性定义。

此 CSS `quotes` 指定浏览器应如何渲染使用 `content` 属性的 `open-quote` 和 `close-quote` 值添加的引号。

可能的值

`none` - `content` 属性的 `open-quote` 和 `close-quote` 值不产生引号。
`string,string,+` - 一个或多个 `string` 值对用于 `open-quote` 和 `close-quote`。第一对代表最外层的引号。第二对用于第一层嵌套，下一对用于第三层，以此类推。
`initial` - 取决于用户代理
`auto` - 将使用适合所选元素上设置的任何语言值（即通过 lang 属性）的适当引号。

应用于

所有元素。

语法

关键字值

quotes: none;
quotes: auto;

<string> 值

   quotes: "«" "»"; 
   quotes: "«" "»" "‹" "›";

下表描述了各种引号字符

引号	描述	实体编号
"	双引号	\0022
'	单引号	\0027
<	左尖括号单引号	\2039
>	右尖括号单引号	\203A
<<	左尖括号双引号	\00AB
>>	右尖括号双引号	\00BB
>>	右尖括号双引号	\00BB
‘	左引号（单高-6）	\2018
’	右引号（单高-9）	\2019
“	左引号（双高-6）	\201C
”	右引号（双高-9）	\201D
„	双引号（双低-9）	\201E

CSS quotes - none 值

`quotes` 属性的 `none` 值表示 `content` 属性的 `open-quote` 和 `close-quote` 值不产生引号。以下示例演示了这一点。

<html>
<head>
<style>
   p {
      quotes: none;
   }
   p:before {
      content: open-quote;
   }
   p:after {
      content: close-quote;
   }
</style>
</head>
<body>
   <p>Tutorialspoint CSS Quotes set to <i>none</i></p>
</body>
</html>

CSS quotes - <string> 值

以下示例演示了当使用 `string,string,+` 值时指定使用哪些引号。

第一个值指定第一层引号嵌入，接下来的两个值指定下一层引号嵌入，以此类推。

<html>
<head>
<style>
   #quote1 {
      quotes: '‘' '’';
   }
   #quote2 {
      quotes: '"' '"';
   }
   #quote3 {
      quotes: '<' '>';
   }
   #quote4 {
      quotes: '<<' '>>';
   }
   #quote5 {
      quotes: "<<" ">>" "<" ">";
   }
   #quote6 {
      quotes: '\2018' '\2019';
   }
   #quote7 {
      quotes: '\'' 00AB' ' \00BB';
   }
   #quote8 {
      quotes: '\2039' '\203A';
   }
   #quote9 {
      quotes: '\00AB' '\00BB';
   }
   #quote10 {
      quotes: '\201D' '\201E';
   }
</style>
</head>
<body>
   <h3>Using quotes symbol:</h3>
   <p><q id="quote1">Tutorialspoint CSS Quotes.</q></p>
   <p><q id="quote2">Tutorialspoint CSS Quotes</q>.</q></p>
   <p><q id="quote1">Tutorialspoint CSS <q id="quote2">Quotes</q>.</q></p>
   <p>Tutorialspoint CSS <q id="quote3">Quotes</q>.</p>
   <p><q id="quote4">Tutorialspoint CSS Quotes</q>.</q></p>
   <p><q id="quote5">Tutorialspoint CSS<q id="quote5">Quotes</q>.</q></p>

   <h3>Using entity number:</h3>
   <p><q id="quote6">Tutorialspoint CSS Quotes.</q></p>
   <p><q id="quote6">Tutorialspoint CSS<q id="quote6">Quotes</q>.</q></p>
   <p><q id="quote7">Tutorialspoint CSS Quotes.</q></p>
   <p>Tutorialspoint CSS <q id="quote8">Quotes</q>.</p>
   <p><q id="quote9">Tutorialspoint CSS <q id="quote9">Quotes</q>.</q></p>
   <p><q id="quot10">Tutorialspoint CSS Quotes.</q></p>
</body>
</html>

CSS quotes - initial 值

以下示例演示了 `quotes: initial;` 属性值的使用。此值将默认值设置为 `quotes`。

<html>
<head>
<style>
   q {
      quotes: initial;
   }
</style>
</head>
<body>
   <p><q>Tutorialspoint CSS Quotes.</q></p>
</body>
</html>

CSS quotes - auto 值

将 `quotes` 属性设置为 `auto` 值，该值会根据语言自动确定正确的引号 - 如以下示例所示。

<html>
<head>
<style>
   q {
      quotes: auto;
   }
</style>
</head>
<body>
   <div lang="fr">
      <q>Tutorialpoint est un site de cours d'anglais.</q>
   </div>
   <hr />
   <div lang="ru">
      <q>Tutorialpoint — сайт курсов английского языка.</q>
   </div>
   <hr />
   <div lang="de">
      <q>Tutorialpoint is een Engelse cursuswebsite</q>
   </div>
   <hr />
   <div lang="en">
      <q>Tutorialpoint is an english course website.</q>
   </div>
</body>
</html>

CSS quotes - 使用 :lang 伪类

您还可以使用 `:lang` 伪类根据元素内的语言属性 (lang) 定义引号的不同样式。

`:lang(en)` 规则定义具有英语语言属性的元素的样式。
`:lang(fr)` 规则定义具有法语语言属性的元素的样式。

让我们看一个例子 -

<html>
<head>
<style>
   :lang(en) {
     quotes: "#" "#" "<<" ">>";
   }
   :lang(fr) {
     quotes: '\2039' '\203A';
   }
</style>
</head>
<body>
   <p><q lang="en">Tutorialspoint CSS <q lang="en">Quotes</q>.</q></p>
   <p>Tutorialspoint CSS <q lang="fr">Quotes</q>.</p>
</body>
</html>

打印页面