CSS2. Спецификация. Рекомендации W3C. 1998

Свойства, определённые в следующих разделах, влияют на визуальное представление символов, пробелов, слов и параграфов.

16.1 Отступы: свойство 'text-indent'

'text-indent'

Это свойство специфицирует отступ 1-й строки текста в блоке. Точнее, оно специфицирует отступ 1-го бокса, всплывающего в 1-йстрочный бокс блока. Бокс получает отступ относительно левого (или правого, для вывода справа-налево) края строчного бокса. Пользовательские агенты (ПА) должны отображать этот отступ как пробел.

Значения имеют следующий смысл:

><leng>> Отступ имеет фиксированный размер.

<percentage> Процент от ширины содержащего блока.

Значение 'text-indent' может быть отрицательным, но могут быть ограничения, зависящие от реализации.

Пример:

Отступ размером '3em' для текста.

p{text-indent:3em}

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

'text-align'

Это свойство описывает, как выравнивается инлайн-содержимое блока.

Значения имеют следующий смысл:

left, right, center, justify Выравнивает текст влево, вправо, по центру и по формату.

<string> Специфицирует строку, в которой ячейки столбца таблицы будут выровнены (см.детали и пример в разделе Горизонтальное выравнивание в столбце). Это значение применяется только к ячейкам таблицы. Если установлено в другом элементе, оно рассматривается как 'left' или 'right', в зависимости от того, каково направление письма: 'direction' - 'ltr' или 'rtl', соответственно.

Блок текста это стопка строчных боксов. В случаях 'left', 'right' и 'center', это свойство специфицирует, как инлайн-боксы в каждом строчном боксе выравниваются относительно левой и правой сторон строчного бокса; выравнивание не производится относительно порта просмотра. В случае с 'justify', ПА может сжать инлайн-боксы в дополнение к уточнению их позиций. (см.также 'letter-spacing' и 'word-spacing'.)

Пример:

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

DIV.center{text-align:center}

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

Соответствующие пользовательские агенты (ПА) могут интерпретировать значение 'justify' как 'left' или 'right', в зависимости от того, каково по умолчанию направление письма: слева-направо или справа-налево, соответственно.

16.3 Декоративные эффекты

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

'text-decoration'

Это свойство описывает декоративное оформление текста элемента. Если это свойство специфицировано для элемента уровня блока, оно воздействует на всех потомков инлайн-уровня данного элемента. Если оно специфицировано (или влияет на) элемент инлайн-уровня, оно воздействует на все боксы, генерируемые элементом. Если элемент не имеет содержимого или текста (например, элемент IMG в HTML), ПА обязаны игнорировать данное свойство.

Значения имеют следующий смысл:

none Не производит декоративное оформление.

underline Каждая строка текста подчёркнута.

overline Каждая строка текста имеет над собой линию.

line->rough Каждая строка текста имеет посередине перечёркивающую линию.

blink Текст мигает. От соответствующих ПА не требуется поддерживать это значение.

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

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

Пример:

В следующем примере для HTML, текстовое содержимое всех элементов A будет подчёркнуто:

A[href]{text-decoration:underline}

16.3.2 Оттенение текста: свойство 'text-shadow'

'text-shadow'

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

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

Смещение оттенения специфицируется 2 значениями ><leng>>, указывающими расстояние от текста. 1-е значение специфицирует расстояние по горизонтали справа от текста. Отрицательное значение по горизонтали помещает тень слева от текста. 2-е значение специфицирует вертикальное расстояние под текстом. Отрицательное значение по вертикали помещает тень сверху от текста.

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

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

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

Пример:

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

H1{text-shadow:.2em .2em}

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

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

Следующий пример специфицирует список эффектов оттенения. 1-я тень будет справа и снизу от текста элемента и будет красного цвета без рассеяния. 2-я тень будет перекрывать 1-ю и будет жёлтая, с рассеянием и размещена влево и ниже текста. 3-я тень будет справа и сверху над текстом. Поскольку у неё цвет не специфицирован, будет использоваться значение свойства 'color' элемента:

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

Пример:

Рассмотри этот пример:

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

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

[D]

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

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

'letter-spacing'

Это свойство специфицирует расстояние между символами текста.

Значения имеют следующий смысл:

