Атрибут style тега <figcaption>
Описание
Атрибут style в теге <figcaption> позволяет задавать inline-стили CSS непосредственно для подписи к изображению или медиа-контенту. Эти стили применяются только к текущему элементу и имеют наивысший приоритет (кроме !important).
<figure>
<img src="chart.png" alt="График продаж">
<figcaption style="font-style: italic; color: #666; text-align: center; padding-top: 8px;">
Рисунок 1. Динамика продаж по кварталам
</figcaption>
</figure>
Часто используемые свойства:
| Категория | CSS-свойства | Пример |
|---|---|---|
| Текст | font-family, font-size, color | style="font-family: Arial; color: #333;" |
| Позиционирование | text-align, margin, padding | style="text-align: right; margin-top: 10px;" |
| Оформление | background, border, border-radius | style="background: #f9f9f9; border-left: 3px solid blue;" |
Пример с динамическим стилем:
<figure>
<img src="warning.png" alt="Предупреждение">
<figcaption id="alert-caption" style="color: #d32f2f; transition: color 0.3s;">
Внимание: данные требуют проверки
</figcaption>
</figure>
<button onclick="highlightCaption()">Подсветить</button>
<script>
function highlightCaption() {
const caption = document.getElementById('alert-caption');
caption.style.backgroundColor = '#fffde7';
caption.style.fontWeight = 'bold';
}
</script>
Рекомендации по использованию:
- Используйте для разовых стилевых правок
- Избегайте !important в inline-стилях
- Для сложных стилей используйте внешние CSS-файлы
- Сочетайте с классами для базового оформления
- Минимизируйте использование для улучшения производительности
Ограничения:
- Усложняет поддержку кода
- Не поддерживает медиа-запросы
- Ограниченная поддержка CSS-переменных
- Повторяющиеся стили увеличивают размер страницы
Примечание: Хотя inline-стили обеспечивают быстрый способ применения CSS, для поддержания чистоты кода рекомендуется использовать их только для динамических стилей, генерируемых JavaScript. Основное оформление лучше выносить во внешние таблицы стилей.