Как оформить изображение с помощью CSS
Как стилизовать изображение с помощью CSS. Используйте CSS, чтобы представить изображения вашего веб-сайта наилучшим образом. В этой статье вы узнаете, где разместить изображение и следует ли включать украшения, такие как рамки.
Плавающее и центрирующее
Шаг 1
Вставьте свое изображение на страницу обычным способом. Не забудьте включить подходящий замещающий текст для изображения.
Шаг 2
Чтобы текст обтекал изображение справа, как на фотографии, предваряющей эту статью, используйте следующее правило CSS:
img { поплавок:слева; отступы справа:1em;
Правило float:left заставляет изображение перемещаться к левому краю. Правило padding-right не позволяет тексту упираться в правую сторону изображения. Если к этому изображению добавить рамку, между изображением и рамкой появится отступ. См. Раздел 2 для работы с изображением с рамкой.
Шаг 3
Чтобы текст обтекал слева, разместите изображение на правом поле. Используйте такое правило:
img { поплавок:вправо; отступ слева:1em;
Шаг 4
Чтобы центрировать изображение, вы должны сначала преобразовать обычно встроенный элемент изображения в элемент блочного уровня.
img { дисплей:блок;
Шаг 5
Затем добавьте поля слева и справа от изображения, чтобы отцентрировать его. Правильным значением для левого и правого полей для центрирования чего-либо является auto.
img { дисплей:блок; поле справа:авто; поле слева:авто; 
Границы и поля
Шаг 1
Границы можно использовать для создания эффекта тени или внешнего вида рамки.
Чтобы создать толстую рамку с использованием стиля границы канавки, можно использовать следующее правило:
img { поплавок:слева; ширина границы:1em; бордюрный стиль:канавка; цвет границы:#000000;
Другие стили границы:сплошная, пунктирная, пунктирная, двойная, ребристая, вставка и начало. Ширина может быть выражена в пикселях, ems или процентах.
Шаг 2
Границы можно применять выборочно к верхней, правой, нижней и левой части изображения. Вы можете использовать эти знания для создания эффекта тени.
Шаг 3
Используя сплошную рамку двух оттенков серого только справа и снизу, вы получите эффект тени.
img { поплавок:слева; стиль границы справа:сплошной; цвет правой границы:#CCCCCC; нижняя граница:сплошная; нижний цвет границы:#999999;
Шаг 4
Маржа находится за границей. Добавление некоторого поля справа и внизу изображения предотвратит наезд текста на него.
img { поплавок:слева; стиль границы справа:сплошной; ширина границы справа:8px; цвет правой границы:#CCCCCC; нижняя граница:сплошная; ширина нижней границы:8px; нижний цвет границы:#999999; поле справа:1em; нижняя граница:1em; 
Совет
Если у вас есть изображения более чем в одном разделе (div) страницы, используйте селекторы потомков, чтобы стилизовать их по отдельности. Возможные селекторы:#content img, #sidebar img, #feature img.