Урок 10. Старый vs Новый: Введение в CSS и подключение стилей

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

⚡ Кратко

Сравнивайте не только внешний результат, но и удобство поддержки кода.

Сравнение подходов

Внешне результат может быть одинаковым — разница в поддержке. Когда нужно поменять цвет у трёх предупреждений, inline заставит править три места, внешний CSS — одно.

❌ Старый подход: inline-стили повсюду

Один и тот же стиль скопирован на каждый элемент. Чтобы сменить цвет, придётся найти и поправить каждую строку.

Ошибка соединения

Ошибка авторизации

Ошибка оплаты

<p style="color: #b91c1c; font-size: 18px;">Ошибка соединения</p>
<p style="color: #b91c1c; font-size: 18px;">Ошибка авторизации</p>
<p style="color: #b91c1c; font-size: 18px;">Ошибка оплаты</p>

✅ Современный подход: внешний CSS + класс

Стиль описан один раз в style.css. HTML остаётся смысловым, а цвет всех ошибок меняется правкой одной строки.

Ошибка соединения

Ошибка авторизации

Ошибка оплаты

<!-- index.html -->
<p class="error">Ошибка соединения</p>
<p class="error">Ошибка авторизации</p>
<p class="error">Ошибка оплаты</p>
/* style.css — одно место правки */
.error {
  color: #b91c1c;
  font-size: 18px;
}
Вывод: inline уместен лишь для быстрой проверки или точечного исключения. Базовый рабочий способ — внешний файл со стилями по классам.