- Обтікання картинки текстом за допомогою HTML
- Обтікання картинки текстом за допомогою властивостей CSS
Як зробити обтікання картинки текстом в HTML і CSS - 4.4 out of 5 based on 19 votes
Сьогодні зображення використовуються в інтернеті практично повсюдно. Неможливо собі уявити веб сторінку на якій немає зображення. Картинки привертають увагу, покращують зовнішній вигляд і сприйняття тексту. Тому в даному уроці ми навчимося позиціонувати зображення по відношенню до тексту і розглянемо як зробити обтікання картинки текстом в HTML, а так само за допомогою CSS властивостей і значень.
Обтікання картинки текстом за допомогою HTML
Найбільш простий, спосіб позиціонування картинки на сторінці це скористатися засобами HTML. Але у даного способу, в порівнянні з можливостями CSS є недолік, в ньому немає можливості встановити відступ між картинкою і текстом, а лише можна зробити так, щоб текст обтікав зображення.
Розглянемо все по порядку. Для вставки картинки в HTML сторінку використовується тег img, докладніше дивіться урок, як вставляти картинки в HTML: http://webmastermix.ru/lessons-html/14-how-inser-a-picture-in-html.html . Тому, щоб вставити картинку в текст HTML сторінки, досить в коді прописати наступне:
- де foto.jpg - це відносний шлях до картинки. Можна задати і абсолютний шлях, тоді потрібно прописати URL виду: http://webmastermix.ru/foto.jpg
У тега img є атрибут align, який і визначає з якого краю буде розташована картинка і з якого краю її буде обтікати текст (наприклад align = "left" по лівому краю). Атрибут align має наступні значення:
- left - зображення буде розташовано по лівому краю, а текст буде обтікати його справа;
- right - зображення розташується справа, а текст буде обтікати його зліва;
- bottom - відповідає за вертикальне вирівнювання, при цьому картинка буде знаходиться зліва, а нижня частина зображення на проти першого рядка тексту, це значення задано за замовчуванням;
- top - теж, що і попереднє значення, тільки рядок тексту буде розташовуватися по верхній межі зображення;
- middle - при даному значенні відбувається вирівнювання середини зображення по базовій лінії рядка.
Тепер розглянемо кожен елемент на практиці.
1. Як я вже згадував, за замовчуванням зображенні задано значення bootom, т. Е. Не залежно від того, пропишемо ми його чи ні наша картинка по відношенню до тексту буде позиціонуватися так:
2. Щоб вирівняти зображення по лівому краю, а текст його обтікав справа потрібно прописати наступне:
<Img src = "foto.jpg" align = "left">
приклад:
3. Для вирівнювання зображення по правому краю потрібно відповідно прописати:
<Img src = "foto.jpg" align = "right">
приклад:
4. Тепер розглянемо вертикальне вирівнювання. Якщо застосувати значення top, то перший рядок тексту буде розташована на проти верхньої межі зображення.
<Img src = "foto.jpg" align = "top">
приклад:
5. Вирівнювання тексту по центру картинки. Даний прийом дуже добре застосовувати якщо вам потрібно невелику картинку розташувати по центру рядка.
<Img src = "foto.jpg" align = "middle">
приклад:
Обтікання картинки текстом за допомогою властивостей CSS
Як ви могли помітити на вищенаведених прикладах наша картинка і текст не зовсім красиво розташовуються по відношенню один до одного. Розташувати їх красиво на допоможуть CSS стилі, які можна додати до зображення задавши їй певний клас і застосувавши необхідні якості. Якщо ви не знаєте, що таке CSS дивіться урок Основи CSS і важливі поняття: http://webmastermix.ru/lessons-css/17-bases-css.html .
Насправді, ті приклади створює обтікання тексту і позиціонування картинки, які ми розглянули вище є трохи застарілими, зараз прийнято все елементи відповідають за зовнішній вигляд сторінки робити за допомогою властивостей і значень CSS.
Розберемо простий приклад, як зробити обтікання картинки текстом, коли картинка розташована по лівому краю, а текст обтікає її справа. При цьому між текстом і картинкою задамо певні відступи.
На початку потрібно присвоїти нашій картинці певний клас, тут можете використовувати будь-яке слово головне щоб патом ви зрозуміли за, що саме цей клас відповідає, в дизайні вашої сторінки. Робиться це так:
<Img src = "foto.jpg" class = "leftfoto">
Тепер класу leftfoto потрібно присвоїти певні CSS стилі.
.leftfoto {float: left; margin: 4px 10px 2px 0px; }
Даний код розташовують між тегами <head> ... </ head>, уклавши в теги <style> ... </ style> або поміщають у зовнішній файл стилів CSS.
Розберемо ті елементи, які ми тут поставили:
- float: left; - ми позиціонували картинку по лівому краю і змусили обтікати текст навколо картинки праворуч, це по суті те ж саме, що і атрибут align = "left".
- margin: 4px 10px 2px 0px; - ми задали зовнішні відступи, 4px - від верху, 10px - справа, 2px знизу і 0px зліва від зображення.
приклад:
Додавши до даних стилям рамку і внутрішній відступ можна надати зображенню якийсь ефект фотографії з білими краями:
.leftfoto {float: left; margin: 4px 10px 2px 0px; border: 1px solid #CCC; padding: 6px; }
Тут ми додали наступні елементи:
- border: 1px solid #CCC; - задали суцільну лінію розміром 1 піксель і світло сірим кольором;
- padding: 6px; - задали внутрішній відступ між зображенням і рамкою, рівний 6 пикселям.
приклад:
Матеріал підготовлений проектом: WebMasterMix.ru
Пропонуємо Вам ознайомитися:
подробиці
Оновлено: 14 Грудень 2013
Створено: 14 Грудень 2013
Переглядів: 148 946