🎨 Полный курс CSS

📖 Что такое CSS?

CSS (Cascading Style Sheets) — каскадные таблицы стилей. Язык, который отвечает за внешний вид веб-страницы: цвета, шрифты, отступы, расположение элементов, анимацию и адаптацию под разные экраны.

CSS работает в связке с HTML. HTML задаёт структуру (заголовки, абзацы, картинки), а CSS говорит: «этот заголовок должен быть синим, 24 пикселя, с отступом 20px».

✍️ Синтаксис и способы подключения

Правило CSS

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

Пример:

p {
    color: #333;
    font-size: 16px;
    margin-bottom: 1em;
}

Способы подключения

Комментарии

/* Это комментарий в CSS */

🎯 Селекторы и специфичность

Селектор определяет, к каким элементам применятся стили.

Комбинаторы

/* Потомок (пробел) */
article p { }

/* Дочерний (>) */
ul > li { }

/* Соседний (+) */
h2 + p { }

/* Братские (~) */
h2 ~ p { }

Специфичность (вес)

При конфликте стилей побеждает более специфичный селектор. Вес считается так: id (100), класс/атрибут/псевдокласс (10), тег/псевдоэлемент (1). Inline-стиль = 1000, !important перебивает всё (но лучше избегать).

🎨 Цвета и единицы измерения

Цвета

Единицы измерения

🔤 Стилизация текста

Основные свойства

p {
    font-family: 'Arial', sans-serif;
    font-size: 1rem;
    font-weight: bold;    /* normal, bold, 100-900 */
    font-style: italic;
    line-height: 1.5;
    text-align: center;   /* left, right, justify */
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    word-spacing: 2px;
}

Подключение шрифтов

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
    font-family: 'Roboto', sans-serif;
}

📦 Блочная модель (Box Model)

Каждый элемент в CSS — прямоугольник, состоящий из: контента, внутренних отступов (padding), границы (border) и внешних отступов (margin).

.box {
    width: 200px;
    height: 100px;
    padding: 10px 20px;    /* верх-низ, право-лево */
    border: 2px solid #333;
    margin: 15px auto;     /* авто по горизонтали центрирует */
    box-sizing: border-box; /* включает padding и border в width */
}

Свойство box-sizing: border-box; делает вёрстку предсказуемой — width задаёт полную ширину блока с учётом padding и border.

🧩 Позиционирование и отображение

display

position

📏 Flexbox — гибкий контейнер

Flexbox предназначен для одномерных раскладок (строка или колонка).

.container {
    display: flex;
    flex-direction: row;        /* row, column, row-reverse, column-reverse */
    justify-content: space-between; /* главная ось: flex-start, center, space-around */
    align-items: center;        /* поперечная ось: stretch, flex-start, flex-end */
    flex-wrap: wrap;            /* перенос элементов */
    gap: 20px;                  /* расстояние между элементами */
}
.item {
    flex: 1;                    /* коэффициент растяжения */
}

Свойства для дочерних элементов: order, align-self, flex-grow, flex-shrink, flex-basis.

📐 CSS Grid — двумерная сетка

Grid позволяет создавать сложные макеты с рядами и колонками.

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* три колонки */
    grid-template-rows: auto 200px;
    gap: 20px;
}
.item {
    grid-column: span 2;   /* занять 2 колонки */
    grid-row: 1 / 3;       /* с первой по третью линию */
}

Функции: repeat(3, 1fr), minmax(100px, auto). Выравнивание: justify-items, align-items.

✨ Переходы и анимация

transition (плавное изменение)

.button {
    background: blue;
    transition: background 0.3s ease, transform 0.2s;
}
.button:hover {
    background: red;
    transform: scale(1.05);
}

animation (ключевые кадры)

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.element {
    animation: slideIn 0.5s ease-out forwards;
}

Параметры: duration, timing-function, delay, iteration-count, direction.

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

Медиа-запросы

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

Относительные единицы

Используй rem, em, %, vw, чтобы элементы масштабировались.

Метатег viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Без него мобильные браузеры масштабируют страницу как десктопную.

🧠 Лучшие практики

• Используй CSS-переменные для цветов и повторяющихся значений.
• Стремись к компонентному подходу (стили для кнопок, карточек живут отдельно).
• Избегай слишком специфичных селекторов и !important.
• Комментируй сложные участки.
• Применяй методологии именования классов: БЭМ, OOCSS, SMACSS.
• Минимизируй CSS перед публикацией (автоматически).