Свойства, определённые в следующих разделах, влияют на визуальное представление символов, пробелов, слов и параграфов.
'text-indent'
Значение: <length> | <percentage> | inherit
Начальное: 0
Применяется: к элементам уровня блока
Наследуется: да
Процентное: относительно ширины содержащего блока
Носитель: визуальный
Это свойство специфицирует отступ первой строки текста в блоке. Точнее, оно специфицирует отступ первого бокса, всплывающего в первый строчный бокс блока. Бокс получает отступ относительно левого (или правого, для вывода справа-налево) края строчного бокса. Пользовательские агенты (ПА) должны отображать этот отступ как пробел.
Значения имеют следующий смысл:
<length>
Отступ имеет фиксированный размер.
<percentage>
Процент от ширины содержащего блока.
Значение 'text-indent' может быть отрицательным, но могут быть ограничения, зависящие от реализации.
Отступ размером '3em' для текста.
P { text-indent: 3em }
'text-align'
Значение: left | right | center | justify | <string> | inherit
Начальное: зависит от ПА и направления письма
Применяется: к элементам уровня блока
Наследуется: да
Процентное: N/A
Носитель: визуальный
Это свойство описывает, как выравнивается инлайн-содержимое блока. Значения имеют следующий смысл:
left, right, center, and 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', в зависимости от того, каково по умолчанию направление письма: слева-направо или справа-налево, соответственно.
'text-decoration'
Значение: none | [ underline || overline || line-through || blink ] | inherit
Начальное: none
Применяется: ко всем элементам
Наследуется: нет (см. текст)
Процентное: N/A
Носитель: визуальный
Это свойство описывает декоративное оформление текста элемента. Если это свойство специфицировано для элемента уровня блока, оно воздействует на всех потомков инлайн-уровня данного элемента. Если оно специфицировано (или влияет на) элемент инлайн-уровня, оно воздействует на все боксы, генерируемые элементом. Если элемент не имеет содержимого или текста (например, элемент IMG в HTML), ПА обязаны игнорировать данное свойство.
Значения имеют следующий смысл:
none
Не производит декоративное оформление.
underline
Каждая строка текста подчёркнута.
overline
Каждая строка текста имеет над собой линию.
line-through
Каждая строка текста имеет посередине перечёркивающую линию.
blink
Текст мигает. От соответствующих ПА не требуется поддерживать это значение.
Цвет(а), необходимый для декорирования текста, должен быть получен из значения свойства 'color'.
Это свойство не наследуется, но боксы - потомки бокса блока должны быть сформатированы с тем же оформлением (например, все должны быть с подчёркиванием). Цвет оформления должен остаться тем же самым, даже если элементы-потомки имеют другие значения 'color'.
В следующем примере для HTML, текстовое содержимое всех элементов A будет подчёркнуто:
A[href] { text-decoration: underline }
'text-shadow'
Значение: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
Начальное: none
Применяется: ко всем элементам
Наследуется: нет (см. текст)
Процентное: N/A
Носитель: визуальный
Это свойство принимает список разделённых запятыми эффектов оттенения, применяемых к тексту элемента. Эффекты оттенения применяются в том порядке, в котором они специфицированы, и могут, таким образом, перекрываться один другим, но они никогда не перекрывают сам текст. Эффекты оттенения не изменяют размеры бокса, но могут выходить за его пределы. Уровень стэка эффекта оттенения - тот же самый, что и самого элемента.
Каждый эффект оттенения обязан специфицировать смещение оттенения и может по выбору специфицировать радиус рассеяния и цвет тени.
Смещение оттенения специфицируется двумя значениями <length>, указывающими расстояние от текста. Первое значение специфицирует расстояние по горизонтали справа от текста. Отрицательное значение по горизонтали помещает тень слева от текста. Второе значение специфицирует вертикальное расстояние под текстом. Отрицательное значение по вертикали помещает тень сверху от текста.
Радиус рассеяния может быть по выбору специфицирован после смещения оттенения. Радиус рассеяния это значение, обозначающее границы эффекта рассеяния. Точный алгоритм вычисления эффекта рассеяния не специфицирован.
Значение цвета может быть по выбору специфицировано до или после значений length эффекта оттенения. Значение цвета будет использоваться как базис эффекта оттенения. Если цвет не специфицирован, вместо него будет использоваться значение свойства 'color'.
Оттенения текста могут использоваться вместе с псевдоэлементами :first-letter и :first-line.
Следующий пример установит тень справа и снизу от текста элемента. Поскольку цвет не специфицирован, тень будет того же цвета, что и сам элемент, и, поскольку радиус рассеяния не специфицирован, тень текста не будет рассеиваться:
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 }