CSS quotes
CSS中的
quotes 属性为句子中使用的引号指定引号的类型。它通过使用
content 属性的
open-quote和
close-quote值来定义插入引号时要使用的引号。
语法
quotes: none | string | initial;
值
none：这是默认值，它指定
open-quote和
close-quote content 的属性 值不会产生任何引号。
string：：该值指定句子中使用的引号类型。
initial：它将属性设置为其默认值。
有些引号字符列表如下。
| |
说明 |
实体编号 |
| " |
双引号 |
\ 0022 |
| ' |
单引号 |
\ 0027 |
| „ |
双引号（双低9） |
\ 201E |
| « |
双左角引号 |
\ 00AB |
| » |
双直角报价 |
\ 00BB |
| ‹ |
单引号 |
\ 2039 |
| › |
单角弯角 |
\ 203A |
| ' |
左引号（单高6） |
\ 2018 |
| ' |
右引号（单高9） |
\ 2019 |
| " |
左引号（双高6） |
\ 201C |
| " |
右引号（双高9） |
\ 201D |
通过使用一些示例，我们可以更清楚地理解
quotes 属性。
示例-none
在此示例中，我们使用
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 lidihuo.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"> lidihuo.com </q></p>
<p><q id="j2"> lidihuo.com </q></p>
<p><q id="j3"> lidihuo.com </q></p>
<p><q id="j4"> lidihuo.com </q></p>
<p><q id="j5"> lidihuo.com </q></p>
<p><q id="j6"> lidihuo.com </q></p>
<p><q id="j7"> lidihuo.com </q></p>
<p><q id="j8"> lidihuo.com </q></p>
<p><q id="j9"> lidihuo.com </q></p>
<p><q id="j10"> lidihuo.com </q></p>
<p><q id="j11"> lidihuo.com </q></p>
<p><q id="j12"> lidihuo.com </q></p>
<p><q id="j13"> lidihuo.com </q></p>
</body>
</html>
输出
我们还可以使用：
: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 lidihuo.com. </q> <br>
<q lang="fr"> This site is developed so that students may learn computer science related technologies easily. </q><br>
The lidihuo.com is committed to provide easy and in-depth tutorials on various technologies. </q></p>
</body>
</html>
输出
