Дронов Владимир
Шрифт:
word-wrap: normal|break-word|inherit
Здесь доступны два значения.
— normal — указывает Web-обозревателю, что он может разрывать текст на строки только по пробелам. Это обычное поведение Web-обозревателя.
— break-word — разрешает Web-обозревателю выполнять разрыв текста на строки внутри слов. Это может пригодиться, если текст содержит много очень длинных слов, которые по ширине не помещаются в родительский элемент.
Пример:
P (word-wrap: break-word }
Здесь мы разрешили Web-обозревателю выполнять разрыв текста на строки внутри слов в содержимом тегов (т. е. в абзацах).
Параметры вертикального выравнивания
Иногда возникает ситуация, когда нужно сместить фрагмент по вертикали относительно текста, который его окружает, т. е. задать вертикальное выравнивание текста.
Атрибут стиля vertical-align как раз задает вертикальное выравнивание текста:
vertical-align: baseline|sub|super|top|text-top|middle|bottom|
text-bottom|<промежуток между базовыми линиями>|inherit
Этот атрибут стиля принимает восемь предопределенных значений:
baseline — задает выравнивание базовой линии фрагмента текста по базовой линии текста родительского элемента (это поведение по умолчанию). Базовой называется воображаемая линия, на которой располагается текст.
— sub — выравнивает базовую линию фрагмента текста по базовой линии нижнего индекса родительского элемента.
— super — выравнивает базовую линию фрагмента текста по базовой линии верхнего индекса родительского элемента.
— top — выравнивает верхний край фрагмента текста по верхнему краю родительского элемента.
— text-top — выравнивает верхний край фрагмента текста по верхнему краю текста родительского элемента.
— middle — выравнивает центр фрагмента текста по центру родительского элемента.
— bottom — выравнивает нижний край фрагмента текста по нижнему краю родительского элемента.
— text-bottom — выравнивает нижний край фрагмента текста по нижнему краю текста родительского элемента.
Кроме того, мы можем указать для данного атрибута стиля абсолютное или относительное значение, задающее, насколько выше или ниже базовой линии текста родительского элемента должна находиться базовая линия фрагмента текста:
STRONG { vertical-align: super; font-size: smaller }
Этот стиль переопределения тега <STRONG> задает для текста расположение, совпадающее с базовой линией верхнего индекса, и уменьшенный размер шрифта. Фактически с помощью этого стиля мы превращаем содержимое тега в верхний индекс
<STRONG>.
Тот же атрибут стиля пригоден для выравнивания графических изображений, являющихся частью абзаца:
Это картинка: <IMG STYLE="vertical-align: text-bottom" SRC="picture.png">.
Данный HTML-код создает абзац с графическим изображением. Низ этого изображения будет выровнен по нижнему краю текста абзаца. Иными словами, изображение будет как бы возвышаться над текстом.
Скорее всего, для достижения нужного результата придется поэкспериментировать с различными значениями атрибута стиля vertical-align. Очень уж много у него возможных значений, и слишком разный они дают результат в различных случаях. Но ведь Web-дизайнеру не привыкать к экспериментам!..
Параметры тени у текста
Любителям все украшать стандарт CSS 3 предлагает одну очень интересную возможность — создание тени у текста. При умеренном употреблении она может заметно оживить Web-страницу.
Параметры тени задает атрибут стиля text-shadow:
text-shadow: none | <цвет> <горизонтальное смещение><вертикальное смещение> [<радиус размытия>]
Значение none (установленное по умолчанию) убирает тень у текста.
Цвет тени задается в виде RGB-кода или именованного значения.
Горизонтальное смещение тени задается в любой единице измерения, поддерживаемой CSS (см. табл. 8.1). Если задано положительное смещение, тень будет расположена правее текста, если отрицательное — левее. Можно также задать и нулевое смещение; тогда тень будет располагаться прямо под текстом. Нулевое смещение имеет смысл только в том случае, если для тени задано размытие.
Вертикальное смещение тени также задается в любой единице измерения, поддерживаемой CSS. Если задано положительное смещение, тень будет расположена ниже текста, если отрицательное — выше. Можно также задать и нулевое смещение; тогда тень будет располагаться прямо под текстом.