CSS quotes
CSS quotes
CSS中的
quotes 属性为句子中使用的引号指定引号的类型。它通过使用
content 属性的
open-quote和
close-quote值来定义插入引号时要使用的引号。
quotes 属性为句子中使用的引号指定引号的类型。它通过使用
content 属性的
open-quote和
close-quote值来定义插入引号时要使用的引号。
语法
quotes: none | string | initial;
值
none：这是默认值，它指定
open-quote和
close-quotecontent的属性 值不会产生任何引号。
open-quote和
close-quotecontent的属性 值不会产生任何引号。
string：：该值指定句子中使用的引号类型。
initial：它将属性设置为其默认值。
有些引号字符列表如下。
| 说明 | 实体编号 | |
| " | 双引号 | \ 0022 |
| ' | 单引号 | \ 0027 |
| „ | 双引号（双低9） | \ 201E |
| « | 双左角引号 | \ 00AB |
| » | 双直角报价 | \ 00BB |
| ‹ | 单引号 | \ 2039 |
| › | 单角弯角 | \ 203A |
| ' | 左引号（单高6） | \ 2018 |
| ' | 右引号（单高9） | \ 2019 |
| " | 左引号（双高6） | \ 201C |
| " | 右引号（双高9） | \ 201D |
通过使用一些示例，我们可以更清楚地理解
quotes 属性。
quotes 属性。
示例-none
在此示例中，我们使用
quotation 属性的无
值和
open-quote和
close-quote
content 属性的"strong"值。
无值可防止
content 属性的值生成引号。
quotation 属性的无
值和
open-quote和
close-quote
content 属性的"strong"值。
无值可防止
content 属性的值生成引号。
<!DOCTYPE html>
<html>
<head>
<title>
CSS quotes Property
</title>
<style>
p {
quotes: none;
font-size: 20px;
}
p:before {
content: open-quote;
}
p:after {
content: close-quote;
}
</style>
</head>
<body>
<center>
<h1> Example of quotes: none; </h1>
<p> Welcome to the bianchenghao6.com </p>
</center>
</body>
</html>
输出
示例-使用string值
<!DOCTYPE html>
<html>
<head>
<title>
CSS quotes Property
</title>
<style>
body {
text-align: center;
}
h1 {
color: blue;
}
p {
font-size: 20px;
}
#j1 {
quotes: '‹''›';
}
#j2 {
quotes: '‘''’';
}
#j3 {
quotes: '”''„';
}
#j4 {
quotes: '«''»';
}
#j5 {
quotes: '“''”';
}
#j6 {
quotes: '‹''›''«''»';
}
#j7 {
quotes: '\2018''\2019';
}
#j8 {
quotes: '\2039''\203A';
}
#j9 {
quotes: '\201C''\201E';
}
#j10 {
quotes: '\201D''\201E';
}
#j11 {
quotes: '\0022''\201E';
}
#j12 {
quotes: '\201C''\201D';
}
#j13 {
quotes: initial;
}
</style>
</head>
<body>
<h1> Example of the quotes:string; </h1>
<p><q id="j1"> bianchenghao6.com </q></p>
<p><q id="j2"> bianchenghao6.com </q></p>
<p><q id="j3"> bianchenghao6.com </q></p>
<p><q id="j4"> bianchenghao6.com </q></p>
<p><q id="j5"> bianchenghao6.com </q></p>
<p><q id="j6"> bianchenghao6.com </q></p>
<p><q id="j7"> bianchenghao6.com </q></p>
<p><q id="j8"> bianchenghao6.com </q></p>
<p><q id="j9"> bianchenghao6.com </q></p>
<p><q id="j10"> bianchenghao6.com </q></p>
<p><q id="j11"> bianchenghao6.com </q></p>
<p><q id="j12"> bianchenghao6.com </q></p>
<p><q id="j13"> bianchenghao6.com </q></p>
</body>
</html>
输出
我们还可以使用：
:lang 伪类来更改引号。它可以应用于文档中的所有元素，但是并非所有元素都使用quotes属性，因此它将应用于大多数元素。让我们看一个相同的示例。
:lang 伪类来更改引号。它可以应用于文档中的所有元素，但是并非所有元素都使用quotes属性，因此它将应用于大多数元素。让我们看一个相同的示例。
示例-使用:lang伪类
<html>
<head>
<style type="text/css">
p {
font-size: 25px;
color: red;
}
:lang(en) {
quotes: '“''”';
}
:lang(fr) {
quotes: '\201D''\201E';
}
</style>
</head>
<body>
<p><q lang="en"> Welcome to the bianchenghao6.com. </q> <br>
<q lang="fr"> This site is developed so that students may learn computer science related technologies easily. </q><br>
The bianchenghao6.com is committed to provide easy and in-depth tutorials on various technologies. </q></p>
</body>
</html>
输出
