В HTML у текста есть несколько свойств. Когда эти свойства изменяются, меняется и вид текста на сайте. Например, тут мы уже говорили о том, как изменить цвет текста в HTML.

Выравнивание

Для выравнивания текста предназначено CSS свойство text-align. С его помощью можно выравнивать текст:

  • left - по левому краю (вариант по умолчанию)
  • right - по правому краю
  • center - по центру
  • justify - растягивать на всю ширину элемента

На практике все варианты используются так:

<p style="text-align: left;">Левое выравнивание</p>
<p style="text-align: right;">Правое выравнивание</p>
<p style="text-align: center;">Выравнивание по центру</p>
<p style="text-align: justify;">Выравнивание по ширине</p>

Украшение (decoration)

Текст можно украсить или сделать акцент на какой-то его части, например, с помощью подчеркивания. В CSS за это отвечает свойство text-decoration:

<p style="text-decoration: none;">Никак эффектов не будет. Значение по умолчанию</p>
<p style="text-decoration: underline;">Текст будет подчеркнут</p>
<p style="text-decoration: overline;">Над текстом будет нарисована линия</p>
<p style="text-decoration: line-through;">Текст будет перечеркнут</p>

Также можно задать форму или цвет линии, дополнительно к ее типу. Рассмотрим на примере underline:

<p style="text-decoration: underline solid;">Текст будет подчеркнут одной линией. Значение по умолчанию/p>
<p style="text-decoration: underline dotted;">Текст будет подчеркнут точками</p>
<p style="text-decoration: underline dotted red;">Текст будет подчеркнут красными точками</p>
<p style="text-decoration: underline double blue;">Текст будет подчеркнут двумя синими линиями</p>
<p style="text-decoration: underline dashed rgb(0, 0, 0);">Текст будет подчеркнут черными штрихами</p>
<p style="text-decoration: underline wavy #000000;">Текст будет подчеркнут черной волнистой линией</p>

Форму и цвет линии также можно задать отдельными свойствами - text-decoration-style и text-decoration-color:

<p
   style="
     text-decoration: underline;
     text-decoration-style: dashed;
     text-decoration-color: rgb(0, 0, 0);
   "
>
  Текст будет подчеркнут черными штрихами
</p>

Отступ первой строки

У параграфа или абзаца надо добавлять отступ первой строки. Например, когда пишем статью или книгу. В CSS для этого служить свойство text-indent:

<p style="text-indent: 100px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium urna, ut ornare odio luctus a. Sed laoreet, velit nec luctus pharetra, eros est condimentum urna, hendrerit malesuada sem mi ac lectus.
</p>

Если задать отступ в процентах, то высчитываться он будет относительно ширины HTML элемента.

<p style="text-indent: 30%">
Proin at risus vel lectus pretium ultrices. Integer et orci condimentum, viverra tortor a, vehicula orci. Quisque pretium, nulla et dapibus tempor, tellus felis mollis mi, bibendum malesuada lacus ex in magna. Mauris rhoncus id massa ac viverra. Ut ante ligula, dignissim pellentesque gravida at, condimentum a erat. In dignissim consequat mollis.
</p>

Трансформация текста

С помощью свойства text-transform можно управлять размером (регистром) букв. Всего может быть четыре значения:

  • none - без изменений
  • capitalize - все слова с большой буквы
  • uppercase - все в верхнем регистре
  • lowercase - все в нижнем регистре
<p style="text-transform: none;">Все буквы будут отображаться так, как введены разработчиком. Значение по умолчанию</p>
<p style="text-transform: capitalize;">Все слова будут отображаться с заглавной буква</p>
<p style="text-transform: uppercase;">Все буквы всех слов будут в верхнем регистре</p>
<p style="text-transform: lowercase;">Все буквы всех слов будут отображаться в нижнем регистре</p>

Расстояние между символами

Для того, чтобы установить расстояние между символами, используется свойство letter-spacing.

Значение по умолчанию - normal. В таком случае браузер все сам сделает за тебя и в зависимости от самого шрифта и его размера задаст расстояние между символами.

Если ты хочешь все контролировать сам, то можешь явно указать количество пикселей между символами:

<p style="letter-spacing: 20px;">Текст с расстоянием 20 пикселей между символами</p>

Расстояние между символами можно сделать отрицательным. В большинстве случаев это сделает текст нечитаемым:

<p style="letter-spacing: -4px;">Текст, который очень трудно прочитать.</p>

Расстояние между словами

Точно так же, как задается расстояние между символами, можно задать и расстояние между словами. Отличие будет только в имени свойства - word-spacing. Все остальные правила сохраняются:

<p style="word-spacing: 200px;">Текст с огромным расстоянием между словами</p>

ВАЖНО! Если мы уже добавили свойство text-align: justify, то расстояние между словами будет определяться браузером, но будет не меньше, чем значение word-spacing:

<p style="text-align: justify; word-spacing: 20px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula pretium urna, ut ornare odio luctus a. Sed laoreet, velit nec luctus pharetra, eros est condimentum urna, hendrerit malesuada sem mi ac lectus. Proin at risus vel lectus pretium ultrices. Integer et orci condimentum, viverra tortor a, vehicula orci. Quisque pretium, nulla et dapibus tempor, tellus felis mollis mi, bibendum malesuada lacus ex in magna. Mauris rhoncus id massa ac viverra. Ut ante ligula, dignissim pellentesque gravida at, condimentum a erat. In dignissim consequat mollis.
</p>