Стилизация текста в CSS — цвет, жирность, decoration

CSS предоставляет богатый набор свойств для работы с текстом: цвет, жирность, подчёркивание, выравнивание, трансформации регистра, межбуквенный интервал. Разбираем каждое свойство с готовыми примерами.

color — цвет текста

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

/* Основные форматы цвета */
p    { color: #333333; }         /* hex */
h1   { color: #2563eb; }         /* hex */
a    { color: rgb(37, 99, 235); } /* rgb */
span { color: hsl(220, 90%, 56%); } /* hsl */

/* Именованные цвета */
.red   { color: red; }
.white { color: white; }

/* Ссылки по состояниям */
a         { color: #1d4ed8; }
a:hover   { color: #1e40af; }
a:visited { color: #7c3aed; }
a:active  { color: #dc2626; }

/* Наследование цвета */
.card {
  color: #374151;  /* задаём один раз на контейнере */
}
/* Всё внутри .card наследует этот цвет */

.special {
  color: inherit;  /* явно взять цвет от родителя */
}

/* Текущий цвет через currentColor */
.icon {
  color: #2563eb;
  border: 2px solid currentColor;  /* рамка того же цвета что текст */
}
.icon svg {
  fill: currentColor;  /* SVG иконка цвета текста */
}

font-weight — жирность текста

Управляет толщиной начертания. Браузер автоматически подбирает ближайшее доступное начертание шрифта.

/* Числовые значения (предпочтительны) */
.thin     { font-weight: 100; }
.light    { font-weight: 300; }
.regular  { font-weight: 400; }  /* дефолт для body */
.medium   { font-weight: 500; }
.semibold { font-weight: 600; }
.bold     { font-weight: 700; }  /* дефолт для h1-h6, strong */
.black    { font-weight: 900; }

/* Ключевые слова */
p      { font-weight: normal; }  /* = 400 */
strong { font-weight: bold; }    /* = 700 */

/* Сделать ЖИРНЫМ через CSS */
.title    { font-weight: 700; }

/* Сделать НЕжирным (например, убрать жирность у заголовка) */
h2.light  { font-weight: 400; }

/* Полужирный — популярный вариант для подзаголовков */
h3        { font-weight: 600; }

/* Важно: нужно подключить нужные начертания шрифта.
   Если Inter подключён только с weight 400 и 700,
   font-weight: 300 браузер заменит на 400 */

text-decoration — подчёркивание и другие украшения

text-decoration — shorthand для линий вокруг текста: под, над, сквозь. Часто используется для стилизации ссылок.

/* Убрать подчёркивание у ссылок */
a { text-decoration: none; }

/* Подчёркивание */
.underline { text-decoration: underline; }

/* Подчёркивание с цветом и стилем */
.underline-fancy {
  text-decoration: underline solid #2563eb 2px;
  /* линия цвет стиль толщина */
}

/* Перечёркивание — зачёркнутый текст */
.strikethrough { text-decoration: line-through; }

/* Старая цена перечёркнутая */
.old-price {
  text-decoration: line-through;
  color: #9ca3af;
  font-size: 0.875rem;
}

/* Надчёркивание */
.overline { text-decoration: overline; }

/* Несколько эффектов через пробел */
.fancy {
  text-decoration: underline overline dotted red;
}

/* Стили линии */
.solid  { text-decoration: underline solid; }    /* по умолчанию */
.double { text-decoration: underline double; }
.dotted { text-decoration: underline dotted; }
.dashed { text-decoration: underline dashed; }
.wavy   { text-decoration: underline wavy; }     /* волнистое */

/* text-decoration-color — только цвет линии */
a {
  color: #111;                     /* текст чёрный */
  text-decoration-color: #2563eb;  /* линия синяя */
}

/* Hover — анимировать появление подчёркивания */
a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
a:hover {
  border-bottom-color: #2563eb;
}

text-align — выравнивание текста

/* Основные значения */
p { text-align: left; }     /* по умолчанию (в LTR языках) */
p { text-align: center; }   /* по центру */
p { text-align: right; }    /* по правому краю */
p { text-align: justify; }  /* по ширине блока */

/* По ширине с последней строкой по левому краю */
.article p {
  text-align: justify;
}

/* Заголовки по центру */
h1, h2 {
  text-align: center;
}

/* Цена по правому краю в таблице */
td.price {
  text-align: right;
  font-variant-numeric: tabular-nums;  /* цифры одной ширины */
}

/* start / end — учитывает направление языка (RTL/LTR) */
.caption {
  text-align: start;   /* left в LTR, right в RTL */
}

/* Важно: text-align работает только на блочных элементах */
/* span { text-align: center } — не работает */
/* div  { text-align: center } — работает */

text-transform — изменение регистра

/* Варианты */
.uppercase  { text-transform: uppercase; }   /* ВСЕ ЗАГЛАВНЫЕ */
.lowercase  { text-transform: lowercase; }   /* все строчные */
.capitalize { text-transform: capitalize; }  /* Каждое Слово */
.none       { text-transform: none; }        /* без изменений */

/* Практические применения */

/* Навигация и кнопки — заглавными */
.nav-link {
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Инициалы / аватар */
.avatar-initials {
  text-transform: uppercase;
}

/* Заголовок карточки — первая буква заглавная (через JS вводим) */
.card-title {
  text-transform: capitalize;
}

/* Сбросить text-transform у дочернего элемента */
.uppercase .normal {
  text-transform: none;
}

letter-spacing и word-spacing

/* letter-spacing — интервал между буквами (трекинг) */
h1         { letter-spacing: -0.03em; }  /* плотнее — для крупных заголовков */
.body-text { letter-spacing: 0; }        /* по умолчанию */
.subtitle  { letter-spacing: 0.05em; }  /* немного шире */

/* Популярный стиль: капс с широким трекингом */
.label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
}

/* word-spacing — интервал между словами */
p { word-spacing: 0; }            /* по умолчанию */
p { word-spacing: 0.05em; }       /* чуть шире */
.justified { word-spacing: auto; } /* авто при justify */

/* Примеры типографики */
.hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;  /* крупные заголовки лучше смотрятся плотнее */
  line-height: 1.1;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
  font-weight: 700;
  color: #2563eb;
}

text-shadow — тень текста

/* text-shadow: смещение-x смещение-y размытие цвет */

/* Лёгкая тень */
h1 { text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2); }

/* Чёткая тень без размытия */
.hard-shadow { text-shadow: 3px 3px 0 #000; }

/* Белое свечение — на тёмном фоне */
.glow {
  color: white;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
               0 0 20px rgba(255, 255, 255, 0.4);
}

/* Синее свечение */
.neon {
  color: #00d4ff;
  text-shadow:
    0 0 5px #00d4ff,
    0 0 20px #00d4ff,
    0 0 40px #00d4ff;
}

/* Убрать тень */
.no-shadow { text-shadow: none; }

/* Несколько теней через запятую */
.deep-shadow {
  text-shadow:
    1px 1px 0 rgba(0,0,0,0.1),
    2px 2px 0 rgba(0,0,0,0.08),
    3px 3px 0 rgba(0,0,0,0.06);
}

white-space и text-overflow — обрезка текста

Обрезать длинный текст многоточием — один из самых популярных паттернов CSS. Вот полный набор решений.

/* Однострочная обрезка с многоточием */
.truncate {
  white-space: nowrap;       /* не переносить на новую строку */
  overflow: hidden;          /* скрыть лишнее */
  text-overflow: ellipsis;   /* добавить ... */
  max-width: 200px;          /* нужен ограничитель ширины */
}

/* Применение: карточка с длинным заголовком */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Многострочная обрезка — обрезать через N строк */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* количество строк */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Стандартный (новый) способ — line-clamp */
.clamp-modern {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;  /* будущий стандарт */
}

/* white-space значения */
.nowrap    { white-space: nowrap; }     /* без переносов */
.pre       { white-space: pre; }        /* как <pre> — пробелы сохраняются */
.pre-wrap  { white-space: pre-wrap; }   /* пробелы + переносы */
.pre-line  { white-space: pre-line; }   /* переносы строк сохраняются */
.normal    { white-space: normal; }     /* по умолчанию */

/* Пример: таблица с ячейками в одну строку */
.table th {
  white-space: nowrap;
}

Дополнительные свойства текста

/* font-style — курсив */
em, i    { font-style: italic; }
.normal  { font-style: normal; }  /* убрать курсив */

/* font-variant — малые капители */
.small-caps { font-variant: small-caps; }
/* ЗАГЛАВНЫЕ буквы имеют нормальный размер, строчные — чуть меньше */

/* text-indent — отступ первой строки */
.article p {
  text-indent: 1.5em;  /* абзацный отступ */
}

/* word-break — перенос длинных слов */
.break-all  { word-break: break-all; }   /* агрессивный перенос */
.break-word { overflow-wrap: break-word; } /* только если не помещается */

/* hyphens — автоматические переносы */
p {
  hyphens: auto;
  -webkit-hyphens: auto;
  lang: "ru";  /* нужен lang атрибут на html: <html lang="ru"> */
}

/* writing-mode — вертикальный текст */
.vertical {
  writing-mode: vertical-rl;  /* вертикально справа налево */
}
.vertical-lr {
  writing-mode: vertical-lr;  /* вертикально слева направо */
}

/* user-select — запрет/разрешение выделения */
.no-select   { user-select: none; }   /* нельзя выделить */
.select-all  { user-select: all; }    /* выделяется целиком по клику */

Таблица свойств стилизации текста

Часто задаваемые вопросы

Как перечеркнуть текст в CSS?

Используй text-decoration: line-through. Можно управлять цветом линии отдельно от цвета текста: text-decoration-color: #dc2626. Для стилизации старой цены: .old-price { text-decoration: line-through; color: #9ca3af; }. Если нужна перечёркнутая линия через всю ширину блока (а не под текстом), используй псевдоэлемент: .item::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }.

Как сделать текст прозрачным в CSS?

Три способа: 1) color: transparent — текст невидим, место занимает. 2) opacity: 0 — весь элемент невидим вместе с текстом. 3) color: rgba(0, 0, 0, 0) — прозрачный через rgba. Для красивых эффектов: -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(135deg, #2563eb, #7c3aed) — текст с градиентной заливкой. Работает в Chrome, Safari, Firefox.

text-decoration-color — как покрасить только линию?

Свойство text-decoration-color управляет только цветом линии, не трогая цвет текста. Пример: ссылка с чёрным текстом и синей линией — a { color: #111; text-decoration: underline; text-decoration-color: #2563eb; }. Можно сочетать с text-decoration-thickness для толщины и text-underline-offset для смещения линии вниз: text-underline-offset: 4px — популярный способ сделать подчёркивание элегантнее.