Свойства данной категории влияют на отображение символов, слов и абзацев. Они определяют расстояние между словами и буквами в словах, задают отступы и высоту строк в абзацах.
Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами. Ниже показано отображение текста с увеличенными на 0.5em пробелом между символами:
Слово Слово Слово Слово
Примечание
Браузер увеличивает расстояния не только между символами слов, но и расстояние между словами, т.к. пробел - это тоже символ.
Каскадные таблицы стилей позволяют преобразовывать текст. Если значение свойства text-transform равно capitalize, то все слова отображаются с прописной буквы. Значения uppercase и lowercase этого свойства приводят, соответственно, к преобразованию всех букв в прописные или строчные, независимо от их задания в тексте документа HTML. Значение none снимает все установки, приобретённые в результате наследования.
Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста. Соответствующие значения этого свойства следующие: underline, overline и line-through.
Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align. Текст выравнивается по левому краю при значени left, по правому краю - при значении right и по центру - при значении center.
Предупреждение
Текст выравнивается относительно блока содержимого элемента, а не относительно окна отображения браузера.
Отступ первой строки элемента задаётся значением свойства text-indent, которое определяет величину отступа в абсолютных или относительных единицах длины.
Свойство vertical-align определяет положение элемента по вертикали относительно элемента-родителя. Его значением может быть любое ключевое слово из таблицы:
Значение | Результат |
baseline | Выравнивание базовой линии элемента (или низа, если элемент не имеет базовой линии) по базовой линии родителя |
middle | Выравнивание средней точки элемента (обычно изображения) на уровне базовой линии родителя плюс половина ширины блока содержимого родителя |
sub | Элемент отображается в виде нижнего индекса |
super | Элемент отображается в виде верхнего индекса |
text-top | Выравнивание верха элемента с верхом шрифта элемента-родителя |
text-bottom | Выравнивание низа элемента с низом шрифта элемента-родителя |
top | Выравнивание верха элемента с верхом самого высокого элемента строки |
bottom | Выравнивание низа элемента с элементом, расположеным ниже всех элементов строки |
Напоминаем, базовая линия - это нижняя часть линии текста, которая проводиться без учёта нижней части (descender) некоторых символов, например, букв типа j, q, y.
Свойство line-height. Значение этого свойства, заданные в виде процентов, вычисляются относительно строки самого элемента. Он поднимают базовую линию (или низ элемента, если он не имеет базовой линии) на заданную высоту относительно базовой линии элемента-родителя, если значение положительно, и опускают, если значение отрицательно.
Расстояние между базовыми линиями двух соседних строк (высота строки) задаётся установкой значения свойства line-height. Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта текущего элемента на заданное число.
Примечание
Все текстовые свойства, кроме свойств text-decoration и vertical-align, наследуются элементами-потомками от родителей.
Данный HTML-код демонстрирует примеры использования изложенной информации: