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

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

Группа свойств 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 выравнивает текст: left, right, center, justify.
• text-decoration: none убирает подчёркивание ссылок.
• text-transform меняет регистр на вид, не трогая разметку.