Урок 10. Ошибки: Введение в CSS и подключение стилей

📁 Раздел: Основы CSS ⏱️ Время изучения: ~35 мин 🎯 Сложность: Начальная

#link #body

⚡ Кратко

Большинство ошибок CSS диагностируется проверкой селектора, пути к файлу, порядка правил и DevTools.

Типичные ошибки

1. Забыта точка с запятой

Как ломается: без ; браузер «склеивает» два объявления в одно и не понимает их — оба свойства игнорируются, стиль не применяется.

Текст остался чёрным и обычного размера — правило сломано.

/* ❌ нет ; после teal — color и font-size не сработают */
h1 {
  color: teal
  font-size: 24px;
}

Как правильно: каждое объявление завершайте точкой с запятой.

h1 {
  color: teal;
  font-size: 24px;
}

2. Неправильный путь к CSS-файлу

Как ломается: href указывает не туда, где лежит файл — браузер молча не подключает стили, страница остаётся «голой».

Стили по умолчанию: CSS не загрузился из-за неверного пути.

<!-- ❌ файл лежит в css/style.css, а указан корень -->
<link rel="stylesheet" href="style.css">

<!-- ✅ верный путь -->
<link rel="stylesheet" href="css/style.css">

Диагностика: откройте DevTools → вкладка Network. Запрос к CSS со статусом 404 означает «файл не найден по этому пути».

3. Опечатка в названии свойства

Как ломается: браузер не знает свойства colour или bacground и просто пропускает строку — остальные правила при этом работают.

Фон есть, но цвет текста не изменился — опечатка в свойстве.

.note {
  background: #ecfeff;   /* ✅ сработало */
  colour: #0f766e;       /* ❌ опечатка: нет такого свойства */
}

Как правильно: color (американское написание), background. Опечатки удобно ловить в DevTools: неверное свойство показано зачёркнутым.

4. Забыто расширение .css или не сохранён файл

Как ломается: имя указано без .css — файл не найден; либо файл не сохранён — браузер видит старую версию.

Как правильно: полное имя style.css, сохраните оба файла (Ctrl+S) и обновите страницу.