Лабораторная работа №2

Создание CSS для HTML страницы

Изучение продвинутых возможностей CSS3 и современных техник стилизации

Цель работы

Освоить продвинутые возможности CSS3, научиться создавать адаптивные макеты, работать с анимациями, трансформациями и современными CSS свойствами.

Задачи лабораторной работы

  1. Изучить CSS селекторы и специфичность
  2. Освоить Flexbox и Grid Layout
  3. Научиться создавать анимации и переходы
  4. Изучить работу с медиа-запросами
  5. Применить CSS переменные и функции

Основные темы CSS

Селекторы

Классы, ID, псевдоклассы и псевдоэлементы

Box Model

Margin, padding, border и content

Flexbox

Гибкая система компоновки элементов

Grid

Двумерная система сеток

Пример CSS кода

/* CSS переменные */
:root {
    --primary-color: #8B4513;
    --secondary-color: #D2691E;
}

/* Flexbox контейнер */
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* CSS анимация */
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

Ключевые возможности CSS3

🎨

Градиенты и тени

Создание сложных визуальных эффектов без изображений

🔄

Трансформации

Поворот, масштабирование и перемещение элементов

✨

Анимации

Плавные переходы и сложные анимационные эффекты

📱

Адаптивность

Медиа-запросы для различных устройств