Стиль

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

Итоговый стиль элемента редко берётся из одного места. Браузер собирает его из стилей по умолчанию, правил сайта, унаследованных от родителя значений и стилей, добавленных скриптами, а спорные случаи решает каскад. Результат называют вычисленным стилем.

Три способа задать стиль

<!-- 1. Внешний файл — основной способ -->
<link rel="stylesheet" href="/css/main.css">

<!-- 2. Блок в документе — для критичных стилей первого экрана -->
<style> .hero { min-height: 60vh; } </style>

<!-- 3. Атрибут элемента — для разовых значений из CMS или скрипта -->
<div class="progress" style="width: 40%"></div>

Внешний файл кешируется и переиспользуется всеми страницами — подробнее в статье про таблицу стилей. Атрибут style перебивает почти любые правила из файлов, поэтому злоупотреблять им не стоит: такой стиль трудно переопределить и нельзя изменить в медиазапросе.

Как узнать итоговый стиль

Во вкладке Elements инструментов разработчика есть панель Computed: она показывает окончательное значение каждого свойства и правило, откуда оно пришло. Из скрипта то же значение читает getComputedStyle():

const color = getComputedStyle(link).color; // "rgb(30, 111, 217)"

Цвета возвращаются в формате rgb(), а размеры — в пикселях, даже если в CSS были записаны в rem или процентах.

Стили в WordPress

В современных темах WordPress стили задаются на нескольких уровнях: глобальные настройки темы в файле theme.json, вариации оформления блоков, индивидуальные настройки конкретного блока в редакторе. Вариации, которые редактор показывает на панели блока, описаны в статье про стили блока. Договорённости о том, каким должен быть стиль во всём проекте, фиксируют в руководстве по стилю.