Изменение свойств текста

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


форматированный текст

Стиль этого текста изменен при помощи свойств форматирования текста. В заголовке используются свойства text-align, text-transform и color. У параграфа заданы отступы, выравнивание и расстояние между символами.


Цвет текста

Свойство color используется для определения цвета текста.

Цвет можно задать как

  • имя цвета - например, "red",
  • HEX значение - например, "#ff0000",
  • RGB значение - например, "rgb(255,0,0)",
  • HSL значение - например, "hsl(0,100%,50%)",

Цвет текста страницы по умолчанию определяется в селекторе body.


body {
  color: blue;
}

h1 {
  color: green;
}

Цвет текста и фона

В следующем примере мы определяем цвет текста при помощи свойства color и цвет фона при помощи свойства background-color:


body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

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

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

Изменение регистра букв текста

Свойство text-transform позволяет изменить регистр букв текста:

  • text-transform: capitalize - переводит первые буквы всех слов в верхний регистр.
  • text-transform: uppercase - переводит все буквы в верхний регистр.
  • text-transform: lowercase - переводит все буквы в нижний регистр.
  • text-transform: none - попробуйте сами это значение.

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

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

К этому разделу относятся следующие свойства:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

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

Свойство text-align выравнивает текст внутри элемента по горизонтали.

Принимает значения left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру) или justify (равномерное выравнивание по ширине).

В следующем примере текст выравнивается по центру, по левому краю и по правому краю. Выравнивание по левому краю устанавливается по умолчанию, если направление текста слева направо. Если направление текста справа налево, то по умолчанию устанавливается выравнивание по правому краю.


h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Когда свойству text-align установлено значение justify, то строки растягиваются таким образом, чтобы их ширина была одинаковой (как в газетах и журналах):


div {
  text-align: justify;
}

Свойство text-align-last определяет выравнивание последней строки текста.


p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

Направление текста

Свойства direction и unicode-bidi используются для изменения направления текста элемента:


p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Вертикальное выравнивание

Свойство vertical-align определяет вертикальное выравнивание элемента.

Определим вертикальное выравнивание изображения в тексте:


img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

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

К свойствам декоративного оформления текста относятся

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration

Добавление декоративной линии

Для добавления декоративной линии к тексту используется свойство text-decoration-line. Оно может принимать следующие значения:

  • overline - помещает горизонтальную линию над текстом
  • line-through - помещает горизонтальную линию через текст, создавая эффект перечеркивания
  • underline - помещает горизонтальную линию под текст, создавая эффект подчеркивания. Не стоит использовать, так как обычно пользователи предполагают, что подчеркнутый текст - ссылка.

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


h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

Примечание: Не рекомендуется подчеркивать текст, если это не ссылка, так как это может сбить с толку пользователя сайта.

Определение цвета декоративной линии

Чтобы определить цвет декоративной линии используется свойство text-decoration-color.


h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Определение стиля декоративной линии

Чтобы определить стиль декоративной линии используется свойство text-decoration-style.


h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Определение толщины декоративной линии

Чтобы определить толщину декоративной линии используется свойство text-decoration-thickness.


h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

Короткая форма записи

Свойство text-decoration позволяет объединить следующие свойства:

  • text-decoration-line (обязательно)
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

Совет: Все ссылки в HTML по умолчанию имеют подчеркивание. Иногда можно увидеть ссылки, у которых нет подчеркивания. Чтобы убрать подчеркивание у ссылки, используют свойство text-decoration: none;.


a {
  text-decoration: none;
}

Разбивка текста

В этом разделе вы узнаете о следующих свойства, позволяющих форматировать текст:

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

Текстовый отступ

Свойство text-indent используется, чтобы определить отступ первой строки текстового абзаца.

Значением может быть число в любых единицах измерения:


p {
  text-indent: 50px;
}

Расстояние между символами

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

Значением может быть число в любых единицах измерения, либо ключевое слово normal.

В следующем примере показано, как увеличить или уменьшить расстояние между символами:


h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

Высота строки

Свойство line-height используется, чтобы определить расстояние между строками, не влияя на размер шрифта. Значением может быть число (которое будет множителем размера шрифта. Например, "2" означает, что высота строки в два раза больше размера шрифта.), либо проценты, либо слово normal


p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

Расстояние между словами

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

Значением может быть число в любых единицах измерения, либо ключевое слово normal.

В следующем примере показано, как увеличить или уменьшить расстояние между словами:


p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}

Пробельные символы

Свойство white-space определяет, как обрабатываются пробельные символы внутри элемента. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один.

Возможные значения:

  • normal

    Значение по умолчанию. Последовательность пробельных символов сворачивается в один пробел, а переносы строк устанавливаются автоматически.

  • nowrap

    Последовательность пробельных символов сворачивается в один пробел. Текст никогда не переносится на новую строку и выводится в одну линию. Перенос происходит только по тегу <br>.

  • pre

    Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Действует аналогично тегу <pre>.

  • pre-line

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

  • pre-wrap

    В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.

  • inherit

    Значение наследуется от родительского элемента.

  • initial

    Устанавливает значение по умолчанию.


p {
  white-space: nowrap;
}

Тень у текста

Свойство text-shadow добавляет к тексту тень.

При самом простом использовании определяется только горизонтальная (2px) и вертикальная (2px) тень:

Text shadow effect!


h1 {
  text-shadow: 2px 2px;
}

Можно добавить цвет:

Text shadow effect!


h1 {
  text-shadow: 2px 2px red;
}

Также, можно добавить размытие:

Text shadow effect!


h1 {
  text-shadow: 2px 2px 5px red;
}

Еще примеры эффекта тени у текста

Text shadow effect!


h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Text shadow effect!


h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

CSS свойства форматирования текста

Свойство Описание
color Определяет цвет текста
letter-spacing Устанавливает расстояние между символами в тексте
line-height Устанавливает межстрочный интервал текста
text-align Устанавливает горизонтальное выравнивание текста
text-align-last Устанавливает выравнивание последней строки текста
text-decoration Добавляет оформление текста в виде подчеркивания, перечеркивания, линии над текстом в одной декларации
text-decoration-color Устанавливает цвет линии, которая добавляется через свойство text-decoration
text-decoration-line Устанавливает тип оформления текста - подчеркивание, перечеркивание, линия над текстом
text-decoration-style Устанавливает стиль декоративной линии оформления текста
text-intend Устанавливает величину отступа первой строки текстового блока
text-transform Управляет преобразованием текста элемента в заглавные или прописные символы
verical-align Выравнивает элемент по вертикали относительно своего родителя или окружающего текста
white-space Устанавливает, как отображать пробелы между словами
word-spacing Устанавливает расстояние между словами
direction Определяет направление текста
unicode-bidi Вместе со свойством direction определяет, как должен располагаться текст используемого языка
text-shadow Добавляет тень к тексту