Css 简明教程

CSS - quotes

CSS quotes 属性允许浏览器为内容呈现引号。

可以为任何元素添加引号。它们寻求 * ::before* 和 * ::after* 伪元素的好处，以在引用的开头和结尾插入引号。这些伪元素由 content 属性定义。

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

Possible Values

  1. none - content 属性的 open-quote 和 close-quote 值不产生任何引号。

  2. string,string,+ - content 属性的 open-quote 和 close-quote 值的一对或多对字符串。第一对表示引用的外层级。第二对表示第一个嵌套级，接下来的对表示第三个嵌套级，依此类推。

  3. initial - 取决于用户代理

  4. auto - 将使用适合于所选元素上设置的任何语言值（即通过 lang 属性）的适当引号。

Applies to

所有元素。

Syntax

Keyword Value

quotes: none;
quotes: auto;

<string> Value

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

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

CSS quotes - none Value

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 &lti&gtnone</i></p>
</body>
</html>

CSS quotes - <string> Value

以下示例演示了在使用 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 Value

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

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

CSS quotes - auto Value

将 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 - Using :lang pseudo-class

还可以使用 :lang pseudo-class 根据元素中的语言属性 (lang) 定义不同样式的引号。

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

  2. :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>