Навигация Содержание
Главная / HTML и CSS

Основные свойства для оформления текста в CSS

Основные свойства для оформления текста в CSS
81.1K
1
Содержание:
  1. Цвет текста (color)
  2. Выравнивание текста (text-align)
  3. Вертикальное выравнивание (vertical-align)
  4. Комментарии

В этой статье мы изучим основные свойства, для оформления текста в CSS.

А именно:

Цвет текста (color)

CSS-свойство color предназначено для задания цвета текста.

Указать цвет можно разными способами. Наиболее популярными из них являются следующие:

  • посредством ключевых слов, являющимися названиями цветов (например, color: yellow);
  • в шестнадцатиричной системе счисления (например: #00ff00);
  • в формате rgb(red, green, blue); здесь вместо red, green и blue нужно указать число от 0 до 255, которое соответственно определяет интенсивность красного, зелёного и синего цветов (например, rgb(76 175 80) – без указания прозрачности, rgb(76 175 80 / 0.5) – с указанием прозрачности);
  • в формате hsl(оттенок насыщенность яркость) (например, hsl(122 39% 49%) – без указания прозрачности, hsl(122 39% 49% / 50%) – с указанием прозрачности).

Например, установим всем абзацам красный цвет:

CSS
p {
  /* с использованием названия цвета */
  color: red;
  /* в формате hex */
  color: #ff0000;
  /* в формате rgb */
  color: rgb(255 0 0);
  /* в формате hsl */
  color: hsl(0 100% 50%);
}

Выравнивание текста (text-align)

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

  • start (значение по умолчанию) – работает как left (если направление текста слева направо, то есть direction: ltr) или как right (если направление текста справа налево, то есть direction: rtl);
  • end – работает как right (если direction: ltr) или как left (если direction: rtl);
  • left – по левому краю;
  • center – по центру блока;
  • right – по правому краю;
  • justify – по ширине блока, то есть одновременно по левому и правому краям (чтобы это сделать браузер по умолчанию добавляет пробелы между словами), кроме последней строки;
  • match-parent – аналогично inherit, но значения start и end вычисляются в соответствии со значением direction родительского объекта.

Изменять направление текста с помощью CSS-свойства direction не рекомендуется. Вместо этого следует использовать глобальный HTML-атрибут dir.

CSS
.block {
  text-align: left;
  text-align: center;
  text-align: right;
  text-align: justify;  
}
CSS-свойство text-align для горизонтального выравнивания текста и других инлайновых элементов внутри блока

В CSS кроме text-align имеется также свойство text-align-last. С помощью него мы можем выровнять последнюю строку внутри блока. Это свойство имеет такие же значения как text-align, то есть: start, end, left, center, right и justify. Но кроме них это свойство имеет ещё значение auto. Это значение по умолчанию. Значение auto означает, что последняя строка выравнивается аналогично в соответствии с text-align, но только, если text-align не установлено justify. В этом случае эффект будет таким же, как при установке text-align-last значения start.

CSS
.block-1 {
  text-align: start;
  text-align-last: end; 
}

.block-2 {
  text-align: justify;
  text-align-last: justify; 
}

.block-3 {
  text-align: end;
  text-align-last: start; 
}
CSS-свойство text-align для горизонтального выравнивания последней строки внутри блока

Вертикальное выравнивание (vertical-align)

CSS-свойство vertical-align определяет вертикальное выравнивание строчных боксов (inline box) внутри линии строки. Кроме этого vertical-align ещё используется для выравнивания ячеек таблицы.

Данное свойство по умолчанию имеет значение baseline. Оно означает базовую линию, относительно которой выравнивается по вертикали относительно друг друга весь инлайновый контент этой линий строки. При этом под базовой линией понимается воображаемая линия, на которую опираются символы шрифта.

HTML
<style>
  img {
    display: inline-block;
    width: 3rem;
    height: auto;
  }
</style>

<div>
  <span>Я схожу с ума от CSS.</span>
  <img src="css-logo.svg" alt="CSS3 logo">
</div>
По умолчанию CSS-свойство vertical-align имеет значение baseline. Это значение обозначает, что по вертикали выравниваемый элемент выстраивается по нижней линии текста

Другие значения:

  • top – выравнивает верхнюю границу элемента по верхней границе линии строки;
  • bottom – выравнивает нижнюю границу элемента по нижней границе линии строки;
  • text-top – выравнивает верхнюю границу элемента по верхней линии шрифта;
  • text-bottom – выравнивает нижнюю границу элемента по нижней линии шрифта;
  • middle – выравнивает середину элемента по середине линии строки (середина вычисляется путём добавления к базовой линии шрифта половины высоты символа «x»);
  • sub – выравнивает базовую линию элемента по базовой линии нижнего индекса линии строки;
  • super – выравнивает базовую линию элемента по базовой линии верхнего индекса линии строки.
CSS-свойство vertical-align для выравнивания inline боксов внутри линии строки

Посмотреть

При этом свойство vertical-align необходимо применять не к родителю, а непосредственно к элементу, который необходимо выровнять по вертикали внутри линии строки относительно других элементов.

HTML
<style>
  .emoji {
    vertical-align: text-top;
  }
</style>

<div class="container">
  Я люблю <span class="emoji">🍕</span>
</div>

Помимо ключевых слов можно использовать конкретные значения, используя различные единицы измерения. В этом случае оно будет определять величину смещения базовой линии элемента относительно базовой линии строки. При этом положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательное — вниз.

HTML
<style>
  .emoji {
    vertical-align: 0.5rem;
  }
</style>

<div class="container">
  Я люблю <span class="emoji">🍕</span>
</div>

Кроме этого, задавать значения для vertical-align можно ещё в процентах от высоты строки (line-height).

HTML
<style>
  .emoji {
    vertical-align: 50%;
  }
</style>

<div class="container">
  Я люблю <span class="emoji">🍕</span>
</div>

На практике vertical-align очень часто используют, когда нужно выровнять элемент с display: inline или display: inline-block относительно текста.

HTML
<style>
  .block {
    padding: 0.5rem;
    background-color: #fff176;
  }

  svg {
    /* выровняем нижнюю границу svg-иконки по нижней границе линии строки */
    vertical-align: bottom;
  }
</style>

<div class="block">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
  </svg>
  Home
</div>
Вертикальное выравнивание иконки относительно текста с помощью свойства vertical-align

С появлением флексбоксов выравнивание элементов по вертикали очень часто выполняется с применением этой технологии:

HTML
<style>
  .block {
    display: flex;
    /* выровняем по центру */
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
    background-color: #fff176;
  }
</style>

<div class="block">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
  </svg>
  Home
</div>

Декорактивные линии (text-decoration)

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

  • underline – располагает линию под текстом или иными словами делает текст подчёркнутым (обычно используется для ссылок);
  • line-through – добавляет линию, проходящую прямо через текст, то есть делает его перечёркнутым;
  • overline – размещает линию над текстом или другими словами делает его надчёркнутым (например, может использоваться, чтобы показать );
  • none – отменяет оформление текста.

По умолчанию ссылки <a> имеют нижнее подчёркивание, так как для них в стилях браузера прописано text-decoration: underline.

Ссылки имеют по умолчанию нижнее подчёркивание

Если данный эффект для ссылок не нужен, то его можно убрать:

CSS
a {
  text-decoration: none;
}

При необходимости можно добавить несколько линий тексту, для этого одно ключевое слово следует отделить от другого с помощью пробела:

CSS
p {
  text-decoration: line-through underline;
}
Элемент, к которому добавлено несколько декоравтиных линий с помощью text-decoration

Свойство text-decoration является сокращённым. Оно позволяет указать значения для свойств:

  • text-decoration-line – положение декоративной линии (по умолчанию none);
  • text-decoration-style – стиль линии (по умолчанию solid);
  • text-decoration-color – цвет линии (по умолчанию currentcolor);
  • text-decoration-thickness – толщина линии (по умолчанию auto, то есть определяется браузером).

Например:

CSS
.under {
  text-decoration: underline wavy red 1px;
}

.over {
  text-decoration: overline double orange;
}
Пример использования text-decoration для добавления декоративных эффектов к тексту посредством линий

Регистр текста (text-transform)

text-transform – это CSS-свойство, с помощью которого можно трансформировать буквы в тексте, то есть преобразовывать их регистр. Это свойство учитывает правила отображения регистра для конкретного языка. Оно может принимать следущие значения:

  • uppercase – преобразует все символы в верхний регистр, то есть делает буквы заглавными;
  • lowercase – преобразует все символы в нижний регистр, то есть делает буквы строчными;
  • capitalize – преобразует первую букву каждого слова в верхний регистр, другие символы остаются без изменений;
  • none – отменяет преобразование букв в тексте.
Пример использования text-transform для преобразования регистра текста
HTML
.tt-none {
  text-transform: none;
}

.tt-uppercase {
  text-transform: uppercase;
}

.tt-lowercase {
  text-transform: lowercase;
}

.tt-capitalize {
  text-transform: capitalize;
}

Отступ перед строками (text-indent)

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

На практике используется для придания тексту на странице сируктурированного вида. В основном применяется для выделения первой строки абзаца.

При указании значения в px, rem или других единицах измерения добавляет отступ для первой строки. То есть смещает его на эту величину:

CSS
p {
  text-indent: 4rem;
}

При задании в процентах, величина смещения рассчитывается относительно ширины блока:

CSS
p {
  text-indent: 25%;
}

Межбуквенное расстояние (letter-spacing)

letter-spacing – это CSS-свойство, с помощью которого можно изменить интервал между символами в тексте.

По умолчанию это свойство имеет значение normal, которое означает, что для текущего шрифта используется стандартное расстояние между символами. В отличие от значения 0, это ключевое слово позволяет пользовательскому агенту (браузеру) изменять расстояние между символами для выравнивания текста.

Для увеличения или уменьшения расстояния между символами необходимо указать конкретное значение:

CSS
.el-1 {
  letter-spacing: normal;
}

.el-2 {
  letter-spacing: 0.5em;
}

.el-3 {
  letter-spacing: 3px;
}

.el-4 {
  letter-spacing: -2px;
}
Пример использования letter-spacing для изменения межбуквенного расстояния

Высота линии (line-height)

CSS-свойство line-height устанавливает высоту линии строки. В большинстве случаев используется для задания расстояниями между линиями текста. При установке элементам с display: block, оно определяет минимальную высоту линии. Для элементов со строчным отображением, оно определяет высоту, которая используется для вычисления высоты контейнера строки (line-box).

Интервал между словами (word-spacing)

word-spacing – это CSS-свойство, с помощью которого мы можем управлять размером интервала между словами и тегами в тексте.

По умолчанию это свойство имеет значение normal, которое означает, что для текущего шрифта используется стандартный интервал. То есть к имеющемуся интервалу, определённому используемым шрифтом, дополнительный не применяется, он равен 0.

При необходимости мы можем задать некоторое конкретное значение дополнительному интервалу, используя различные единицы измерения. Положительное значение увеличивает интервал, а отрицательное – уменьшает.

CSS
.element {
  word-spacing: normal; /* нормальный интервал */
  word-spacing: 1rem; /* интервал между словами увеличен на 1rem */
  word-spacing: -0.2em; /* интервал уменьшен на 0.2em */
  word-spacing: 8px; /* интервал увеличен на 8px */
}
CSS-свойство word-spacing, с помощью которого мы можем установить интервал между словами

Тень для текста (text-shadow)

text-shadow – это CSS-свойство, с помощью которого можно добавить тень к тексту. При этом можно указать несколько теней. Отделение одной тени от другой выполняется посредством запятой.

Для описание тени необходимо указать смещения по осям x и у, радиус размытия и цвет. При этом задавать радиус размытия и цвет не обязательно. В этом случае тень будет отображаться без размытия (то есть с радиусом 0), а цвет определяться браузером.

По умолчанию смещения по x и y равны 0. Положительные значения по x и y смещают тень вправо и вниз, а отрицательные соответственно – влево и вверх.

Добавление тени к тексту с помощью CSS-свойства text-shadow
HTML
.item-1 {
  text-shadow: 0.1em 0 #212121;
}

.item-2 {
  text-shadow: 0 0.1em #212121;
}

.item-3 {
  text-shadow: 0.1em 0.1em #212121;
}

.item-4 {
  text-shadow: 0.1em 0.1em 0.1em #212121;
}

Комментарии: 0