Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Элементы figure и fig caption

.

Освежим знания, вытащим на свет Божий и стряхнем пыль. Что можно сделать с рисунками, имея в распоряжении НТМЕ5-элементы figure и figcaption? Вспомните, как вставлять изображения на страницу:

Здесь у нас есть контейнер (div. galeryphoto), который включает в себя изображение img и абзац р, представляющий собой подпись к рисунку. Если помните, я упоминал элемент capti on, который используется для подписей таблиц, но почему-то аналогичные элементы для подписей к фотографиям, иллюстрациям или диаграммам раньше отсутствовали.

Итак, теперь все меняется! Элементы figure и fi gcapti on — парочка, которая отлично работает в подобных структурах вместо общего элемента div (с атрибутом class со значением galleryphoto в нашем примере). Мы можем заменить его на figure, а абзац — на элемент figcaption. Вот что получится:

Придется также внести некоторые изменения в CSS-код, чтобы обновленная разметка верно отображалась на странице. Ссылка в CSS на класс gall eryphoto и абзац с подписью изменится с такого вида:

После внесения этих изменений галерея выглядит почти как раньше (рис. 9.7).

Рис. 9.7. Галерея изображений, построенная с использованием элементов figure и figcaption

Только одно изменение появилось после замещения абзаца р на подпись рисунка figcaption: цвет текста подписи изменился с синего на черный, так как больше не действует правило:

Р {

font-size: small: color: navy:

}

Сейчас можно изменить черный цвет на синий, добавив объявление цвета в правило для figcaption, но лично я предпочитаю, чтобы подписи отличались по цвету от других текстов. В любом случае веб-разработчик всегда может изменить это на свой вкус.

.

Читайте так же:
Not found