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>

列印頁面