CSS | 报价属性

简介

CSS 报价属性（Quote Properties）可以用于设置文本块引用的样式，如单双引号的形状、颜色等。

在 HTML 中，使用 <blockquote> 或 <q> 标签可以表示文本块引用。CSS 报价属性可以应用于这些标签上。

语法

CSS 报价属性包括以下四个属性：quotes、content、counter-reset 和 counter-increment。

quotes 属性

quotes 属性用于设置文本块引用中的单双引号的形状和排列方式，它的值可以是以下两个类型之一：

• 字符串列表：每个字符串表示一个单双引号的形状，包含两个字符，分别表示单引号和双引号的形状。例如，quotes: '“”' '‘’'; 表明双引号用成对的“ ”表示，单引号用成对的‘ ’表示。
• none：表示不使用任何单双引号。

content 属性

content 属性用于插入一些内容到引用块的前面或后面。常见的使用方式是插入引用的来源和作者等信息。它的值可以是以下两个类型之一：

• 字符串：插入一个字符串。
• attr() 函数：插入一个 HTML 属性的值。例如，content: attr(title); 表示插入引用块的 title 属性值。

counter-reset 属性

counter-reset 属性用于重置 CSS 计数器的值。它的值可以是以下两个类型之一：

• 字符串列表：每个字符串表示一个 CSS 计数器的名称。例如，counter-reset: chapter section; 表示重置 chapter 和 section 计数器的值为 0。
• none：表示不重置任何计数器。

counter-increment 属性

counter-increment 属性用于增加 CSS 计数器的值。它的值可以是以下两个类型之一：

• 字符串列表：每个字符串表示一个 CSS 计数器的名称，后跟一个数字。例如，counter-increment: chapter section 2; 表示增加 chapter 和 section 计数器的值分别为 1 和 2。
• none：表示不增加任何计数器。

示例

以下是一个示例，展示如何使用 CSS 报价属性：

/* 自定义单双引号形状 */
blockquote {
    quotes: '“' '”' '‘' '’';
}

/* 插入来源信息 */
blockquote:before {
    content: '—— 出自《CSS揭秘》';
}

/* 重置计数器，增加章节号 */
body {
    counter-reset: chapter;
}

h1:before {
    content: 'Chapter ' counter(chapter) '. ';
    counter-increment: chapter;
}

以上示例自定义单双引号形状、插入了来源信息、重置了计数器，并给章节号增加了前缀“Chapter ”。