CSS 引号

什么是引号

CSS 的 quotes 属性允许浏览器为内容呈现引号。CSS 的 quotes 可以添加到任何元素中。它们利用伪元素 ::before 和 ::after 在引号的开头和结束处插入引号。这些伪元素由 content 属性定义。

这个 CSS 的 quotes 属性指定了浏览器如何呈现使用 content 属性的 open-quote 和 close-quote 值添加的引号。

CSS 引号值

quotes 属性可以使用以下值之一−

none : content 属性的 open-quote 和 close-quote 值不产生引号。
string string,+ : 一个或多个字符串对为 open-quote 和 close-quote 的值。第一对表示最外层的引号。第二对是第一个嵌套级别的引号，下一对是下一个嵌套级别的引号，依此类推。
initial : 取决于用户代理
auto : 根据所选元素设置的语言值（例如通过 lang 属性）使用适当的引号标记。

引号字符

下表描述了各种引号字符：

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

CSS引号 – 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单引号

以下示例演示了在使用 string,string,+ 值时，指定要使用的引号。

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

<html>
<head>
<style>
   #quote1 {
      quotes: '‘' '’';
   }
   #quote2 {
      quotes: '"' '"';
   }
   #quote3 {
      quotes: '<' '>';
   }
   #quote4 {
      quotes: '\2018' '\2019';
   }
</style>
</head>
<body>
   <p><q id="quote1">Tutorialspoint CSS Quotes.</q></p>
   <p><q id="quote2">Tutorialspoint CSS Quotes.</q></p>
   <p><q id="quote3">Tutorialspoint CSS Quotes.</q></p>
   <p><q id="quote4">Tutorialspoint CSS Quotes.</q></p>
</body>
</html>

CSS引号初始值

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

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

CSS自动引号

将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引号 `: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>