CSS quotes 属性允许浏览器为内容呈现引号。
quotes 可以添加到任何元素。他们寻求伪元素 ：：before 和 ：：after 的好处，以在引号的开头和结尾插入引号。这些伪元素由 content 属性定义。
此 CSS quotes 指定浏览器应如何呈现使用 content 属性的开引号和近引号值添加的引号。
可能的值
- none − content 属性的开引号和近引号值不产生引号。
- string,string,+ − 一对或多对字符串值，用于打开引号和关闭引号。第一对代表报价的外部水平。第二对用于第一个嵌套级别，下一对用于第三个级别，依此类推。
- 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 属性的开引号和近引号值不生成引号。以下示例演示了以下内容：
<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> 值
以下示例 demonstartes 指定在使用 string，string，+ value 时要使用的引号。
第一个值指定报价嵌入的第一级，接下来的两个值指定报价嵌入的下一级，依此类推
<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 - 初始值
Followig 示例演示了引号的用法：initials; property value。此值将默认值设置为引号。
<html>
<head>
<style>
q {
quotes: initial;
}
</style>
</head>
<body>
<p><q>Tutorialspoint CSS Quotes.</q></p>
</body>
</html>
CSS quotes - 自动值
将 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>