normal Нормальное расстояние для текущего шрифта. Это значение позволяет ПА изменять расстояние между символами при выравнивании и распределении текста.

><leng>> Обозначает межсимвольное пространство, дополнительное к значению по умолчанию. Значения могут быть отрицательными, но могут иметься ограничения в конкретных реализациях. ПА могут не иметь возможности после этого возможности изменять межсимвольное пространство для распределения и выравнивания текста.

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

Пример:

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

BLOCKQUOTE{letter-spacing:.1em}

В следующем примере ПАгенту не разрешено изменять межсимвольное пространство:

BLOCKQUOTE{letter-spacing:0}
Если расстояние-результат между 2 символами отличается от расстояния по умолчанию, ПА не должны использовать лигатуры.
Соответствующие ПА могут рассматривать значение свойства 'letter-spacing' как 'normal'.
'word-spacing'

Значение:
normal|><leng>>|inherit
Начальное:
normal
Применяется:
ко всем элементам
Наследуется:
да
Процентное:
N/A
Носитель:
визуальный

Это свойство специфицирует расстояние между словами.
Значения имеют следующий смысл:
normal Нормальное межсловное пространство, как определено текущим шрифтом и/или ПА.
><leng>> Это значение указывает межсловное пространство, дополняющее значение по умолчанию. Значения могут быть отрицательными, но могут существовать ограничения, в зависимости от конкретной реализацией.
Алгоритмы межсловного пространства зависят от ПА. Межсловное пространство устанавливается также при выравнивании по формату (см.свойство 'text-align').
Пример:
Здесь пространство между словами в элементах H1 увеличено на '1em'.
H1{word-spacing:1em}

Соответствующие ПА могут рассмат ривать значение свойство 'letter-spacing' как 'normal'.
16.5 Капитализация: свойство 'text-transform'
'text-transform'

Значение:
capitalize|uppercase|lowercase|none|inherit
Начальное:
none
Применяется:
ко всем элементам
Наследуется:
да
Процентное:
N/A
Носитель:
визуальный

Это свойство управляет эффектами капитализации текста элемента.
Значения имеют следующий смысл:
capitalize Переводит 1-й символ каждого слова в верхний регистр.
uppercase Переводит все символы каждого слова в верхний регистр.
lowercase Переводит все символы каждого слова в нижний регистр.
none Нет эффектов капитализации.
Реальная трансформация зависит в каждом конкретном случае от языка письма. См. о способах определения языка элемента в RFC 2070 ([RFC2070]).
Соответствующие ПА могут рассматривать значение 'text-transform' как 'none' для тех символов, которые не входят в репертуар Latin-1, и для элементов на тех языках, в которых трансформация отличается от трансформации, специфицированной таблицей конвертации регистров для ISO 10646 ([ISO10646]).
Пример:
Здесь весь текст в элементе H1 переводится в верхний регистр.
H1{text-transform:uppercase}
16.6 Пробел: свойство 'white-space'
'white-space'

Значение:
normal|pre|nowrap|inherit
Начальное:
normal
Применяется:
к элементам уровня блока
Наследуется:
да
Процентное:
N/A
Носитель:
визуальный

Это свойство объявляет, как обрабатываются пробелы внутри элемента.
Значения имеют следующий смысл:
normal Это значение указывает ПАгентам, что нужно сжимать последовательности пробелов и что нужны разрывы строк для заполнения строк бокса. Дополнительные разрывы строк могут создаваться с помощью ввода "\A" в генерируемом содержимом (например, для элемента BR в HTML).
pre Это значение предотвращает сжатие ПАгентами последовательностей пробелов. Строки переносятся только в коде документа или при появлениях "\A" в генерируемом содержимом.
nowrap Это значение сжимает пробелы, как 'normal', но подавляет разрывы строк в тексте, за исключением тех, которые создаются "\A" в генерируемом содержимом (например, для элемента BR в HTML).
Пример:
Следующие примеры демонстрируют ожидаемое поведение пробелов в элементах PRE и P и атрибута "nowrap" HTML.
PRE{white-space:pre}p{white-space:normal}td[nowrap]{white-space:nowrap}
Соответствующие ПА могут игнорировать свойство 'white-space' в авторских и пользовательских таблицах стилей, но обязаны специфицировать для них значение в таблице стилей по умолчанию.
предыдущий следующий содержание свойства индекс