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, чтобы узнать, как применять эффект тени к тексту.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.