W3docs
ru
Войти

CSS Текст

Основы стилизации текста с помощью CSS: цвет, выравнивание, оформление, тени и другие свойства. С примерами.

CSS даёт детальный контроль над внешним видом текста. На этой странице рассмотрены основные текстовые свойства, которые используются чаще всего: что делает каждое из них, какие значения принимает и минимальный рабочий пример для каждого. Каждое свойство ссылается на отдельный раздел, где можно узнать подробнее.

Цвет текста

Свойство color задаёт цвет текста элемента (и, по умолчанию, его текстовых украшений, например подчёркивания). Значение можно указать в виде ключевого слова (red), HEX-значения (#ff0000), значения rgb() / rgba() (rgb(255 0 0)) или значения hsl(). Поскольку color наследуется, установка его на контейнере применяется ко всему тексту потомков, если только дочерний элемент не переопределяет его.

Пример использования свойства CSS color:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>
Попробуйте сами »

Результат

Цвет текста

Выравнивание текста

Свойство выравнивания используется для выравнивания текста внутри элемента по левому краю, правому краю, по центру и т.д.

Выравнивание текста имеет четыре значения:

  • Left (text-align: left) — выравнивает текст по левому краю
  • Right (text-align: right) — выравнивает текст по правому краю
  • Center (text-align: center) — помещает текст по центру страницы
  • Justify (text-align: justify) — растягивает строку текста так, чтобы оба края совпадали (как в журналах и газетах)

По умолчанию браузеры выравнивают текст по началу строки — по левому краю в языках с написанием слева направо, например в русском. Используйте соответствующее значение, если нужно другое выравнивание. Для выравнивания с учётом направления текста предпочтительнее использовать логические ключевые слова start и end вместо left и right.

Пример использования свойства CSS text-align:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>
Попробуйте сами »

Оформление текста

Свойство text-decoration добавляет линии к тексту. В современном CSS это сокращение для CSS text-decoration-line, CSS text-decoration-color и CSS text-decoration-style. Наиболее распространённые значения для части text-decoration-line:

  • Overline (text-decoration: overline) — рисует линию над текстом
  • Underline (text-decoration: underline) — рисует линию под текстом
  • Line-through (text-decoration: line-through) — рисует линию через середину текста
  • None (text-decoration: none) — убирает любое оформление; это значение используется для удаления подчёркивания у ссылок по умолчанию

Пример использования свойства CSS text-decoration:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>
Попробуйте сами »

Результат

Оформление текста

Преобразование текста

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

Свойство преобразования принимает следующие значения:

  • Uppercase (text-transform: uppercase) — переводит все символы в верхний регистр
  • Lowercase (text-transform: lowercase) — переводит все символы в нижний регистр
  • Capitalize (text-transform: capitalize) — переводит первый символ каждого слова в верхний регистр
  • None (text-transform: none) — оставляет текст в том виде, в котором он набран; это значение по умолчанию

Помните, что text-transform изменяет только отображение текста — содержимое HTML остаётся точно таким, каким вы его написали, что важно для копирования и доступности.

Пример использования свойства CSS text-transform:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>
Попробуйте сами »

Результат

Преобразование текста

Тень текста

Свойство text-shadow добавляет одну или несколько теней к тексту. Каждая тень описывается не более чем четырьмя значениями в следующем порядке:

text-shadow: h-shadow v-shadow blur-radius color;
  • h-shadow (обязательное) — горизонтальное смещение; положительное значение сдвигает тень вправо, отрицательное — влево.
  • v-shadow (обязательное) — вертикальное смещение; положительное значение сдвигает тень вниз, отрицательное — вверх.
  • blur-radius (необязательное) — степень размытия тени; большие значения делают тень более размытой (по умолчанию 0).
  • color (необязательное) — цвет тени; если не указан, браузер использует свойство color элемента.

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

Пример использования свойства CSS text-shadow:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-shadow: 2px 2px 4px #888888;
      }
      h2 {
        /* Two shadows stacked to create a glow */
        text-shadow: 0 0 6px #ff0000, 0 0 12px #ff0000;
      }
    </style>
  </head>
  <body>
    <h1>Heading with a soft drop shadow</h1>
    <h2>Heading with a red glow</h2>
  </body>
