Каскадные таблицы стилей CSS советы & приёмы
Масштабированная модель Эйфелевой башни в Парке Мини-Франция
В HTML5 включен новый элемент для вставки иллюстрации с подписью. (Мы покажем, как сделать тоже самое в HTML4 ниже.)
Например, чтобы сместить изображение вправо на расстояние, равное 30% от ширины окружающих абзацев, используйте следующие правила:
На самом деле, действительно необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.
Масштабирование изображения
Здесь только одна проблема, и она заключается в том, что изображение может быть слишком широким. В этом случае, ширина изображения всегда будет составлять 136 px и иллюстрация будет занимать 30% от окружающего текста. И если вы сузите окно, то изображение может не поместиться и вылезти за рамку (попробуйте!).
Если вы знаете ширину всех изображений в документе, вы можете указать минимальную ширину иллюстрации следующим образом:
Сен-Тропе и его форт в вечернем солнце
Другой способ — это задать масштаб самого изображения. Именно это мы и сделали с изображением справа. Как вы, возможно, видете, если вы сделаете окно браузера слишком широким, изображения в формате JPEG масштабируются не очень хорошо. Но если это изображение — диаграмма или график в формате SVG, то масштабирование работает просто великолепно. Вот разметка, которую мы использовали:
А вот таблица стилей:
И в дополнение последнее правило: этот приём делает изображение настолько широким, насколько позволяет пространство внутри иллюстрации (область внутри рамок и отступов — border и padding).
Размещение подписи сверху
Средиземное море около Кап Ферра
HTML позволяет элементу figcaption быть либо первым, либо последним элементом внутри иллюстрации. Если не применять каких-либо правил CSS, это приведёт к тому, что подпись будет размещена либо над иллюстрацией, либо под ней соответственно.
Однако, независимо от разметки текста, вы можете указать в CSS, чтобы подпись появилась либо над изображением, либо под ним. Этого можно достичь, указав браузеру, что изображение должно быть отформатировано как таблица, в которой картинка является единственной ячейкой, а подпись становится заголовком таблицы. Просто добавьте эти правила в таблицу стилей из предыдущей секции:
Стиль, который мы использовали на этой странице, содержит рамку серого цвета. Она обрамляет иллюстрацию. К сожалению, когда мы используем табличную разметку, чтобы поместить подпись сверху или снизу, мы должны указать рамку другим способом, потому что подпись размещена за пределами границы таблицы. Мы можем исправить это, поместив часть границы на саму подпись:
Иллюстрации & подписи в HTML4
Масштабированная модель Эйфелевой башни в Парке Мини-Франция
HTML4, в отличие от HTML5, не имеет элементов, которые бы позволили вставить в документ изображение с подписью. Это предлагалось сделать (см HTML3), но в итоге в HTML4 предложение не вошло. Вот единственная возможность воспроизвести элемент figure:
Затем в таблице стилей вы используете класс «figure» для форматирования иллюстрации так, как вам необходимо. Например, чтобы сместить иллюстрацию вправо на расстояние, равное 30% от ширины окружающих абзацев, необходимо применить следующие правила:
Как и ранее, необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.
Масштабирование изображения в HTML4
Чтобы избежать выхода изображения за рамки иллюстрации и при условии, что вы знаете ширину всех изображений в документе, вы можете добавить минимальную ширину DIV следующим образом:
Сен-Тропе и его форт в вечернем солнце
Чтобы смасштабировать изображение на всю ширину иллюстрации (как мы сделали с изображением справа), вы можете добавить атрибут КЛАССА и соответствующее правило CSS, очень похожее на пример с HTML5 выше. Вот разметка, которую мы использовали:
А вот таблица стилей:
Одно дополнение: этот приём делает изображение настолько широким, насколько позволяет DIV (площадь внутри border и padding).
Размещение описания сверху в HTML4
Средиземное море около Кап Ферра
Чтобы разместить подпись сверху, добавьте эти правила в таблицу стилей из предыдущих секций:
‘+’ приводит к тому, что правило действует на элемент P, который следует за другим P. Что означает, что условие действует на второй элемент P иллюстрации, который содержит описание картинки.
(Эта техника может привести к ошибкам в некоторых браузерах, разработанных ранее 2003, особенно в комбинации с масштабированием изображений, как в примере выше)
Как и прежде, серая рамка, которую мы выбрали для обрамления иллюстраций на этой странице, будет обрамлять только само изображение. Чтобы рамка была вокруг изображения и подписи, добавьте эти правила:
Навигация по сайту
Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy
Как правильно реализовать текст под картинкой (html)?
Привет, я не знаю, как правильно реализовать текст под изображением в html .
Я еще новичок в html, буду очень признателен, если есть желание, то код напишите правильно. Ссылка на мой проект:
- Вопрос задан более года назад
- 1850 просмотров
Простой 4 комментария
- Вконтакте
Уберите жирный текст.
Вставьте картинки как следует, чтобы их видно было сразу (при условии, что на картинках не код)
Вставьте код как следует.
Это значительно повысит ваши шансы на адекватный ответ.
Мне вот вообще лень ходить по вашим ссылкам (уверен, не только мне)
- Вконтакте
Если изображение контентное, что для подписи к нему есть пара специальных тегов figure и figcaption .
Там ничего не нужно изобретать, картинка и подпись сами встанут друг под другом.
(Если наоборот, картинка дополняет текст, например, изображение товара в инет магазине, то разметка будет другой. Название товара будет заголовком, дальше текст и т.д.)
Если картинка это украшение (иконка), то таких изображений не должно быть в разметке.
Они вставляются как фоны или псевдоэлементы через стили.
Как сделать в HTML подпись под картинкой?
От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.
Самый примитивный вариант
Сразу после изображения поставьте тег br и напишите нужный текст. Конечно, он не будет располагается по центру, но зато будет под картинкой, так что его уже можно назвать подписью. Вариант не годится для тех случаев, когда фото располагается в строке не в самом начале, потому что в таком случае по напечатанному тексту непонятно будет, к чему он вообще относится.
Тег br ставить необязательно, можно просто заключить подпись в тег абзаца, тогда текст сам перенесется на следующую строку, так как абзац – блочный элемент.
Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.
Соединение изображения и подписи в блок
Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Как сделать подпись под картинкой в HTML5
Всем привет!
В сегодняшней статье я расскажу, как сделать подпись под картинкой в HTML5.
Что такое подпись под картинкой и как же она выгладит?
Это обычная картинка, под которой внизу размещается краткий текст с описанием:
Чтобы создать такую подпись под картинкой, в HTML5 придумали специальные теги:
- тег « figure » создан для группировки HTML изображений и подписей под ними;
- тег « figcaption » создан для подписи под изображением.
Синтаксис:
Внешний вид, конечно, можно подправить, если использовать таблицу стилей CSS.
Добавьте вот такой стиль CSS:
В результате получится вот такое:
Так что, для подписи под картинкой не ограничивайте себя только HTML5, для улучшения вида пользуйтесь и CSS-ом.
Удачи!
Подписывайтесь на обновление блога! Вас ждет много интересных статьей.