16. Текст


Содержание

Свойства, представленные в этом разделе, описывают визуальное представление символов, отступов, слов и абзацев текста.

16.1 Отступ (сдвиг): свойство 'text-indent'

'text-indent'
Значение:  <фиксированная величина> | <процент> | наследуется от родителя
По умолчанию:  0
Область применения  элементы, определяющие блок текста
Наследуется подчиненными элементами:  да
Задание в процентах:  относительно ширины всего блока
Среда представления:  visual

Определяет отступ (выступ) первой строки в блоке текста (красная строка). Более точно, это свойство определяет сдвиг прямоугольной области (блока линий), содержащей первую строку текста. Сдвиг происходит относительно левого (или правого, при направалении вывода текста справа налево) края блока текста. Агенты пользователя должны отображать сдвиг как пустое пространство.

Может принимать следующие значения:

<фиксированная величина>
Сдвиг задается в виде фиксированной величины.
<процент>
Сдвиг задается в процентах от ширины данного блока.

Значение 'text-indent' может быть отрицательным, но, при этом, имеет ограниченные приделы видимости.

Example(s):

Следующий пример отпределяет текстовый отступ в '3em' для первой строки в абзаце.

  P { text-indent: 3em }

16.2 Выравнивание: свойство 'text-align'

'text-align'
и направлением вывода текста по умолчанию
Значение:  left | right | center | justify | <строка> | наследуется от родителя
По умолчанию:  определяется агентом пользователя
Область применения  элементы, определяющие блок текста
Наследуется подчиненными элементами:  да
Задание в процентах:  не поддерживается
Среда представления:  visual

Свойство определяет выравнивание текстового блока. Допустимые значения:

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

Блок текста представлет собой последовательность (стек) прямоугольных областей (блоков линий). Значения 'left', 'right' и 'center' свойства 'text-align', задают способ, по которому выравнивается каждая строка (прямоугольная область, содержащая строку) относительно левой или правой границы всего блока текста. Выравнивание не привязано к видимой области просмотра. При значении 'justify', агент пользователя может растягивать прямоугольную область, образующую строку, в дополнение к корректировке позиции. (См. также 'межбуквенный интервал' и 'расстояние между словами'.)

Example(s):

В этом примере обратите внимание на то, что 'text-align' - свойство, наследуемое подчиненными элементами. Это означает, что все элементы внутри блока, описываемого элементом DIV с классом 'class=center', будут выравнивать свое содержимое по центру.

DIV.center { text-align: center }

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

Значение 'justify' может интерпретироваться агентом пользователя как 'left' или 'right', в зависимости от того, каким (слева направо или справо налево) является заданное по умолчанию напрвление вывода текста.

16.3 Оформление текста

16.3.1 Подчеркивание, черта над тектом, закеркивание и мигание: свойство 'text-decoration'

'text-decoration'
Значение:  none | [ underline || overline || line-through || blink ] | наследуется от родителя
По умолчанию:  none
Область применения  все элементы
Наследуется подчиненными элементами:  нет (см. описание)
Задание в процентах:  не поддерживается
Среда представления:  visual

Свойство задает оформление текстового элемента. Если свойство определено для элемента, описывающего блок текста, то оно воздействует на все элементы, лежащие внутри этого блока (подчиненные элементы). Если свойство определено для подчиненного элемента, оно действует только на область, определенную (сгенерированную) для этого элемента. Если элемент не имеет содержимого или не имеет никакого текстового содержимого (например элемент IMG в HTML), агент пользователя должен игнорировать это свойство.

Может принимать следующие значения:

none
Не производить никакого оформления текста.
underline
Каждая cтрока текста подчеркнута (нижняя рамка прямоугольной области видима).
overline
Каждая строка текста обрамляется чертой над ней (верхняя рамка прямоугольной области видима).
line-through
Каждая строка текста отображается перечеркнутой.
blink
Мигание текста (смена состояний "видимый" и "невидимый"). Агент пользователя может не поддерживать это значение.