</html>

Смотрите раздел CSS text-shadow для получения дополнительных примеров.

Отступ текста

Свойство отступа текста используется для указания длины пустого пространства первой строки в текстовом блоке. Для этого свойства допустимы следующие значения:

  • Length — задаёт отступ в px, pt, cm, em и т.д. Значение по умолчанию равно 0. Отрицательные значения допустимы.
  • Percentage — задаёт отступ в процентах от ширины содержащего блока.
  • Each-line — отступ применяется к первой строке, а также к каждой строке после принудительного переноса, но не применяется к строкам после мягкого переноса.
  • Hanging — инвертирует применение отступа: первая строка не имеет отступа.
  • Initial — устанавливает свойство в значение по умолчанию.
  • Inherit — наследует свойство от родительского элемента.

Пример использования свойства CSS text-indent:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Text Indentation Example</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Попробуйте сами »

Межбуквенный интервал

Свойство CSS letter-spacing позволяет задавать расстояние между буквами/символами в тексте. Это свойство поддерживает следующие значения:

  • Normal — дополнительных пробелов между символами не будет. Это значение по умолчанию.
  • Length — задаёт дополнительное расстояние между символами. Отрицательные значения допустимы.
  • Initial — устанавливает свойство в значение по умолчанию.
  • Inherit — наследует свойство от родительского элемента.

Пример использования свойства CSS letter-spacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: 5px;
      }
      h3 {
        letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <h2>Example of letter-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Here is some text with letter-spacing property.
    </h3>
  </body>
</html>
Попробуйте сами »

Межстрочный интервал

Свойство line-height задаёт межстрочный интервал. Оно используется для установки интерлиньяжа строк текста. Если значение line-height больше значения font-size элемента, разница составит интерлиньяж текста. Поддерживаются следующие значения:

  • Normal — задаёт нормальный межстрочный интервал. Это значение по умолчанию.
  • Length — задаёт фиксированную высоту строки в px, cm и т.д.
  • Number — задаёт число, которое умножается на текущий размер шрифта для вычисления высоты строки.
  • % — задаёт высоту строки в процентах от текущего размера шрифта.
  • Initial — устанавливает свойство в значение по умолчанию.
  • Inherit — наследует свойство от родительского элемента.

Безразмерное значение number (например, line-height: 1.5) обычно является наиболее безопасным выбором, поскольку масштабируется с учётом собственного размера шрифта каждого элемента и позволяет избежать неожиданных результатов при наследовании.

Пример использования свойства CSS line-height:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 30px;
      }
      h3 {
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <h2>Example of line-height property</h2>
    <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3> 
  </body>
</html>
Попробуйте сами »

Межсловный интервал

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

  • Normal — задаёт нормальный межсловный интервал. Это значение по умолчанию.
  • Length — задаёт дополнительный межсловный интервал. Можно указать в px, pt, cm, em и т.д. Отрицательные значения допустимы.
  • Initial — устанавливает свойство в значение по умолчанию.
  • Inherit — наследует свойство от родительского элемента.

Пример использования свойства CSS word-spacing:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        word-spacing: 1em;
      }
      h3 {
        word-spacing: -3px;
      }
      span {
        display: block;
        word-spacing: 3rem;
      }
    </style>
  </head>
  <body>
    <h2>Example of word-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3>
    <span>
    Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </span>
  </body>
</html>
Попробуйте сами »

Практика

Практика
Какие из следующих свойств можно использовать для управления внешним видом текста в CSS?
Какие из следующих свойств можно использовать для управления внешним видом текста в CSS?
Was this page helpful?