CSS - 引号

什么是报价？

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

此 CSS引号指定浏览器应如何呈现使用content属性的左引号和右引号值添加的引号。

CSS 引用值

quote属性可以采用以下值之一 -

  • none：内容属性的左引号和右引号值不产生引号。

  • string string,+ ：开引号和闭引号的一对或多对字符串值。第一对代表报价的外部水平。第二对用于第一个嵌套级别，下一对用于下一个嵌套级别，依此类推。

  • 初始：取决于用户代理

  • auto：适当的引号将用于在所选元素上设置的任何语言值（即通过 lang 属性）。

CSS 引号 - 演示

尝试为 CSS引号属性选择不同的值，并在右侧框中查看结果。

引号字符

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

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

CSS 引号 - 无

quotes 属性的none值表示内容属性的左引号和右引号值不产生引号。下面的例子证明了这一点：

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

下面的示例 demostartes 指定在使用string,string,+ value时使用哪些引号。

第一个值指定第一级报价嵌入，接下来的两个值指定下一个报价嵌入级别，依此类推

<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 引号初始

以下示例演示了引号的使用：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>