CSS quotes

2025年3月26日 | 阅读 3 分钟

CSS 中的 quotes 属性用于指定句子中引用的引号类型。它通过 content 属性的 open-quote 和 close-quote 值来定义引用时应使用的引号。

语法

值

none: 这是默认值，它指定 content 属性的 open-quote 和 close-quote 值不生成任何引号。

string: 此值指定句子中使用的引号类型。第一对表示最外层引号；第二对表示第一个嵌套级别；第三对表示第三个级别，依此类推。

**初始：**它将属性设置为其默认值。

以下是一些引号字符的表格。

	描述	实体编号
"	双引号	\0022
'	单引号	\0027
„	双引号（低位双引号）	\201E
«	双引号，左尖引号	\00AB
»	双引号，右尖引号	\00BB
‹	单引号，左尖引号	\2039
›	单引号，右尖引号	\203A
'	左引号（高位单引号）	\2018
'	右引号（高位单引号）	\2019
“	左引号（高位双引号）	\201C
”	右引号（高位双引号）	\201D

我们可以通过一些示例更清楚地理解 quotes 属性。

示例 - 使用 none 值

在此示例中，我们为 quotes 属性使用了 none 值，并为 content 属性使用了 open-quote 和 close-quote 值。none 值会阻止 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 tpointtech.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"> tpointtech.com </q></p>
<p><q id="j2"> tpointtech.com </q></p>
<p><q id="j3"> tpointtech.com </q></p>
<p><q id="j4"> tpointtech.com </q></p>
<p><q id="j5"> tpointtech.com </q></p>
<p><q id="j6"> tpointtech.com </q></p>
<p><q id="j7"> tpointtech.com </q></p>
<p><q id="j8"> tpointtech.com </q></p>
<p><q id="j9"> tpointtech.com </q></p>
<p><q id="j10"> tpointtech.com </q></p>
<p><q id="j11"> tpointtech.com </q></p>
<p><q id="j12"> tpointtech.com </q></p>
<p><q id="j13"> tpointtech.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 tpointtech.com. </q> <br>
<q lang = "fr"> This site is developed so that students may learn computer science related technologies easily. </q><br>
The tpointtech.com is committed to provide easy and in-depth tutorials on various technologies. </q></p>
</body>
</html>

输出

下一篇主题CSS transform-origin 属性

CSS quotes

语法

值

示例 - 使用 none 值

示例 - 使用 string 值

示例 - 使用 :lang 伪类

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS quotes

语法

值

示例 - 使用 none 值

示例 - 使用 string 值

示例 - 使用 :lang 伪类

相关帖子

CSS Overflow

CSS Margin

CSS Float

CSS order

CSS top property

CSS calc()

CSS Variables

CSS Footer

CSS Display Grid

CSS filter

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器