CSS 引号属性允许浏览器为内容呈现引号。
引号可以添加到任何元素。他们寻求伪元素 ::before 和 ::after 在引用的开头和结尾插入引号。这些伪元素由 content 属性定义。
此 CSS 引号指定浏览器应如何呈现使用 content 属性。
属性值
none: 开引号和content 属性的 close-quote 值不会产生引号。
string,string,+: 一对或多对 string 值，用于 open-引用和结束引用。第一对代表报价的外部水平。第二对用于第一嵌套级别，下一对用于第三级别，依此类推。
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 引号: none值
quotes 属性的 none 值表示 content 属性的左引号和右引号值产生没有引号。下面的示例 demostartes 如下:
<html>
<head>
<style>
p {
quotes: none;
}
p:before {
content: open-quote;
}
p:after {
content: close-quote;
}
</style>
</head>
<body>
<p>yxjc123.com CSS Quotes set to <i>none</i></p>
</body>
</html> CSS 引号: <string> 值
下面的示例 demostartes 指定在使用 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">yxjc123.com CSS Quotes.</q></p>
<p><q id="quote2">yxjc123.com CSS Quotes</q>.</q></p>
<p><q id="quote1">yxjc123.com CSS <q id="quote2">Quotes</q>.</q></p>
<p>yxjc123.com CSS <q id="quote3">Quotes</q>.</p>
<p><q id="quote4">yxjc123.com CSS Quotes</q>.</q></p>
<p><q id="quote5">yxjc123.com CSS<q id="quote5">Quotes</q>.</q></p>
<h3>Using entity number:</h3>
<p><q id="quote6">yxjc123.com CSS Quotes.</q></p>
<p><q id="quote6">yxjc123.com CSS<q id="quote6">Quotes</q>.</q></p>
<p><q id="quote7">yxjc123.com CSS Quotes.</q></p>
<p>yxjc123.com CSS <q id="quote8">Quotes</q>.</p>
<p><q id="quote9">yxjc123.com CSS <q id="quote9">Quotes</q>.</q></p>
<p><q id="quot10">yxjc123.com CSS Quotes.</q></p>
</body>
</html> CSS 引号: 初始值
以下示例演示引号的使用:首字母；适当的价值。该值将默认值设置为引号。
<html>
<head>
<style>
q {
quotes: initial;
}
</style>
</head>
<body>
<p><q>yxjc123.com CSS Quotes.</q></p>
</body>
</html> CSS 引号: 自动值
将quotes 属性设置为值auto，该值自动确定正确的引号基于语言: 如以下示例所示:
<html>
<head>
<style>
q {
quotes: auto;
}
</style>
</head>
<body>
<div lang="fr">
<q>yxjc123.com est un site de cours d'anglais.</q>
</div>
<hr />
<div lang="ru">
<q>yxjc123.com — сайт курсов английского языка.</q>
</div>
<hr />
<div lang="de">
<q>yxjc123.com is een english cursuswebsite</q>
</div>
<hr />
<div lang="en">
<q>yxjc123.com 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">yxjc123.com CSS <q lang="en">Quotes</q>.</q></p>
<p>yxjc123.com CSS <q lang="fr">Quotes</q>.</p>
</body>
</html>