HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Шрифт:
Атрибут стиля line-height задает высоту строки текста:
line-height: normal|<расстояние>|inherit
Здесь можно задать абсолютную и относительную величину расстояния, указав соответствующую единицу измерения CSS (см. табл. 8.1). При ее отсутствии заданное нами значение сначала умножается на высоту текущего шрифта и затем используется. Таким образом, чтобы увеличить высоту строки вдвое по сравнению с обычной, мы можем написать:
P { line-height: 2 }
Значение normal этого атрибута возвращает управление высотой строки Web-обозревателю.
Атрибут стиля letter-spacing позволяет задать дополнительное
letter-spacing: normal|<расстояние>
Отметим, что это именно дополнительное расстояние; оно будет добавлено к изначальному, установленному самим Web-обозревателем.
Здесь также можно задать абсолютное и относительное расстояние, указав соответствующую единицу измерения CSS (см. табл. 8.1). Расстояние может быть положительным и отрицательным; в последнем случае символы шрифта будут располагаться друг к другу ближе обычного. Значение normal устанавливает дополнительное расстояние по умолчанию, равное нулю.
Атрибут стиля letter-spacing не поддерживает значение inherit.
Вот пример задания дополнительного расстояния между символами равного пяти пикселам:
H1 { letter-spacing: 5px }
Текст, набранный такими символами, будет выглядеть разреженным.
А здесь мы задали отрицательное дополнительное расстояние между символами равным двум пикселам:
H6 { letter-spacing: -2px }
Эти два пиксела будут вычтены из изначального расстояния, в результате символы сблизятся, а текст станет выглядеть сжатым. Возможно, символы даже налезут друг на друга.
Аналогичный атрибут стиля word-spacing задает дополнительное расстояние между отдельными словами текста:
word-spacing: normal|<расстояние>
Пример:
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-обозревателю выполнять разрыв текста на строки внутри слов в содержимом тегов (т. е. в абзацах).
Параметры вертикального выравнивания
Иногда возникает ситуация, когда нужно сместить фрагмент по вертикали относительно текста, который его окружает, т. е. задать вертикальное выравнивание текста.
Атрибут стиля vertical-align как раз задает вертикальное выравнивание текста:
vertical-align: baseline|sub|super|top|text-top|middle|bottom|
text-bottom|<промежуток между базовыми линиями>|inherit
Этот атрибут стиля принимает восемь предопределенных значений: