Свойства текста в CSS

Наряду с несколькими свойствами font- *, CSS предлагает множество свойств text-*.

text-align

Свойство text-align должно применяться к блочному элементу и определяет, каким образом текст и дочерние строчные элементы выравниваются по горизонтали.

body { text-align: left; }

Наиболее используемые значения:

  • left
  • right
  • center
  • justify

Эти значения соответствуют тем же кнопкам выравнивания, что вы найдёте в Microsoft Word или Photoshop:

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

Значение text-align по умолчанию равно start. В принципе, start может быть как left, так и right, в зависимости от направления текста, заданного direction для HTML-документа.

direction — это свойство CSS, которое может быть ltr (слева направо) или rtl (справа налево):

  • если выбран ltr, start равен left;
  • если выбран rtl, start равен right.

text-decoration

Свойство text-decoration применяется для добавления линии к вашему тексту.

Значение по умолчанию: none.

.deleted { text-decoration: line-through; }

Возможные значения:

  • overline
  • underline
  • line-through

По умолчанию, к ссылкам (<a>) применяется text-decoration: underline. Одной из первых вещей, которые верстальщики обычно делают — это удаляют данный стиль:

a { text-decoration: none; }

text-indent

Свойство text-indent позволяет добавить пространство перед первой буквой первой строки блочного элемента.

Значение по умолчанию: 0 (ноль).

blockquote { text-indent: 30px; }

Обратите внимание, что отступ есть только в первой строке. Если вы хотите сдвинуть весь блок текста, используйте padding.

Как и для свойства font-size, вы можете использовать px, em или даже %.

text-shadow

Если вы когда-либо использовали Photoshop, то, вероятно, применяли инструмент для добавления тени. В CSS вы можете добавить тень к тексту, чтобы сделать его более причудливым или удобным для чтения.

Вы определяете:

  • х — горизонтальное смещение;
  • у — вертикальное смещение;
  • размытие;
  • цвет.
h1 { text-shadow: 0 2px 5px rgba(0,0,0,0.5); }

Обязательны только значения х и у. Размытие тени по умолчанию 0 (ноль), а цвет по умолчанию совпадает с цветом текста.

Это свойство сложное, так что используйте его осторожно и не сходите с ума!

Перейти к заданиям

Автор и редакторы

Автор: Джереми Томас
Последнее изменение: 13.08.2017
Редакторы: Влад Мержевич