для посетителя ничем не лучше страницы, содержащей только текст. Поэтому при создании Web-сайта большая часть работы по расположению элементов на странице будет связна с организацией обтекания текста вокруг изображений. В
прошлом дизайнеры имели в своем распоряжении только атрибут align, кото — рый при использовании его с дескриптором заставлял Web-браузер обте- кать изображение текстом слева или справа. Теперь появилось свойство floa t каскадных списков стилей, которое позволяет задавать обтекание текстом не только изображений, но, как показано на рис. 4.19, и других элементов Web-страницы.
ПРАКТИКУМ
При применении свойства floa t каскадных списков стилей к элементу вы изы —
маете элемент из нормального потока и делаете из него «плавающий» элемент, который будет находиться слева или справа от элемента, следующего за ним. Предположим, например, что HTML-код Web-страницы содержит дескриптор
, за которым следует текст абзаца. В «нормальном» режиме Web-браузер по — местит на страницу изображение, а затем перед выводом на экран текста перей — дет на следующую строку. Чтобы изображение «плавало» слева от текста абзаца (как показано на рис. 4.19) задайте в дескрипторе свойство float, как по — казано в следующем примере:
216 Глава 4. Каскадные списки стилей
Аналогично, чтобы текст абзаца находился слева от изображения, укажите
Web-браузеру, что изображение должно «плавать» справа от следующего элемента
Как уже упоминалось, атрибут floa t можно использовать с любым элементом Web-страницы, а не только с изображениями. Например, для изменения стиля заголовка 6, чтобы он находился слева от текста абзаца (как показано на рис.
4.19) вставьте в список стилей страницы следующее правило:
h6 {float:left}
Фактически плавающим можно сделать любой контейнер и объект, помещенный
в контейнер. Предположим, например, что необходимо создать начальную заглав — ную букву, скажем, ш, с которой начинается последний абзац на странице, показан — ной на рис. 4.19. Для этого создадим следующий класс каскадного списка стилей: