Оформление и выравнивание текста

Управляем выравниванием, подчёркиванием, регистром и интервалами текста.

Группа свойств text-* отвечает за то, как текст расположен и оформлен внутри своего блока — независимо от шрифта.

text-align — выравнивание

Задаёт горизонтальное выравнивание текста внутри элемента: left (по умолчанию), right, center, justify (по ширине).

h1 { text-align: center; }
.price { text-align: right; }
article p { text-align: justify; }

Заголовок встанет по центру, цена прижмётся вправо, а абзацы статьи растянутся по ширине ровными краями с обеих сторон. С justify на узких колонках осторожнее — между словами появляются большие «дыры».

text-decoration — линии у текста

Добавляет или убирает подчёркивание, надчёркивание и зачёркивание. Чаще всего его используют, чтобы убрать подчёркивание у ссылок.

a {
  text-decoration: none; /* убрать подчёркивание */
}

.sale {
  text-decoration: line-through; /* зачеркнуть старую цену */
}

Ссылки станут без подчёркивания, а старая цена — зачёркнутой. Значения: none, underline, overline, line-through.

text-transform — регистр букв

Меняет регистр, не трогая сам текст в разметке: uppercase (ВСЕ ПРОПИСНЫЕ), lowercase (все строчные), capitalize (Каждое Слово С Большой).

.label {
  text-transform: uppercase;
  letter-spacing: 1px;
}

Текст метки отобразится заглавными буквами. Удобно: в HTML вы пишете слово обычным регистром, а внешний вид меняет CSS — содержимое остаётся нетронутым.

letter-spacing и word-spacing

Регулируют расстояние между буквами и между словами. Небольшой разрядки добавляют заголовкам и меткам для солидности.

h2 {
  letter-spacing: 0.05em;
}

Буквы заголовка чуть разойдутся — текст станет «воздушнее». Слишком большая разрядка вредит читаемости, поэтому значения держат маленькими.

text-indent — красная строка

Делает отступ первой строки абзаца — как в книгах.

p {
  text-indent: 1.5em;
}

Первая строка каждого абзаца сдвинется вправо на полтора размера шрифта.

Памятка

СвойствоЧто делает
text-alignвыравнивание по горизонтали
text-decorationподчёркивание / зачёркивание
text-transformрегистр букв
letter-spacingинтервал между буквами
text-indentотступ первой строки

Итог

  • text-align выравнивает текст: left, right, center, justify.
  • text-decoration: none убирает подчёркивание ссылок.
  • text-transform меняет регистр на вид, не трогая разметку.
Проверьте себя
1. Каким свойством обычно убирают подчёркивание у ссылок?
Atext-align: none
Btext-decoration: none
Cfont-style: none
Dtext-transform: none
2. Что делает text-transform: uppercase?
AМеняет текст в разметке на заглавные навсегда
BПоказывает текст заглавными буквами, не меняя его в HTML
CУвеличивает размер шрифта
DВыравнивает текст по центру
3. Какое значение text-align растягивает строки по всей ширине ровными краями?
Acenter
Bright
Cjustify
Dspread
Поддержать проект