← Вернуться к урокам

🎨 CSS стилизация

Урок 2 из 5

🎯 Цель урока

В этом уроке мы изучим CSS (Cascading Style Sheets) и превратим нашу простую HTML страницу в красивую и стильную игру. CSS отвечает за внешний вид веб-страниц.

💡 Что вы узнаете:

• Что такое CSS и как он работает
• Как подключить стили к HTML
• Основные CSS свойства
• Как создавать градиенты и эффекты

📚 Основы CSS

Что такое CSS?

CSS позволяет нам изменять внешний вид HTML элементов: цвета, размеры, шрифты, расположение и многое другое. CSS состоит из правил, которые применяются к HTML элементам.

Структура CSS правила:

селектор {
  свойство: значение;
  другое-свойство: значение;
}

🔍 Пример:

button { color: white; background: red; }
Это правило сделает все кнопки белыми с красным фоном

🔄 До и после

Посмотрите, как CSS преображает нашу страницу:

ДО (только HTML)

Волшебная кнопка

Нажми на кнопку и увидишь магию!

ПОСЛЕ (HTML + CSS)

Волшебная кнопка

Нажми на кнопку и увидишь магию!

🛠️ Создание стилей

Давайте создадим красивые стили для нашей игры:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Волшебная кнопка</title>
    <style>
      body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        margin: 0;
        padding: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }

      .game-container {
        text-align: center;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 40px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      }

      h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .magic-button {
        background: linear-gradient(135deg, #ff6b6b, #ffa500);
        color: white;
        border: none;
        padding: 20px 40px;
        font-size: 1.5rem;
        font-weight: bold;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
      }

      .magic-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
      }
    </style>
  </head>
  <body>
    <div class="game-container">
      <h1>Волшебная кнопка</h1>
      <p>Нажми на кнопку и увидишь магию!</p>
      <button class="magic-button">✨ Магия! ✨</button>
    </div>
  </body>
</html>

🔧 Объяснение CSS свойств

Разберём каждое CSS свойство, которое мы использовали:

font-family
Задаёт шрифт для текста
background
Цвет или градиент фона
linear-gradient
Создаёт плавный переход цветов
border-radius
Скругляет углы элементов
box-shadow
Добавляет тень к элементу
transform
Позволяет поворачивать, масштабировать, перемещать элементы
transition
Создаёт плавные анимации при изменениях
:hover
Стили, которые применяются при наведении мыши

🎨 Магия градиентов:

linear-gradient(135deg, #667eea 0%, #764ba2 100%)
Создаёт диагональный градиент от синего к фиолетовому

🎮 Результат

Вот как выглядит наша стилизованная игра:

Волшебная кнопка

Нажми на кнопку и увидишь магию!

🎓 Что вы изучили

  • Основы CSS и структуру правил
  • Как подключить стили через тег <style>
  • Градиенты и их применение
  • Тени и скругление углов
  • Анимации и эффекты при наведении
  • Flexbox для центрирования элементов

🚀 Что дальше?

В следующем уроке мы добавим JavaScript и сделаем кнопку интерактивной! Научимся обрабатывать клики и показывать сообщения.

← Предыдущий урок Следующий урок →