2.4. CSS текст

css-textCSS текст представляет набор свойств для форматирования текстового содержимого веб-страниц. Использование CSS-стилей для форматирования текста позволяет придать html-элементам желаемый вид, благодаря чему html-теги могут применяться только по своему прямому назначению — для определения структуры документа.

О свойствах для работы с текстом, добавленных в спецификацию CSS3text-overflow, word-break, word-wrap, можно прочитать здесь.

Форматирование текста в CSS

1. Горизонтальное выравнивание text-align

Свойство выравнивает строки текста внутри блока по ширине относительно его границ. Применяется только к блочным элементам, например, абзацам. Наследуется.

text-align
Значения:
left Выравнивание по левому краю элемента. Значение по умолчанию для языков, в которых чтение происходит слева-направо.
right Выравнивание по правому краю элемента.
center Выравнивание по центру элемента, управляет выравниванием содержимого, а не самих элементов. Центрирует каждую строчку текста элемента.
justify Выравнивание по ширине элемента. В выровненном по ширине тексте оба конца строки прижимаются к левому и правому краям родительского элемента. Пробелы между словами и буквами распределяются таким образом, чтобы длина всех строк была равна. Разные браузеры могут увеличить как отступы между словами, так и интервалы между буквами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-align

Рис. 1. Свойство text-align

2. Отступ text-indent

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

text-indent
Значение:
длина Значение задаётся в единицах длины em, px и т.д. Смещает первую строку текста. Можно использовать как положительные, так и отрицательные значения (см. пример ниже).
% Величина смещения задаётся в процентах, вычисляется относительно ширины родительского блока.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-indent

Рис. 2. Свойство text-indent

3. Высота строки line-height

line-height

Рис. 3. Контейнер строки

Свойство задаёт расстояние между базовыми линиями строк текста, определяя величину, на которую увеличивается или уменьшается высота блока каждого элемента. Управляет межстрочным интервалом — дополнительным расстоянием между строками над и под текстом. Чтобы определить межстрочный интервал, нужно найти разность line-height и font-size, разницу поделить на два, а каждую половину прибавить к области содержимого сверху и снизу. Принимает только положительные значения. Стандартный межстрочный интервал эквивалентен 120%.

При равных значениях line-height и height выравнивает текст по высоте. Наследуется.

line-height
Значения:
длина Значение задаётся в единицах длины, создавая фиксированное значение высоты строки. Если задать значение меньше единицы, слова в смежных строках будут находить друг на друга.
% Вычисляется относительно текущего значения свойства font-size.
число Целое или дробное числовое значение, на которое будет умножен текущий размер шрифта.
normal Значение браузера по умолчанию.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

line-height-text

Рис. 4. Пример отображения различных значений межстрочного интервала

4. Вертикальное выравнивание vertical-align

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

vertical-align
Значения:
baseline Выравнивает базовую линию элемента по базовой линии его родителя, совмещая среднюю линию элемента со средней линией родительского элемента.
sub Делает элемент подстрочным (аналогично с тегом <sub>). Величина понижения элемента может меняться в зависимости от браузера пользователя.
super Делает элемент надстрочным (аналогично с тегом <sup>). При этом значения sup и super не меняют размер шрифта, по умолчанию текст надстрочного и подстрочного элемента имеет такой же размер, как и текст родительского элемента.
top Верхний край элемента совмещается с верхним краем самого высокого элемента в линии.
text-top Верхний край элемента совмещается с верхним краем шрифта родительского элемента.
middle Средняя линия элемента (обычно изображения) совмещается с линией, проходящей через середину родительского элемента.
bottom Нижний край элемента совмещается с нижним краем самого низкого элемента в линии.
text-bottom Нижний край элемента совмещается с нижним краем шрифта родительского элемента.
длина Устанавливает значение в единицах длины, перемещая элемент на заданное расстояние.
% Не позволяет устанавливать middle, вычисляется как часть line-height элемента, а не его родителя, т.е. если установить значение vertical-align, равное 50% для элемента с line-height равным 20рх, то базовая линия элемента поднимется на 10px.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

vertical-align

Рис. 5. Свойство vertical-align