Свойства текста в 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 (ноль), а цвет по умолчанию совпадает с цветом текста.

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

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