Css 简明教程

CSS - quotes

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

CSS quotes property allows browser to render quotation marks for the content.

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

Quotes can be added to any element. They seek the benefit of pseudo-elements ::before and ::after to insert the quotation marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property.

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

This CSS quotes specifies how the browser should render quotation marks that are added using the open-quote and close-quote values of the content property.

Possible Values

  1. none − The open-quote and close-quote values of the content property produce no quotation marks.

  2. string,string,+ − One or more pairs of string values for open-quote and close-quote. The first pair represents the outer level of quotation. The second pair is for the first nested level and next pair for third level and so on.

  3. initial − Depends on user agent

  4. auto − Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).

Applies to

所有元素。

All elements.

Syntax

Keyword Value

quotes: none;
quotes: auto;

<string> Value

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

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

Following table describes the various quotation mark characters:

CSS quotes - none Value

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

The none value for the quotes property indicates that open-quote and close-quote values of the content property produce no quotation marks. Following example demonstartes this:

<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,+ 值时应使用哪些引号。

Following example demonstartes specifies which quotation marks to use when string,string,+ value is used.

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

The first value specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, and so on

<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 。

Followig example demonstrates use of the quotes: initial; property value. This values sets default values to 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，自动根据语言确定正确的引号——如下例所示：

Sets the quotes property to the value auto that automatically determines the correct quotation marks based on the language - as demonstrated in the following example:

<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) 定义不同样式的引号。

You can also use the :lang pseudo-class to define different styles for quotation marks based on the language attribute (lang) within the elements.

  1. The :lang(en) rule defines styles for elements with the English language attribute.

  2. The :lang(fr) rule defines styles for elements with the French language attribute.

让我们看一个示例——

Let us see an example −

<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>