HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

H1 { word-spacing: 5mm }

Ну, 5 мм, пожалуй, многовато… Хотя это всего лишь пример.

И напоследок рассмотрим атрибут стиля font, позволяющий задать одновременно сразу несколько параметров шрифта:

font: [<начертание>] [<вид строчных букв>] [<'жирность'>] [<размер> [/<высота строки текста>]] <имя шрифта>

Как видим, обязательным является только имя шрифта — остальные параметры могут отсутствовать.

Задаем для текста абзацев шрифт Times New Roman размером 10 пунктов:

P { font: 10pt 'Times New Roman' }

А для заголовков шестого уровня — шрифт Arial размером 12 пунктов и курсивного начертания:

H6 { font: italic 12pt Verdana }

Параметры, управляющие разрывом строк

По умолчанию Web-обозреватель разбивает текст на строки так, чтобы вместить его в окно и избежать горизонтальной прокрутки. Далеко не всегда при этом он разрывает строки, как нам нужно. Конечно, мы можем установить фиксированное форматирование текста (см. главу 2) и принудительно указать, где следует переносить строки, но не всегда это лучший подход.

CSS предлагает два атрибута стиля, позволяющие нам указать, как Web-обозревателю следует разбивать текст на строки. Сейчас мы их рассмотрим.

Атрибут стиля white-space задает правила, которыми Web-обозреватель руководствуется при выводе текста. В частности, с его помощью мы можем изменить правила, установленные по умолчанию и рассмотренные нами в главе 2. Формат записи этого атрибута стиля:

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit

Атрибут стиля white-space может иметь пять значений.

— normal — последовательности пробелов преобразуются в один пробел, переводы строк также преобразуются в пробелы. Web-обозреватель сам разрывает текст на строки, чтобы вместить его в свое окно по ширине. Фактически это значение предписывает Web-обозревателю применять для вывода текста блочных элементов правила по умолчанию, описанные в главе 2.

— pre — последовательности пробелов и переводы строк сохраняются; текст выводится точно в таком виде, в каком он записан в HTML-коде. Web- обозреватель сам не разрывает текст на строки. Фактически текст выводится так, словно он помещен в тег <PRE> (текст фиксированного форматирования).

— nowrap — последовательности пробелов преобразуются в один пробел, переводы строк также преобразуются в пробелы. Однако Web-обозреватель сам не разрывает текст на строки.

— pre-wrap — последовательности пробелов и переводы строк сохраняются. Web- обозреватель может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.

— pre-line — последовательности пробелов преобразуются в один пробел, переводы строк сохраняются. Web-обозреватель может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.

Чтобы читателям было проще выбрать нужное значение атрибута стиля white-space, автор свел все доступные для него значения в табл. 8.2.

Таблица 8.2. Значения атрибута стиля white- space и результаты их применения

Вот стиль, переопределяющий тег <PRE> так, чтобы при необходимости его содержимое разрывалось на строки:

PRE { white-space: pre-wrap }

Атрибут стиля word-wrap применяется нечасто, но в некоторых случаях без него не обойтись. Он позволяет указать места, в которых Web-обозреватель может выполнить разрыв текста:

word-wrap: normal|break-word|inherit

Здесь доступны два значения.

— normal — указывает Web-обозревателю, что он может разрывать текст на строки только по пробелам. Это обычное поведение Web-обозревателя.

— break-word — разрешает Web-обозревателю выполнять разрыв текста на строки внутри слов. Это может пригодиться, если текст содержит много очень длинных слов, которые по ширине не помещаются в родительский элемент.

Пример:

P (word-wrap: break-word }

Здесь мы разрешили Web-обозревателю выполнять разрыв текста на строки внутри слов в содержимом тегов <P> (т. е. в абзацах).

Параметры вертикального выравнивания

Иногда возникает ситуация, когда нужно сместить фрагмент по вертикали относительно текста, который его окружает, т. е. задать вертикальное выравнивание текста.

Атрибут стиля 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> задает для текста расположение, совпадающее с