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

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

⚡ Кратко

Сначала прочитайте пояснение, затем перепечатайте пример и измените одно значение.

Рабочие примеры

В каждом примере сверху — реальный результат, рядом — код. Сравнивайте «до и после стилизации».

1. До стилизации: голый HTML

Один и тот же HTML без единого CSS-правила. Браузер показывает стили по умолчанию: крупный чёрный заголовок, обычный абзац, маркированный список.

Карточка курса

CSS делает страницу читаемой и аккуратной.

  • HTML
  • CSS
<h2>Карточка курса</h2>
<p>CSS делает страницу читаемой и аккуратной.</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

2. После стилизации: тот же HTML + CSS

Разметка не изменилась — добавился CSS. Фон, цвет заголовка, шрифт, отступы и рамка превратили «голый» текст в аккуратную карточку.

Карточка курса

CSS делает страницу читаемой и аккуратной.

  • HTML
  • CSS
.card {
  font-family: sans-serif;
  background: #ecfeff;
  border: 1px solid #99f6e4;
  border-radius: 12px;
  padding: 20px;
}
.card h2 { color: #0f766e; }

3. Способ 1 — inline (атрибут style)

Стиль пишется прямо на элементе. Действует только на этот абзац.

Важное предупреждение

<p style="color: #b91c1c; font-size: 20px; font-weight: bold;">
  Важное предупреждение
</p>

4. Способ 2 — внутренний <style> в <head>

Блок правил живёт внутри HTML-страницы и применяется ко всем подходящим элементам этой страницы.

Подсказка из блока <style>

<head>
  <style>
    .hint {
      background: #fef9c3;
      color: #854d0e;
      padding: 10px 14px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <p class="hint">Подсказка из блока &lt;style&gt;</p>
</body>

5. Способ 3 — внешний файл (рекомендуется)

Правила в отдельном style.css, подключённом тегом <link>. Один файл — на все страницы сайта.

Первая CSS-страница

<!-- index.html -->
<head>
  <meta charset="UTF-8">
  <title>Первая CSS-страница</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Первая CSS-страница</h1>
</body>
/* style.css */
body {
  font-family: sans-serif;
  background: #f4f7fb;
  color: #1f2937;
}
h1 { color: #0f766e; }
Эксперимент: возьмите пример 2, поменяйте в коде background или color и предскажите, как изменится превью.