Атрибут class тега <figcaption>
Описание
Атрибут class в теге <figcaption> позволяет назначать CSS-классы для стилизации подписи к изображению или другому медиа-контенту. Классы используются для единообразного оформления подписей и управления их отображением.
<figure>
<img src="landscape.jpg" alt="Пейзаж">
<figcaption class="image-caption highlight">
Рисунок 1. Горный пейзаж в Альпах
</figcaption>
</figure>
Типичные сценарии применения:
| Применение | Пример класса | Назначение |
|---|---|---|
| Базовое оформление | .image-caption |
Стандартные стили для всех подписей |
| Особые варианты | .highlight |
Акцентирование важных подписей |
| Типографика | .small-text |
Контроль размера и вида текста |
Пример комплексной стилизации:
<style>
.image-caption {
font-style: italic;
text-align: center;
padding: 8px 0;
color: #555;
}
.highlight {
background-color: #fffde7;
border-left: 3px solid #ffd600;
padding-left: 10px;
}
.small-text {
font-size: 0.9em;
}
</style>
<figure>
<img src="chart.png" alt="График">
<figcaption class="image-caption highlight small-text">
Рисунок 2. Ежеквартальный рост продаж
</figcaption>
</figure>
Рекомендации по именованию классов:
- Используйте семантические имена (не presentation-ориентированные)
- Придерживайтесь методологии именования (BEM, SMACSS)
- Для модификаторов используйте префиксы (--modifier)
- Избегайте слишком общих имен (например, "text")
Особенности работы:
- Можно указывать несколько классов через пробел
- Наследует свойства от родительских элементов
- Работает со всеми современными браузерами
- Может комбинироваться с атрибутом id
Ограничения:
- Специфичность классов может конфликтовать с другими стилями
- Избыточное количество классов усложняет поддержку
- Не заменяет семантическую разметку
Примечание: Атрибут class является основным инструментом для стилизации подписей в современной веб-разработке. Для сложных галерей рекомендуется создавать систему классов, отражающую тип и назначение подписей.