💻 Практические примеры

⚡ Минимальный рабочий пример

Смотри на «Результат» рядом с кодом. Достаточно создать index.html и style.css, связать их через <link> и открыть файл в браузере — работает и через Live Server, и при прямом открытии с диска.

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

Пример 1. Голый HTML без CSS — «как в 1991-м»

Самые ранние страницы выглядели именно так: браузер применял только свои стили по умолчанию. Смысл понятен, но оформления почти нет.

Мой сайт

Привет, мир! Это страница без стилей.

  • Первый пункт
  • Второй пункт
Ссылка на другую страницу 
<!-- index.html: только структура, без подключённого CSS -->
<h1>Мой сайт</h1>
<p>Привет, мир! Это страница без стилей.</p>
<ul>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
</ul>
<a href="#">Ссылка на другую страницу</a>

Пример 2. Та же страница со стилями — «как сейчас»

Разметка та же самая — мы лишь подключили CSS. Смысл не изменился, изменился только внешний вид.

Мой сайт

Привет, мир! Это страница со стилями.

  • Первый пункт
  • Второй пункт
Ссылка на другую страницу → 
/* style.css — подключается тем же HTML через <link> */
body { font-family: system-ui, sans-serif; }
.hero {
  background: #f5f8ff;
  border: 1px solid #c7d5ff;
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
}
h1 { color: #1f3b73; }
a  { color: #2563eb; text-decoration: none; font-weight: 600; }

Пример 3. Минимальный шаблон страницы целиком

Базовый каркас, который связывает документ и оформление: <link> подключает внешний CSS.

HTML & CSS

Привет, мир!

<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Первый урок</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><h1>HTML &amp; CSS</h1></header>
  <main><p>Привет, мир!</p></main>
</body>
</html>

Пример 4. Один CSS-класс меняет вид сразу везде

В этом и сила разделения: задаём .tag один раз — стиль применяется ко всем элементам с этим классом.

#html #css #history 
/* style.css: правило для всех тегов с классом tag */
.tag {
  display: inline-block;
  background: #0f766e;
  color: #ecfeff;
  padding: 4px 12px;
  border-radius: 999px;
}

Пример 5. Как открыть файл без сервера

  1. Сохраните index.html и style.css в одной папке.
  2. Откройте index.html двойным щелчком или через проводник.
  3. При наличии VS Code можно использовать Live Server, но для этого урока он не обязателен.
  4. Обновляйте страницу клавишей F5 после правок.