Стили не применились: проверить запрос раньше специфичности
Если страница выглядит неоформленной, причина может находиться до разбора CSS: неверный адрес, ответ HTML вместо файла или блокировка загрузки. Упражнение задаёт последовательность диагностики.
Назначение
Если страница выглядит неоформленной, причина может находиться до разбора CSS: неверный адрес, ответ HTML вместо файла или блокировка загрузки. Упражнение задаёт последовательность диагностики.
Как это работает
Начните с link rel="stylesheet" и его итогового URL. Затем изучите запрос в Network: статус, перенаправления, Content-Type и тело. Только после подтверждения загрузки переходите к селекторам, каскаду и вычисленным значениям.
Пример
<link rel="stylesheet" href="/assets/site.css">
<!-- Порядок проверки в браузере: -->
<!-- 1. Запрошен ли ожидаемый URL? -->
<!-- 2. Вернулся ли CSS с Content-Type: text/css? -->
<!-- 3. Нет ли ошибки блокировки в консоли? -->
<!-- 4. Совпадает ли селектор с нужным элементом? -->Что должно получиться
Диагностика отделяет сетевую ошибку от ошибки правил оформления. Если вместо файла пришла страница входа или HTML-заглушка, добавление !important ничего не исправит.
Граница применения и частая ошибка
Статус 200 не доказывает правильность содержимого. Не удаляйте защитные заголовки и не ослабляйте CSP, пока не установлена причина. Кеш может сохранять прежний ответ, поэтому сравнивайте обычную загрузку и контролируемую проверку без кеша.
Самостоятельная проверка
Создайте в тестовом проекте рабочий CSS-файл, затем по одной меняйте ссылку, селектор и свойство. Для каждой поломки запишите наблюдаемый признак и точное исправление. Верните рабочее состояние перед следующим опытом.