Цвет оформления наследуется от значения свойства 'color' самого текста.

Свойство не наследуется подчиненными элементами, однако они должны оформляться тем же способом (например, они должны все быть подчеркнутыми). Цвет оформления должен оставаться постоянными, даже в том случае, когда значение 'color' для подчиненных элементов другое.

Example(s):

В следующем примере для HTML текстовое содержимое всех элементов типа A (включая <a name="...">)будет подчеркнуто:

A[href] { text-decoration: underline }

16.3.2 Тень текста: свойство 'text-shadow'

'text-shadow'
Значение:  none | [<цвет> || <значение> <значение> <значение>? ,]* [<цвет> || <значение> <значение> <значение>?] | наследуется от родителя
По умолчанию:  none
Область применения  все элементы
Наследуется подчиненными элементами:  нет (см. описание)
Задание в процентах:  не поддерживается
Среда представления:  visual

Свойство задает набор теневых эффектов, разделенных запятой, которые нужно применить к тексту элемента. Теневые эффекты применяются в указанном порядке, и, таким образом, накладываются друг на друга, но они не затрагивают сам текст непосредственно. Теневые эффекты не изменяют размер прямоугольной области отображения текста, но могут простираться за ее границы. Теневые эффекты отображаются на том же слое, что и текст, к которому они применяются.

Каждый теневой эффект должен задавать смещение тени и может определять величину размытости (радиус пятна) и цвет тени.

Смещение тени определяется двумя <величинами>, задающими отступ от текста. Первое значение определяет горизонтальное смешение вправо относительно текста. Отрицательное значение для горизонтального смещения располагает тень слева от текста. Второе значение определяет вертикальное смешение вниз относительно текста. Отрицательное значение для вертикального смещения задает тень над текстом.

Радиус теневого пятна может быть произвольно определен после задания смещения тени. Радиус пятна - величина, указывающая размер (границы) теневого пятна. Точный алгоритм отображения теневого пятна не определен.

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

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

Example(s):

Приведенный ниже пример определяет тень справо - снизу текста. Цвет тени не указывается, и тень будет отображаться тем же цветом что и текст. Радиус для пятна не определен, поэтому тень не будет размыта:

H1 { text-shadow: 0.2em 0.2em }

Следующий пример определяет тень справа - снизу текста. Тень будет иметь радиус размытости 5px и красный базовый цвет.

H2 { text-shadow: 3px 3px 5px red }

Еще один пример определяет набор теневых эффектов. Первая тень будет справа и ниже текста элемента ,красная и не размытая. Вторая тень будет перекрывать (накладываться на) первую, и будет желтой, размытой, и помещаться слева и ниже текста. Третий теневой эффект будет помещен справа и выше текста. Так как цвет тени не определен для третьего теневого эффекта, будет использоваться цвет из свойства 'color' текста:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Example(s):

Рассмотрим еще один пример:

SPAN.glow { 
    background: white; 
    color: white;
    text-shadow: black 0px 0px 5px;
}

Здесь 'background' (цвет фона) и 'color' (цвет текста) имеют одинаковое значение, а тень ('text-shadow') используется, чтобы создать создать эффект на подобии "солнечного затмения":

Solar eclipse effect   [D]

Примечание. Это свойство не определено в CSS1. Некоторые теневые эффекты (наподобии используемого в последнем примере) могут сгенерировать текст, неотображаемый агентами пользователя, поддерживающими толко CSS1.

16.4 Межбуквенные интервалы и интервалы между словами: свойства 'letter-spacing' и 'word-spacing'

'letter-spacing'
Значение:  normal | <фиксированная величина> | наследуется от родителя
По умолчанию:  normal
Область применения  все элементы
Наследуется подчиненными элементами:  да
Задание в процентах:  не поддерживается
Среда представления:  visual

Свойство определяет расстояние между текстовыми символами. Может принимать следующие значения:

