Атрибут class тега <figure>
Описание
Атрибут class в теге <figure> позволяет назначать CSS-классы для стилизации контейнера с изображением и подписью. Это основной способ управления внешним видом графических элементов на странице.
<figure class="image-container framed">
<img src="photo.jpg" alt="Пейзаж">
<figcaption>Фото 1. Горный пейзаж в Альпах</figcaption>
</figure>
Типичные применения:
| Тип стилизации | Пример класса | Эффект |
|---|---|---|
| Оформление контейнера | .framed { border: 2px solid #eee; } |
Рамка вокруг изображения |
| Позиционирование | .float-right { float: right; } |
Обтекание текстом справа |
| Адаптивный дизайн | .responsive-img { max-width: 100%; } |
Гибкие размеры изображения |
Пример комплексной стилизации:
<style>
.figure-card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 15px;
margin: 20px auto;
max-width: 600px;
}
.figure-card img {
width: 100%;
height: auto;
}
.figure-card figcaption {
font-style: italic;
text-align: center;
padding-top: 10px;
}
</style>
<figure class="figure-card">
<img src="infographic.png" alt="Инфографика">
<figcaption>Инфографика 1. Основные показатели</figcaption>
</figure>
Рекомендации по именованию:
- Используйте семантические имена (.chart-container, .product-gallery)
- Придерживайтесь методологии (БЭМ, SMACSS)
- Разделяйте стили контейнера и содержимого
- Избегайте избыточного количества классов
Особенности работы:
- Можно применять несколько классов через пробел
- Стили наследуются для вложенных элементов
- Работает со всеми современными браузерами
- Может комбинироваться с другими атрибутами
Ограничения:
- Специфичность классов может вызывать конфликты
- Избыточное количество классов усложняет поддержку
- Не заменяет семантическую разметку
Примечание: Для сложных галерей рекомендуется создавать систему классов, отражающую тип и назначение изображений. Это обеспечит единообразие стилей и упростит поддержку кода.