CSS引号简介
CSS引号属性被定义为指定用于更多嵌套层次的引号，而它们是使用内容属性插入的。这些引号可以被添加到任何元素中，并寻求伪元素::before和::after的好处，在引号的开头和结尾插入引号。这个CSS引号指定了在代码中使用哪种类型的引号。我们还调用了十六进制代码来显示生成内容的各种引号符号。
语法。
CSS引号的一般语法是这样的：
Selector
{quotes : values;
}
The values are given as
Quotes : [ String string ] | none |initial |inherit;
- 可能的值是字符串和无；此外，我们还有CSS-一个常见的关键字，其属性值为初始（取决于我们使用的浏览器）和继承。
- 内容属性使用四个引号值：开放引号、封闭引号、无开放引号和无封闭引号。一对字符串值代表一个字符串，后两个引号值为无，它可以防止生成带有引号的内容。
引号在CSS中是如何工作的？
引号值被指定为一对字符串，其中第一个字符串描述的是开引号["]，第二个字符串描述的是闭引号["]。此外，我们还有卷曲的、直的等引号。那么，用户代理如何确定使用哪一个呢？所以就有了一个quotes属性，将这一对引号应用于用户代理。
当谈及多对嵌套层次是采取这样的方式，第一对用于最高的嵌套层次。最上面的嵌套层使用双引号，单引号用于下一层，以便更精确地看到。最后，也是最重要的，用户应该使用指定的语言引号，所以在样式表中为元素标签添加引号是没有必要的。
让我们来看看这个例子。
- 带有闭合引号和开放引号的单对。
quotes:
" " " " " ; // 直线引号
- 两对。
quotes:
""" """ "'" "'";
例子:
"嗨，你好吗，'很高兴见到你。' "
我们可以在引号属性中放置尽可能多的引号对。
一些用于引号的Hexa代码如下。
| 六进制代码 | 符号 | 定义 |
| \2018 | ' | 左侧单引号 |
| \2019 | ' | Right Single Quote |
| \201C | " | Left Double Quote |
| \201D | " | 右边的双引号 |
示例代码。
quotes: "\201C" "\201D" "\2018" "\2019";
注意： 如果嵌套深度为数字或大于对数，最后指定的对数将被重复。
CSS引号的例子
下面给出了CSS引号的例子。
例子 #1
简单的引号概念，使用None - 一个默认值。
代码。
<!DOCTYPE html>
<html>
<head>
<title>
CSS - quotes Property | None
</title>
<style>
#course {
quotes:none;
font-size: 18px;
color : Blue;
}
</style>
</head>
<body>
<center>
<h1 style="color:red;"> Banking Course- EDUCBA</h1>
<h2 style="color:brown;">quotes:none;</h2>
<p><q id="course">Banking Management.</q></p>
</center>
</body>
</html>
解释一下:
- 在上面的代码中，我们创建了一个带有文本内容的id名称'course'。
- 为了显示引号的内容属性，我们指定了一个引号：无；因此，在结果中不会产生任何引号。
输出:
例子 #2
代码。
<!DOCTYPE html>
<html>
<head>
<title>
Example Showing CSS - quotes Property
</title>
<style>
p {
quotes: none;
font-size: 22px;
color: red;
}
p:before{
content: open-quote;
}
p:after{
content: close-quote;
}
</style>
</head>
<body>
<center>
<h1> EDUCBA - Advanced Certification </h1>
<p> EDUCBA - Data Science using Python programming certification course helps you to learn data science concepts deeply </p>
</center>
</body>
</html>
解释:
- 在上面的代码片断中，p元素被指定为无。
输出:
例子#3
使用十六进制代码进行引号。
代码:
<!DOCTYPE html>
<html>
<head>
<style>
q
{
quotes: '\201C' '\201D';
font:2.5em Georgia Bold;
}
</style>
</head>
<body>
<p><q>Welcome to my Home Page</q></p>
</body>
</html>
解释:
- 在上面的代码中，使用quote属性来设置双引号的十六进制代码值。例如，我们在样式部分使用了201C和201D作为左右双引号。
输出:
例子 #4
在一个程序中使用不同的引号符号。
代码。
<!DOCTYPE html>
<html>
<head>
<title>
CSS quotes Property
</title>
<style>
body{
text-align: center;
}
h1{
color: orange;
}
p{
font-size: 18px;
}
#aq {
quotes: '?' '?';
}
#aq1 {
quotes: '«' '»';
}
#aq2{
quotes: '?' '?' '«' '»' ;
}
#aq3{
quotes: '\2018' '\2019';
}
#aq4{
quotes: '\2039' '\203A';
}
#aq5 {
quotes: '\201C' '\201E';
}
#aq6 {
quotes: '\201D' '\201E';
}
#aq6 {
quotes: '\0022' '\201E';
}
#aq7 {
quotes: '\201C' '\201D';
}
#aq8 {
quotes: initial;
}
</style>
</head>
<body>
<h1> Demo On Quotes Property Using Strings </h1>
<p><q id="aq"> facebook.com </q></p>
<p><q id="aq1"> facebook.com </q></p>
<p><q id="aq2"> facebook.com </q></p>
<p><q id="aq3"> facebook.com </q></p>
<p><q id="aq4"> facebook.com </q></p>
<p><q id="aq5"> facebook.com </q></p>
<p><q id="aq6"> facebook.com </q></p>
<p><q id="aq7"> facebook.com </q></p>
<p><q id="aq8">facebook.com </q></p>
</body>
</html>
解释:
- 上面的代码使用了所有的引号的可能性，这些引号是用id的q元素创建的。
输出:
例子#5
代码:
<html>
<head>
<title>CSS quotes Property for Language</title>
<style type="text/css">
q:lang(en) {
quotes: "«" "»" "‘" "’";
}
q:lang(fr) {
quotes: "»" "«" "“" "”";
}
</style>
</head>
<body>
<h1>CSS quotes property - Demo</h1>
<h2>Setting up the Quotes for English Text</h2>
<p lang="en"><q>Hi Students! <q>I'm your Instructor for this course</q>, okay</q></p>
<h2>Setting up the Quotes for French Text</h2>
<p lang="fr"><q>Salut les étudiants! <q>Je suis votre instructeur pour ce cours</q>,
d'accord</q></p>
</body>
</html>
输出:
结论
CSS引号在文本中建立了统一的外观。因为每种语言都有自己的传统引号，而这个属性对它有帮助。尽管引号在发达地区发挥的作用最小，但它仍然被用于设计开发中。
