Как оформить текст: 11 главных CSS-свойств

У любого текстового элемента есть свои стили по умолчанию. Заголовки крупные и жирные, текст в абзацах нормального размера и начертания, а ссылки обычно синие и подчёркнутые снизу.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Давайте посмотрим, как это сделать.

💡 Для каждого стиля мы подготовили пример в CodePen — попробуйте поменять значения и посмотрите, как изменится текст.

Сменить шрифт

Чтобы изменить шрифт элемента, используйте CSS-свойство font-family:

body {
  font-family: 'Roboto', Arial, sans-serif;
}

Первым указывается шрифт, который вы хотите добавить. После него через запятую идут альтернативные шрифты. Например, если на компьютере у посетителя сайта не установлен шрифт Roboto, браузер использует шрифт Arial.

Как подключить шрифт на страницу

Изменить цвет и размер текста

Цвет текста задаётся с помощью свойства color. Оно принимает значения в различных форматах: можно написать название цвета (red, blue), шестнадцатеричное значение (#ff0000, #00f) или функцию rgb(), чтобы задать цвет с помощью трёх чисел.

p {
  color: red; /* Красный с помощью слов */
  color: #ff0000; /* Красный с помощью HEX */
  color: rgb(1.0,0.0,0.0); /* Красный с помощью rgb() */
}

Размер текста меняется свойством font-size. Оно принимает значения в пикселях (px), процентах (%) и других единицах измерения.

h1 {
  font-size: 24px;
}

See the Pen Как поменять цвет и размер шрифта by Feizerr (@feizerr) on CodePen.

Добавить жирность

Свойство font-weight задаёт жирность текста. Оно принимает два вида значений.

Численные: от 100 до 900. Например, 400 — обычный шрифт, а 700 — полужирный.

Ключевые слова: normal — обычный шрифт, bold — полужирный, bolder — жирнее, чем текущий, lighter — менее жирный шрифт по сравнению с текущим.

p {
  font-weight: bold; /* Полужирный с помощью ключевого слова */
  font-weight: 700; /* Полужирный с помощью численного значения */
}

See the Pen Untitled by Feizerr on CodePen.

Сделать текст курсивным

Для этого есть свойство font-style. По умолчанию у него стоит значение normal, то есть текст обычный, без курсива. Чтобы поменять начертание, используйте:

italic — делает текст курсивным;
oblique — делает текст наклонным.

p {
  font-style: italic;
}

Оба значения создают похожий эффект — текст выглядит курсивным, но есть и разница. Если очень упростить, то italic и oblique немного отличаются в начертании. А ещё не у всех шрифтов есть специальная курсивная версия. В таких случаях oblique делает текст похожим на курсив.

See the Pen Как сделать курсивный текст by Feizerr on CodePen.

Преобразовать текст

Свойство text-transform меняет регистр текста. Оно принимает значения:

none — без изменений, значение по умолчанию;
uppercase — все буквы становятся прописными;
lowercase — все буквы становятся строчными;
capitalize — первая буква каждого слова находится в верхнем регистре.

p {
  text-transform: uppercase;
}

See the Pen Как изменить text-decoration by Feizerr on CodePen.

Добавить подчёркивание

Свойство text-decoration добавляет тексту декоративные эффекты:

overline создаёт линию над текстом,
line-through делает текст зачёркнутым,
underline добавляет подчёркивание.

p {
  text-decoration: overline;
}

По умолчанию у свойства стоит значение none — без оформления.

See the Pen Как добавить подчёркивание by Feizerr on CodePen.

Создать тень

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

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5)
/*смещение по горизонтали, смещение по вертикали, радиус размытия, цвет тени */

See the Pen Как добавить тень тексту by Feizerr on CodePen.

Выровнять текст

Свойство text-align выравнивает текст по горизонтали. Оно принимает значения:

left — влево;
right — вправо;
center — по центру;
justify — выравнивание по ширине.

See the Pen Как выровнять текст by Feizerr on CodePen.

Изменить высоту строки и межбуквенное расстояние

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

p {
  line-height: 1.5;
  letter-spacing: 2px;
}

See the Pen Как изменить высоту строки by Feizerr on CodePen.

Нюансы

У некоторых шрифтов нет жирного и курсивного варианта.
Свойство text-shadow делает текст эффектным, но слишком насыщенные тени могут усложнить чтение текста или создать плохой контраст.
Слишком большое или маленькое значение line-height и letter-spacing может нарушить интервалы между буквами и строками.
При изменении размера шрифта (font-size) следует учитывать, что очень мелкий и крупный текст может плохо отображаться или стать нечитабельным.

Журнал «Доктайп»