Введение в CSS

CSS (Cascading Style Sheets) — язык стилей, который описывает ВНЕШНИЙ ВИД HTML-элементов. HTML создаёт структуру, CSS — покраска и оформление. CSS подключается тремя способами: через <style> в head, через <link> на внешний файл, или через inline-атрибут style.

HTML — каркас. CSS — отделка. Без CSS страница — чёрный текст на белом фоне. CSS превращает «скелет» в красивую страницу.

Три способа подключения CSS:

• Внешний файл (рекомендуется):

<link rel="stylesheet" href="style.css"> Чисто, переиспользуемо, кэшируется браузером.

• Внутри <style> в <head>:

<style> p { color: red; } </style> Удобно для быстрого прототипирования.

• Inline-стили (не рекомендуется):

<p style="color: red;">Текст</p> Нарушает разделение HTML/CSS.

Структура CSS-правила: selector { property: value; }

Селектор — КАКИЕ элементы стилизовать. Свойство — ЧТО менять (цвет, размер, отступ). Значение — КАК менять (red, 16px, 10px).

CSS — как покраска здания. HTML — стены ( белые, голые ). CSS — краска, обои, мебель. Селектор — «покрась ЭТИ стены». Свойство — «в КАКОЙ цвет». Значение — «красный».

**Самый простой:**

<!-- В HTML -->
<link rel="stylesheet" href="style.css">

/* В style.css */
p {
  color: blue;
  font-size: 18px;
}

Самый простой CSS: подключили файл и окрасили все параграфы в синий.

**Простой:**

/* Все заголовки — красные */
h1, h2, h3 {
  color: #e74c3c;
}

/* Параграфы — серый текст */
p {
  color: #555;
  line-height: 1.6;
}

/* Ссылки без подчёркивания */
a {
  text-decoration: none;
  color: #3498db;
}

Группировка селекторов и базовые свойства.

**Реальный пример:**

/* style.css — подключается через <link> */

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fafafa;
  color: #333;
}

h1 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

a:hover {
  color: #2980b9;
}

Реальный CSS для простого блога: типографика, центрирование, ссылки.

**Неправильно:** Использовать inline-стили повсюду

**Почему:** Inline-стили difficult to maintain, impossible to кэшировать, нарушают разделение HTML/CSS.

**Правильно:** Используйте внешние CSS-файлы. Inline — только для динамических стилей из JavaScript.

**Неправильно:** Путать property и value

**Почему:** property: value — порядок важен! color: red (правильно). red: color (неправильно).

**Правильно:** Всегда: property: value; Точка с запятой обязательна.

**Неправильно:** Забывать точку с запятой

**Почему:** Без ; браузер не понимает, где заканчивается свойство. Следующее правило может сломаться.

**Правильно:** Каждое свойство заканчивается точкой с запятой: color: red; font-size: 16px;

• CSS описывает ВНЕШНИЙ ВИД HTML-элементов
• Внешний файл — лучший способ подключения
• Селектор { свойство: значение; } — базовый синтаксис
• Точка с запятой после каждого свойства
• CSS не меняет HTML — он стилизует его

Назад: Этот урок требует базовых знаний HTML (H1). CSS — следующий шаг после разметки.

Вперёд: В следующем уроке (C2) вы изучите селекторы и наследование — как CSS-правила находят нужные элементы.

• MDN: CSS
• MDN: первые шаги в CSS