Глава 2.9. Текст

В этой главе приведено описание свойств, определяющих различные параметры отображения текста.

2.9.1. Красная строка: свойство text-indent

Синтаксис:  text-indent: <размер> | <процент> | inherit
Начально:   0
Применимо:  к блочным элементам
Наследуемо: да
Проценты:   относительно ширины вмещающего блока
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Соответствует стандарту (4.0+)

Свойство text-indent задает отступ первой строки при отображении блочных элементов. Отступ может быть отрицательным и задается одним из следующих способов:

  <размер>
    Задает фиксированный размер.
  <процент>
    Вычисляется относительно ширины вмещающего блока.

Пример: следующее правило указывает, что абзацы должны начинаться с красной строки, равной 3em:

P { text-indent: 3em }

2.9.2. Выравнивание текста: свойство text-align

Синтаксис:  text-align: left | right | center | justify | <строка> | inherit
Начально:   зависит от обозревателя и направления вывода текста
Применимо:  к блочным элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Поддерживаются только left, right, center и justify (4.0+)
            Netscape Navigator Поддерживаются только left, right и center (4.0+)

Свойство text-align задает выравнивание текста при отображении блочных элементов. Оно может принимать следующие значения:

left Выравнивание по левому краю.
right Выравнивание по правому краю.
center Выравнивание по центру.
justify Выравнивание по левому краю с выключкой по правому краю.
<строка> Задает строку, по которой будут выравниваться ячейки в столбце таблицы. Это значение применимо только к ячейкам таблицы. Для остальных элементов должно трактоваться как left или right в зависимости от значения свойства direction (ltr или rtl соответственно).

Пример: следующее правило указывает, что все элементы, содержашиеся в элементе DIV с атрибутом class="center", должны выравниваться по центру окна обозревателя (это обеспечивается тем, что данное свойство является наследуемым):

DIV.center { text-align: center }

2.9.3. Украшение текста: свойство text-decoration

Синтаксис:  text-decoration: none | [underline || overline || line-through || blink] | inherit
Начально:   none
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту; blink не поддерживается (4.0+)
            Netscape Navigator Соответствует стандарту; overline не поддерживается (4.0+)

Свойство text-decoration задает украшение текста при отображении элементов. Оно может принимать следующие значения:

none Обычный текст. пример
underline Подчеркнутый текст. пример
overline Надчеркнутый текст. пример
line-through Перечеркнутый текст. пример
blink Мигающий текст. пример

Это свойство не наследуемо, но все потомки блочного элемента будут иметь его украшения текста. Цвет этих украшений будет тем же, что у блочного элемента, даже если потомки имеют другое значение свойства color.

Пример: следующее правило указывает, что гиперссылки должны подчеркиваться:

A:link { text-decoration: underline }

2.9.4. Преобразование текста: свойство text-transform

Синтаксис:  text-transform: none | capitalize | uppercase | lowercase | inherit
Начально:   none
Применимо:  ко всем элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Соответствует стандарту; реализовано с ошибками (4.0+)

Свойство text-transform задает преобразование текста при отображении элементов. Оно может принимать следующие значения (Netscape Navigator 4.x отображает примеры неверно!):

none Без преобразования. Это пример.
capitalize Делать первую букву каждого слова прописной. Это пример.
uppercase Выводить текст прописными буквами. Это пример.
lowercase Выводить текст строчными буквами. Это пример.

Фактическое преобразование символов зависит от языка, на котором написан текст. Пример: следующее правило указывает, что заголовок H1 должен выводиться прописными буквами:

H1 { text-transform: uppercase }

2.9.5. Задание тени: свойство text-shadow

Синтаксис:  text-shadow: none | [<цвет> || <размер> <размер> <размер>?,]*
                         [<цвет> || <размер> <размер> <размер>?] | inherit
Начально:   none
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство text-shadow задает тень текста при отображении элементов. Его значением является список эффектов, разделенных запятыми. Эти эффекты должны применяться к тексту в том порядке, как они заданы, и могут перекрываться при отображении друг с другом (но не с самим текстом!).

Каждый эффект задается обязательным смещением от текста и необязательными цветом тени и радиусом пятна. Смещение тени относительно текста задается двумя значениями типа <размер>, первое из которых указывает горизонтальное смещение тени вправо от текста, а второе — вертикальное смещение тени вниз от текста. Эти значения могут быть отрицательными, что означает смещение тени влево или вверх относительно текста соответственно.

После смещения может быть указан необязательный радиус пятна. Точный алгоритм вычисления пятна не задан и зависит от обозревателя.

Кроме того, перед указанными размерами или после них может быть задан необязательный цвет тени. Если он не задан, то используется значение свойства color.

Тени могут применяться к псевдоэлементам :first-letter и :first-line.

Примеры:

H1 { text-shadow: 0.2em 0.3em }
H2 { text-shadow: 3px 3px 5px red }
H3 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

В первом примере задана тень со смещением 0.2em правее текста и 0.3em ниже его. Во втором примере заданы смещения по 3px правее и ниже текста, радиус пятна 5px и красный цвет тени. Последний пример содержит список из трех эффектов.

2.9.6. Интервал между буквами: свойство letter-spacing

Синтаксис:  letter-spacing: normal | <размер> | inherit
Начально:   normal
Применимо:  ко всем элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Соответствует стандарту (4.0+)
            Netscape Navigator Не поддерживается

Свойство letter-spacing задает интервал между буквами при отображении текста. Его значение задается одним из следующих способов:

  normal
    Стандартный интервал для текущего шрифта.
  <размер>
    Задает интервал в дополнение к стандартному интервалу. Это значение
    может быть отрицательным.

Пример: следующее правило увеличивает интервал между символами в заголовке H1 на 0.5em:

H1 { letter-spacing: 0.5em }

2.9.7. Интервал между словами: свойство word-spacing

Синтаксис:  word-spacing: normal | <размер> | inherit
Начально:   normal
Применимо:  ко всем элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Не поддерживается

Свойство word-spacing задает интервал между словами при отображении текста. Его значение задается одним из следующих способов:

  normal
    Стандартный интервал для текущего шрифта.
  <размер>
    Задает интервал в дополнение к стандартному интервалу. Это значение
    может быть отрицательным.

Алгоритм выбора интервалов между словами зависит от обозревателя и от наличия выключки текста по правому краю (см. свойство text-align).

Пример: следующее правило увеличивает интервал между словами в заголовке H1 на 1em:

H1 { word-spacing: 1em }

2.9.8. Обработка пробелов: свойство white-space

Синтаксис:  white-space: normal | pre | nowrap | inherit
Начально:   normal
Применимо:  к блочным элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные
Поддержка:  Internet Explorer Не поддерживается
            Netscape Navigator Поддерживаются только значения normal и pre (4.0+)

Свойство white-space задает правила обработки пробелов при отображении блочного элемента. Оно может принимать следующие значения:

normal Пробелы и разрывы строк отображаются обычным образом.
pre Пробелы и разрывы строк отображаются как в форматированном тексте.
nowrap Пробелы отображаются обычным образом, но разрывы строк запрещены.

Пример: следующие правила соответствуют правилам HTML по отображению элементов P и PRE:

P { white-space: normal }
PRE { white-space: pre }