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

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

⚡ Кратко

CSS управляет внешним видом HTML: цветами, шрифтами, отступами, рамками и расположением. В рабочем проекте стили обычно выносят в отдельный файл и подключают через <link rel="stylesheet">.

Главная идея

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

HTML — это скелет человека: он задаёт, где голова, где руки, где ноги. CSS — это одежда и стиль: цвет рубашки, фасон, причёска. Скелет один и тот же, но, меняя «одежду», вы превращаете строгий деловой образ в спортивный — не ломая ни одной кости. Точно так же одна и та же HTML-разметка с разными CSS-файлами выглядит совершенно по-разному.

Как устроено CSS-правило

Любой CSS состоит из правил. Одно правило — это селектор (кого стилизуем) и блок объявлений в фигурных скобках. Внутри блока — пары свойство: значение, каждая заканчивается точкой с запятой. Разберём анатомию правила по частям:

h1 { color : teal ; } селектор — кого стилизуем { } — блок объявлений свойство — что меняем значение — как именно ; — конец объявления (обязательна!)
Правило h1 { color: teal; } — «сделать все заголовки h1 цвета морской волны».

Три способа подключить CSS к HTML

Браузер должен где-то взять правила. Есть три места, куда их можно положить:

  • Inline (атрибут style) — стиль пишется прямо на элементе: <p style="color: red">. Действует только на этот один элемент. Годится для быстрой проверки, но плохо масштабируется.
  • Внутренний (<style> в <head>) — блок правил внутри самой HTML-страницы. Стили видны всей странице, но только этой одной.
  • Внешний файл (<link rel="stylesheet">) — правила лежат в отдельном файле style.css и подключаются в <head>. Один файл — на сотни страниц. Это основной способ в реальных проектах и на курсе.

Как CSS связывается с HTML

Внешний файл подключают в <head> тегом <link rel="stylesheet" href="style.css">. Браузер читает <head> первым, загружает CSS до отрисовки страницы — поэтому контент появляется уже оформленным, без «прыжка» из неоформленного вида. Атрибут href указывает путь к файлу: если путь неверный, стили молча не применятся.

Почему это важно

Разделение «структура отдельно, оформление отдельно» — основа поддерживаемого кода. Дизайнер меняет один CSS-файл — обновляется весь сайт. HTML остаётся чистым и читаемым. Если стили вдруг не применились, проверяют по порядку: путь к файлу, имя, расширение .css, регистр букв и сохранены ли изменения.

Проверка понимания: откройте пример из раздела «Примеры» и объясните, какая строка отвечает за видимый результат в браузере и каким из трёх способов он подключён.