CSS - quotes 属性

CSS quotes 属性允许浏览器为内容呈现引号。

quotes 可以添加到任何元素。他们寻求伪元素：：before 和：：after 的好处，以在引号的开头和结尾插入引号。这些伪元素由 content 属性定义。

此 CSS quotes 指定浏览器应如何呈现使用 content 属性的开引号和近引号值添加的引号。

可能的值

none − content 属性的开引号和近引号值不产生引号。
string,string,+ − 一对或多对字符串值，用于打开引号和关闭引号。第一对代表报价的外部水平。第二对用于第一个嵌套级别，下一对用于第三个级别，依此类推。
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 quotes - none 值

quotes 属性的 none 值表示 content 属性的开引号和近引号值不生成引号。以下示例演示了以下内容：


<html>
<head>
<style>
	 	p {
	 	 	 quotes: none;
	 	}
	 	p:before {
	 	 	 content: open-quote;
	 	}
	 	p:after {
	 	 	 content: close-quote;
	 	}
</style>
</head>
<body>
	 	<p>Tutorialspoint CSS Quotes set to <i>none</i></p>
</body>
</html>

CSS quotes - <string> 值

以下示例 demonstartes 指定在使用 string，string，+ value 时要使用的引号。

第一个值指定报价嵌入的第一级，接下来的两个值指定报价嵌入的下一级，依此类推


<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">Tutorialspoint CSS Quotes.</q></p>
	 	<p><q id="quote2">Tutorialspoint CSS Quotes</q>.</q></p>
	 	<p><q id="quote1">Tutorialspoint CSS <q id="quote2">Quotes</q>.</q></p>
	 	<p>Tutorialspoint CSS <q id="quote3">Quotes</q>.</p>
	 	<p><q id="quote4">Tutorialspoint CSS Quotes</q>.</q></p>
	 	<p><q id="quote5">Tutorialspoint CSS<q id="quote5">Quotes</q>.</q></p>

	 	<h3>Using entity number:</h3>
	 	<p><q id="quote6">Tutorialspoint CSS Quotes.</q></p>
	 	<p><q id="quote6">Tutorialspoint CSS<q id="quote6">Quotes</q>.</q></p>
	 	<p><q id="quote7">Tutorialspoint CSS Quotes.</q></p>
	 	<p>Tutorialspoint CSS <q id="quote8">Quotes</q>.</p>
	 	<p><q id="quote9">Tutorialspoint CSS <q id="quote9">Quotes</q>.</q></p>
	 	<p><q id="quot10">Tutorialspoint CSS Quotes.</q></p>
</body>
</html>

CSS quotes - 初始值

Followig 示例演示了引号的用法：initials; property value。此值将默认值设置为引号。


<html>
<head>
<style>
	 	q {
	 	 	 quotes: initial;
	 	}
</style>
</head>
<body>
	 	<p><q>Tutorialspoint CSS Quotes.</q></p>
</body>
</html>

CSS quotes - 自动值

将 quotes 属性设置为值 auto，该值根据语言自动确定正确的引号 - 如以下示例所示：


<html>
<head>
<style>
	 	q {
	 	 	 quotes: auto;
	 	}
</style>
</head>
<body>
	 	<div lang="fr">
	 	 	 <q>Tutorialpoint est un site de cours d'anglais.</q>
	 	</div>
	 	<hr />
	 	<div lang="ru">
	 	 	 <q>Tutorialpoint — сайт курсов английского языка.</q>
	 	</div>
	 	<hr />
	 	<div lang="de">
	 	 	 <q>Tutorialpoint is een Engelse cursuswebsite</q>
	 	</div>
	 	<hr />
	 	<div lang="en">
	 	 	 <q>Tutorialpoint is an english course website.</q>
	 	</div>
</body>
</html>

CSS quotes - 使用：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">Tutorialspoint CSS <q lang="en">Quotes</q>.</q></p>
	 	<p>Tutorialspoint CSS <q lang="fr">Quotes</q>.</p>
</body>
</html>

打印本页