Атрибут class тега <q>
Описание
Атрибут class для тега <q> позволяет назначать один или несколько CSS-классов для стилизации цитаты. Классы применяются ко всему содержимому внутри <q>, включая автоматически добавляемые браузером кавычки.
<q class="important-quote highlighted">
Это важная цитата, которая будет стилизована особым образом.
</q>
Основные возможности:
| Применение | Пример класса |
|---|---|
| Базовая стилизация | .quote { font-style: italic; } |
| Кастомные кавычки | .fancy-quotes { quotes: "“" "”" "‘" "’"; } |
| Цветовое выделение | .highlighted { background: #fff9c4; } |
Пример с CSS-стилизацией:
<style>
.important-quote {
color: #d32f2f;
font-weight: bold;
quotes: "«" "»";
}
.important-quote::before,
.important-quote::after {
color: #d32f2f;
font-size: 1.2em;
}
</style>
<q class="important-quote">Очень важная цитата</q>
Рекомендации:
- Используйте семантичные имена классов (например, "blockquote" или "testimonial")
- Для кастомных кавычек используйте CSS-свойство
quotes - Избегайте избыточного количества классов (максимум 2-3 на элемент)
- Сочетайте с псевдоэлементами ::before и ::after для стилизации кавычек
Пример с разными языками:
<style>
.french-quote { quotes: "«" "»"; }
.german-quote { quotes: "„" "“"; }
</style>
<q class="french-quote">Citation en français</q>
<q class="german-quote">Zitat auf Deutsch</q>
Особенности работы:
- Стили применяются ко всему элементу, включая кавычки
- Кавычки можно отдельно стилизовать через ::before и ::after
- Поддерживает наследование CSS-свойств
Примечание: Хотя тег <q> автоматически добавляет кавычки, для сложных дизайнерских решений рассмотрите использование ::before и ::after с полным контролем над отображением кавычек.