WDH: CSS - Текст

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

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

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

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

Поддержка:   Соответствует стандарту (4.0+)
             Соответствует стандарту (4.0+)

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

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

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

P { text-indent: 3em }

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

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

Поддержка:   Поддерживаются только left, right, center и justify (4.0+)
             Поддерживаются только 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
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные

Поддержка:   Соответствует стандарту; blink не поддерживается (4.0+)
             Соответствует стандарту; 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
Применимо:  ко всем элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные

Поддержка:   Соответствует стандарту (4.0+)
             Соответствует стандарту; реализовано с ошибками (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
Применимо:  ко всем элементам
Наследуемо: нет
Проценты:   не используются
Устройства: визуальные

Поддержка:   Не поддерживается
             Не поддерживается

Свойство 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
Применимо:  ко всем элементам
Наследуемо: да
Проценты:   не используются
Устройства: визуальные

Поддержка:   Соответствует стандарту (4.0+)
             Не поддерживается

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

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

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

H1 { letter-spacing: 0.5em }

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

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

Поддержка:   Не поддерживается
             Не поддерживается

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

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

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

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

H1 { word-spacing: 1em }

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

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

Поддержка:   Не поддерживается
             Поддерживаются только значения normal и pre (4.0+)

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

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

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

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