Атрибут class тега <blockquote>
Описание
Атрибут class для тега <blockquote> позволяет назначать CSS-классы для стилизации цитат. Это стандартная практика, которая:
- Позволяет единообразно оформлять цитаты на сайте
- Дает контроль над отступами, шрифтами и границами
- Обеспечивает адаптивность для разных устройств
Пример использования:
<blockquote class="important-quote" cite="https://example.com">
<p>Это важная цитата, которая требует особого оформления</p>
<footer>— Автор, <cite>Источник</cite></footer>
</blockquote>
Пример стилизации:
/* Базовые стили для цитат */
.blockquote {
margin: 1.5em 0;
padding: 1em 1.5em;
border-left: 4px solid #2a5db0;
background-color: #f8f9fa;
font-style: italic;
}
/* Стиль для важных цитат */
.important-quote {
border-left-color: #d63384;
background-color: #fff0f6;
font-weight: 500;
}
/* Адаптивные отступы */
@media (max-width: 768px) {
.blockquote {
padding: 0.8em 1em;
margin: 1em 0;
}
}
Типичные классы для цитат:
| Класс | Назначение |
|---|---|
blockquote |
Базовые стили для всех цитат |
pull-quote |
Выделенные цитаты в тексте |
testimonial |
Стили для отзывов |
epigraph |
Эпиграфы в начале разделов |
JavaScript-взаимодействие:
// Добавление класса при клике
document.querySelectorAll('blockquote').forEach(quote => {
quote.addEventListener('click', function() {
this.classList.toggle('highlighted-quote');
});
});
Совет: Используйте семантические имена классов, которые описывают назначение цитаты, а не ее внешний вид (например, testimonial вместо blue-border).
Лучшие практики:
- Сохраняйте стандартные отступы для цитат
- Используйте курсив только для коротких цитат
- Добавляйте четкие границы или фон для визуального выделения
- Тестируйте читаемость на разных устройствах