Инструкции к выполнению

Пошаговое руководство по созданию и применению CSS стилей

📋 Подготовка к работе

Убедитесь в наличии базовой HTML структуры
У вас должен быть готовый HTML файл из лабораторной работы №1
Создайте файл стилей
Создайте файл styles.css в той же папке, что и HTML файл
Подключите CSS к HTML
Добавьте в секцию <head>: <link rel="stylesheet" href="styles.css">
Включите инструменты разработчика
Используйте DevTools браузера (F12) для отладки стилей

🎨 Этап 1: Основы CSS

Синтаксис CSS

/* Базовый синтаксис CSS */
селектор {
    свойство: значение;
    свойство2: значение2;
}

/* Пример */
h1 {
    color: #8B4513;
    font-size: 2rem;
    text-align: center;
}

💡 Совет: Всегда заканчивайте каждое свойство точкой с запятой для избежания ошибок

Типы селекторов

/* Селектор тега */
p { color: #333; }

/* Селектор класса */
.highlight { background: yellow; }

/* Селектор ID */
#header { height: 100px; }

/* Комбинированные селекторы */
div.container { width: 100%; }

/* Вложенные селекторы */
nav ul li { display: inline; }

/* Псевдоклассы */
a:hover { color: red; }

/* Псевдоэлементы */
p::first-letter { font-size: 2em; }

Специфичность CSS

Порядок приоритета стилей (от низкого к высокому):

Элементы: p = 0,0,0,1
Классы: .class = 0,0,1,0
ID: #id = 0,1,0,0
Inline стили: style="" = 1,0,0,0
!important - максимальный приоритет

⚠️ Внимание: Избегайте использования !important без крайней необходимости

📦 Этап 2: Box Model

Понимание Box Model

.box {
    /* Содержимое */
    width: 300px;
    height: 200px;
    
    /* Внутренний отступ */
    padding: 20px;
    
    /* Граница */
    border: 5px solid #8B4513;
    
    /* Внешний отступ */
    margin: 10px;
    
    /* Изменение модели подсчета размеров */
    box-sizing: border-box;
}

Box Model Example

💡 Совет: Используйте box-sizing: border-box; для всех элементов, чтобы padding и border включались в общую ширину

🔧 Этап 3: Flexbox Layout

Основы Flexbox

/* Контейнер */
.flex-container {
    display: flex;
    flex-direction: row; /* row | column | row-reverse | column-reverse */
    justify-content: space-between; /* flex-start | center | flex-end | space-around | space-evenly */
    align-items: center; /* flex-start | center | flex-end | stretch | baseline */
    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
    gap: 1rem; /* Расстояние между элементами */
}

/* Элементы */
.flex-item {
    flex: 1; /* flex-grow flex-shrink flex-basis */
    flex-grow: 1; /* Коэффициент роста */
    flex-shrink: 0; /* Коэффициент сжатия */
    flex-basis: 200px; /* Базовый размер */
    align-self: center; /* Переопределение align-items для элемента */
}

Пример Flexbox

Flex Item 1

Flex Item 2

Flex Item 3

📐 Этап 4: CSS Grid

Основы Grid

/* Grid контейнер */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки равной ширины */
    grid-template-rows: 100px 200px; /* 2 ряда фиксированной высоты */
    gap: 20px; /* Расстояние между ячейками */
    grid-auto-flow: row; /* Направление заполнения */
}

/* Grid элементы */
.grid-item {
    grid-column: span 2; /* Занимает 2 колонки */
    grid-row: 1 / 3; /* С первой по третью линию ряда */
}

/* Именованные области */
.page-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Пример Grid Layout

4 (span 2)

✨ Этап 5: Анимации и переходы

CSS Transitions

/* Простой переход */
.button {
    background: #8B4513;
    color: white;
    padding: 10px 20px;
    transition: all 0.3s ease;
    /* ИЛИ отдельные свойства */
    transition-property: background, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

.button:hover {
    background: #D2691E;
    transform: scale(1.1);
}

CSS Animations

/* Определение анимации */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Применение анимации */
.animated-element {
    animation: slideIn 1s ease-in-out;
    /* ИЛИ отдельные свойства */
    animation-name: slideIn;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite; /* или число */
    animation-direction: alternate; /* normal | reverse | alternate | alternate-reverse */
    animation-fill-mode: forwards; /* none | forwards | backwards | both */
}

Демонстрация анимации

Анимированный элемент

📱 Этап 6: Адаптивный дизайн

Media Queries

/* Базовые стили для мобильных устройств */
.container {
    width: 100%;
    padding: 10px;
}

/* Планшеты */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* Десктоп */
@media (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

/* Большие экраны */
@media (min-width: 1200px) {
    .container {
        width: 1140px;
    }
}

/* Ориентация устройства */
@media (orientation: landscape) {
    /* Стили для горизонтальной ориентации */
}

/* Печать */
@media print {
    /* Стили для печати */
}

💡 Совет: Используйте подход Mobile First - начинайте с мобильных стилей и добавляйте стили для больших экранов через media queries

🎯 Этап 7: CSS переменные

Использование CSS Custom Properties

/* Определение переменных */
:root {
    --primary-color: #8B4513;
    --secondary-color: #D2691E;
    --spacing-unit: 1rem;
    --border-radius: 10px;
    --transition-speed: 0.3s;
}

/* Использование переменных */
.card {
    background: var(--primary-color);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
    transition: all var(--transition-speed);
}

/* Переопределение переменных в конкретном контексте */
.dark-theme {
    --primary-color: #2D1810;
    --secondary-color: #1A0F08;
}

/* Использование с fallback значением */
.element {
    color: var(--text-color, #333); /* #333 если переменная не определена */
}

🚀 Этап 8: Продвинутые техники

CSS Filters

filter: blur(5px);

filter: brightness(1.5);

filter: contrast(200%);

filter: grayscale(100%);

Transform 3D

transform: rotateX(45deg);

transform: rotateY(45deg);

transform: perspective(1000px);

transform-style: preserve-3d;

Clip-path

clip-path: circle(50%);

clip-path: polygon(...);

clip-path: ellipse(...);

clip-path: inset(...);

Blend Modes

mix-blend-mode: multiply;

background-blend-mode: overlay;

isolation: isolate;

✅ Проверка и тестирование

Валидация CSS
Используйте W3C CSS Validator
Кроссбраузерное тестирование

Chrome
90+

Firefox
88+

Safari
14+

Edge
90+
Проверка производительности
Используйте Chrome DevTools Performance tab
Проверка доступности
Убедитесь в достаточной контрастности цветов и читаемости текста

⚠️ Частые ошибки и их решения

Z-index не работает

Проблема: Элемент не поднимается выше других

Решение: Добавьте position: relative;

Margin collapse

Проблема: Вертикальные отступы схлопываются

Решение: Используйте padding или border

Overflow скрытого контента

Проблема: Контент обрезается

Решение: Используйте overflow: auto;

Flexbox не работает

Проблема: Элементы не выстраиваются

Решение: Проверьте display: flex; на родителе

💡 Полезные советы

Используйте CSS препроцессоры (Sass, Less) для больших проектов
Организуйте CSS по методологии BEM или Atomic CSS
Минифицируйте CSS для production
Используйте CSS-in-JS для компонентных фреймворков
Изучите PostCSS и автопрефиксер
Применяйте CSS Modules для изоляции стилей
Используйте CSS Grid для сложных макетов
Оптимизируйте селекторы для производительности