Учебник CSS : Форматирование текста

назад

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

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