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 Наследует значение свойства от родительского элемента.

Синтаксис

p {text-align: left;}
p {text-align: right;}
p {text-align: center;}
p {text-align: justify;}
text-align
Рис. 1. Свойство text-align

2. Отступ text-indent

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

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

Синтаксис

p {text-indent: 5px;}
p {text-indent: 2%;}
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 Наследует значение свойства от родительского элемента.

Синтаксис

h1 {line-height: 20px;}
h1 {line-height: 200%;}
h1 {line-height: 1.2;}
h1 {line-height: normal;}
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 Наследует значение свойства от родительского элемента.

Синтаксис

img {vertical-align: baseline;}
img {vertical-align: sub;}
img {vertical-align: super;}
img {vertical-align: top;}
img {vertical-align: text-top;}
img {vertical-align: middle;}
img {vertical-align: bottom;}
img {vertical-align: text-bottom;}
img {vertical-align: 5px;}
img {vertical-align: 100%;}
vertical-align
Рис. 5. Свойство vertical-align