Урок 2. Таблица стилей

Введение в CSS

Каскадные таблицы стилей (CSS - Cascading Style Sheets) представляют собой фундаментальную технологию современного веб-дизайна. CSS позволяет отделить содержание веб-страницы (HTML) от её визуального представления, что делает разработку более структурированной и поддерживаемой.

Современный CSS3 представляет собой набор модулей, каждый из которых добавляет новые возможности, такие как анимации, трансформации, flexbox, grid и многое другое.

Основы синтаксиса CSS

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

CSS состоит из набора правил, каждое из которых содержит:

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

Пример:

header {
    background-color: #2c3e50;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

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

1. Простые селекторы:

По тегу: p, div, h1.
По классу: .header, .menu-item.
По ID: #main, #footer.

2. Комбинаторы:

Потомки: nav ul li
Дочерние элементы: ul > li
Соседние элементы: h2 + p
Родственные элементы: h2 ~ p

3. Псевдоклассы и псевдоэлементы:

a:hover {
    color: #e74c3c;
} 
p::first-line {
    font-weight: bold;
}

Работа с цветами в CSS

Способы задания цветов

1. Именованные цвета:

    color: red;
    background-color: darkblue;

2. HEX-формат:

    color: #ff0000; /* красный */
    color: #00ff00; /* зеленый */
    color: #0000ff; /*синий */
    color: #f0f; /* #ff00ff - пурпурный */

3. RGB/RGBA:

    color: rgb(255, 0, 0);
    background-color: rgba(0, 0, 255, 0.5);

Блочная модель CSS

Понимание блочной модели - ключ к верстке:

Content - содержимое элемента
Padding - внутренний отступ
Border - граница
Margin - внешний отступ

Работа с отступами

.box {
    /* Все стороны */
    padding: 20px;
    margin: 10px;

    /* Вертикальные | Горизонтальные */
    padding: 10px 20px;

    /* Верх | Горизонтальные | Низ */
    margin: 10px 20px 15px;

    /*Верх | Право | Низ | Лево (по часовой стрелке) */
    padding: 5px 10px 15px 20px;
    
    /* Отдельные стороны*/
    margin-top: 5px; padding-right: 10px;
}

Box-sizing

По умолчанию padding и border добавляются к ширине элемента. Это можно изменить:

* {
    box-sizing: border-box; /* padding и border включаются в ширину */
}

Типографика в CSS

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

p {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    font-style: italic;
    text-align: justify;
    text-transform: capitalize;
    letter-spacing: 1px;
    word-spacing: 2px;
}

Позиционирование элементов

Типы позиционирования

1. Static (по умолчанию):

div {
    position: static;
}

2. relative:

 .box { position: relative; top: 10px; left: 20px; }

3. absolute:

.tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
}

4. fixed:

header {
    position: fixed;
    top: 0;
    width: 100%;
}

5. sticky:

.sidebar {
    position: sticky;
    top: 20px;
}

Flexbox

Flexbox - мощная система для создания гибких макетов:

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    flex: 1 0 200px;
}

Заключение

CSS - это мощный и постоянно развивающийся инструмент для создания современных веб-интерфейсов. Visual Studio Code предоставляет все необходимые средства для эффективной работы с CSS.

Освоив CSS в полной мере, вы сможете:

Создавать визуально привлекательные интерфейсы
Реализовывать сложные макеты с помощью Flexbox
Оптимизировать производительность стилей
Работать с современными инструментами и методологиями

Помните, что мастерство приходит с практикой - регулярно экспериментируйте с новыми свойствами и техниками, чтобы оставаться в курсе последних тенденций веб-разработки.