normal
Использовать стандартный интервал для текущего шрифта. Это значение позволяет также агенту пользователя изменять расстояние между символами, при выравнивании методом 'justify'.
<фиксированная величина>
Указывает величину, на которую увеличивается межсимвольное расстояние, в дополнение к заданному по умолчанию. Значение может быть отрицательны, но при этом имеет ограниченные пределы выполнения. Агенты пользователя не имееют право увеличивать или уменьшать это межсимвольное расстояние при выровнивание текста.

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

Example(s):

В этом примере, межсимвольный интервал в элементах BLOCKQUOTE увеличен на '0.1em'.

BLOCKQUOTE { letter-spacing: 0.1em }

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

BLOCKQUOTE { letter-spacing: 0cm }   /* Тоже что и '0' */

В случае, когда интервал между двумя символами, отличается от заданного по умолчанию значения, агенты пользователя не должны изменять это расстояние (связь).

Агенты пользователя могут изменять величину межбуквенного интервала, если значение свойства 'letter-spacing' определено как 'normal'.

'word-spacing'
Значение:  normal | <фиксированная величина> | наследуется от родителя
По умолчанию:  normal
Область применения  все элементы
Наследуется подчиненными элементами:  да
Задание в процентах:  не поддерживается
Среда представления:  visual

Свойство определяет расасстояние между словами. Может принимать следующие значения:

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

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

Example(s):

В этом примере, интервал между словами в элементах типа H1, увеличен на '1em'.

H1 { word-spacing: 1em }

Агенты пользователя могут корректировать величину интервала между словами, если значение свойства 'word-spacing' указано как 'normal'.

16.5 Преобразование регистра букв: свойство 'text-transform'

'text-transform'
Значение:  capitalize | uppercase | lowercase | none | наследуется от родителя
По умолчанию:  none
Область применения  все элементы
Наследуется подчиненными элементами:  да
Задание в процентах:  не поддерживается
Среда представления:  visual

Это свойство управляет преобразованием регистра букв. Может принимать следующие значение:

capitalize
Переводит первый символ каждого слова в верхний регистр.
uppercase
Переводит все символы каждого слова в верхний регистр.
lowercase
Переводит все символы каждого слова в нижний регистр.
none
не производить преобразований регистра.

Фактическое преобразование в каждом случае определяется правилами языка. Способы определения языка элементов смотри в RFC 2070 ([RFC2070]).

Агент пользователя может полагать значение 'text-transform' равным 'none' для символов, не входящих в диапозон кодировки Latin-1 и для языков, у которых подобное преобразование отличается от описываемого таблицами ISO 10646 ([ISO10646]).

Example(s):

В этом примере, весь текст в H1 элементе преобразован к верхнему регистру.

H1 { text-transform: uppercase }

16.6 Пустые символы: свойство 'white-space'

'white-space'
Значение:  normal | pre | nowrap | наследуется от родителя
По умолчанию:  normal
Область применения  элементы, определяющие блок текста
Наследуется подчиненными элементами:  да
Задание в процентах:  не поддерживается
Среда представления:  visual

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

normal
Значение позволяет агенту пользователя исключать пустые символы по мере необходимости при заполнении строк текста. Дополнительные переводы строк могут вставляться в соответствующих местах, обозначенных в контексте (на подобии элемента BR в HTML).
pre
Это значение запрещает агенту пользователя исключать пустые символы из текста. Переходы на новую строку происходят только при переводе строки в исходном тексте или в местах, обозначенных в контексте.
nowrap
Значение действует схоже с 'normal', но запрещает все переводы строк, кроме непосредственно обозначенных в контексте (на подобии элемента BR в HTML).

Example(s):

Следующие примеры описывают формат представления пустых символов на примере элементовe PRE и P, и атрибута "nowrap" в языке HTML.

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

Агент пользователя может игнорировать свойство 'white-space' при выдаче информации пользователю, но должен указать его в стилевой спецификации.


Copyright (c) 1997-1999 ВебКлуб
Email: webclub@webclub.ru
Оригинальная идея Андрей Новиков
www.reklama.ru. The Banner Network.