CSS предоставляет несколько свойств, которые позволяют очень легко и эффективно определять различные стили текста, такие как цвет, выравнивание, интервалы, оформление, трансформация и т. д.
Обычно для текста используются следующие свойства: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, и другие. Эти свойства позволяют точно контролировать внешний вид символов, слов и пробелов.
Теперь посмотрим, как установить эти свойства для текстовых элементов подробнее.
Свойство color
Цвет текста определяется CSS-свойством color.
Стилизационное правило в следующем примере определит цвет текста для страницы по умолчанию.
body {
color: #434343;
}Чтобы узнать больше о свойстве color см. Руководство по color в CSS.
Свойство text-align
Свойство text-align используется для установки горизонтального выравнивания текста.
Текст может быть выровнен четырьмя способами: слева (left), справа (right), по центру (center) или растянут на всю ширину (justify).
Давайте рассмотрим пример, чтобы понять, как это свойство работает.
h1 {
text-align: center;
}
p {
text-align: justify;
}Когда text-align установлено justify, каждая строка, кроме последней растягивается на всю ширину так, чтобы левые и правые поля были прямыми. Это выравнивание обычно используется в журналах и газетах.
Давайте посмотрим на следующую иллюстрацию, чтобы понять, что на самом деле означают эти значения.
Свойство text-decoration
Свойство text-decoration используется для установки или удаления украшений в тексте.
Это свойство обычно принимает одно из следующих значений: underline, overline, line-through, и none. Вы должны избегать использования подчеркнутого текста, поскольку пользователь может перепутать его с ссылкой.
Посмотрим примеры, чтобы понять, как это работает:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}Удаление подчеркивания по умолчанию из ссылок
Свойство text-decoration используется для удаления подчеркивания по умолчанию из HTML-гиперссылок. Или же вы можете использовать другое визуальное оформление, чтобы выделить ссылку из обычного текста. Например, используя пунктирную границу вместо сплошного подчеркивания.
Посмотрим на следующий пример, чтобы понять, как это работает:
a {
text-decoration: none;
border-bottom: 1px dotted;
}Когда вы создаете HTML-ссылку, браузер по умолчанию будет использовать встроенные стили, т.е. будет автоматически подчеркивть ее и применять синий цвет, чтобы читатели могли четко видеть, какой текст кликабелен.
Во многих случаях, для того, чтобы выделить ссылку из текста удобно использовать свойство border-bottom. Его просто позиционировать, форматировать и на него действуют все анимируемые свойства.
Свойство text-transform
Свойство text-transform используется, чтобы установить регистр для текста.
Текст часто пишется в смешанном регистре. Однако в некоторых ситуациях вы можете захотеть установить один регистр эли элемента. Используя это свойство, вы можете изменить текстовое содержимое элемента на заглавные буквы, строчные буквы или использовать заглавные буквы для каждого слова без изменения исходного текста.
Давайте посмотрим пример, чтобы понять, как это работает:
h1 {
text-transform: uppercase;
}
h2 {
text-transform: capitalize;
}
h3 {
text-transform: lowercase;
}Свойство text-indent
Свойство text-indent используется для установки отступа первой строки текста (красная строка). Обычно это делается путем вставки пустого пространства перед первой строкой текста.
Размер отступа можно указать в процентах (%) или числового значения в px, em, rem и т. д.
Следующее правило сделает отступ первой строки абзаца на 100 пикселей.
p {
text-indent: 100px;
}Отступ текста слева или справа зависит от направления текста внутри элемента, определяемого CSS-свойством direction.
Свойство letter-spacing
Свойство letter-spacing используется для установки дополнительного расстояния между символами текста.
Это свойство может принимать значение в px, em, rem и т. д. Также может принимать отрицательные значения. При установке межбуквенного интервала, указанное значение добавляется к межсимвольному пространству по умолчанию.
Посмотрим на следующий пример, чтобы понять, как это действительно работает:
h1 {
letter-spacing: -3px;
}
p {
letter-spacing: 10px;
}Свойство word-spacing
Свойство word-spacing используется для указания дополнительного расстояния между словами.
Это свойство может принимать значение в px, em, rem и т. д. Также допускаются отрицательные значения.
Посмотрим на пример, чтобы понять, как работает это свойство:
p.normal {
word-spacing: 20px;
}
p.justified {
word-spacing: 20px;
text-align: justify;
}
p.preformatted {
word-spacing: 20px;
white-space: pre;
}Расстояние между словами может зависеть от выравнивания текста. Также, несмотря на то, что пробелы сохраняются, пробелы между словами затрагиваются свойством word-spacing.
Свойство line-height
Свойство line-height используется для установки высоты текстовой строки. Это также называется межстрочным интервалом.
Значением этого свойства может быть число, процент (%) или значение в px, em, rem и т. д.
p {
line-height: 1.2;
}Когда значением является числом, высота строки рассчитывается путем умножения размера шрифта элемента на это число. При этом процентные значения также соотносятся с размером шрифта элемента в дробном отношении.
Отрицательные значения для свойства line-height недопустимы. Это свойство также является компонентом сокращенного CSS-свойства font.
Если значение свойства line-height больше, чем значение font-size для элемента, эта разница (называемая «ведущей») делится пополам (называемой «половиной ведущей») и распределяется равномерно в верх и низ встроенного бокса. Давайте посмотрим на пример:
p {
font-size: 14px;
line-height: 20px;
background-color: #f0e68c;
}Чтобы узнать, как обрабатывать переполненный текст см. Руководство по text overflow. Также см. Руководство по text shadow, чтобы узнать, как применять эффект тени к тексту.
