Введение в CSS: Стилизуем HTML

🎨 Что такое CSS?

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

🧱 Синтаксис CSS

CSS состоит из набора правил. Каждое правило состоит из селектора и блока объявлений.

Селектор определяет, к какому HTML-элементу применяется правило.
Блок объявлений содержит одно или несколько объявлений, разделенных точкой с запятой.
Объявление состоит из имени свойства и его значения, разделенных двоеточием.

Пример:

1
2
3
4
5


/* Пример CSS правила */
h1 {
    color: blue;        /* Цвет текста */
    font-size: 24px;    /* Размер шрифта */
}

В этом примере:

h1 - это селектор (применяется ко всем элементам <h1>).
color и font-size - это свойства.
blue и 24px - это значения свойств.

🎯 Селекторы CSS

Селекторы используются для выбора HTML-элементов, к которым нужно применить стили.

Основные типы селекторов

Селектор элемента (тега): Выбирает все элементы указанного типа.

Пример:
1 2 3 4

/* Применяется ко всем параграфам */ p { font-family: Arial, sans-serif; }

Селектор класса: Выбирает все элементы с указанным классом. Класс задается атрибутом class в HTML.

Пример:

1
2
3
4
5


/* Применяется к элементам с классом highlight */
.highlight {
    background-color: yellow;
    padding: 5px;
}

1

<p class="highlight">Этот параграф будет выделен желтым цветом.</p>

Селектор идентификатора: Выбирает элемент с указанным идентификатором. Идентификатор задается атрибутом id в HTML.

Пример:

1
2
3
4
5


/* Применяется к элементу с id main-title */
#main-title {
    font-size: 32px;
    margin-bottom: 20px;
}

1

<h1 id="main-title">Заголовок страницы</h1>

Комбинаторы: Позволяют выбирать элементы на основе их отношений.

Примеры:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* Потомки: все параграфы внутри div */
div p {
    color: blue;
}

/* Дочерние элементы: параграфы, которые являются прямыми потомками div */
div > p {
    font-weight: bold;
}

/* Соседние элементы: параграф, который идет сразу после h2 */
h2 + p {
    margin-top: 0;
}

Псевдоклассы и псевдоэлементы: Выбирают элементы в определенных состояниях или их части.

Примеры:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


/* Ссылка при наведении */
a:hover {
    text-decoration: underline;
}

/* Нечетные строки таблицы */
tr:nth-child(odd) {
    background-color: #f2f2f2;
}

/* Первая буква параграфа */
p::first-letter {
    font-size: 200%;
    color: #8A2BE2;
}

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

Встроенные стили (Inline styles): Стили записываются непосредственно в HTML-элементе с помощью атрибута style.

Пример:
1

<p style="color: green;">Этот параграф будет зеленым.</p>

Внутренние стили (Internal styles): Стили записываются внутри тега <style> в разделе <head> HTML-документа.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<!DOCTYPE html>
<html>
<head>
    <title>Моя страница</title>
    <style>
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>Этот параграф будет зеленым.</p>
</body>
</html>

Внешние стили (External styles): Стили записываются в отдельном CSS-файле (с расширением .css) и подключаются к HTML-документу с помощью тега <link>.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
<head>
    <title>Моя страница</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>Этот параграф будет зеленым.</p>
</body>
</html>

В файле styles.css:

1
2
3


p {
    color: green;
}

📐 Современные возможности CSS

Flexbox

Flex-контейнер (Flexbox) — мощный инструмент для создания одномерных макетов (строки или столбцы).

1
2
3
4
5
6
7
8
9


.container {
    display: flex;
    justify-content: space-between; /* Распределение элементов */
    align-items: center; /* Выравнивание по вертикали */
}

.item {
    flex: 1; /* Элемент растягивается, заполняя доступное пространство */
}

CSS Grid

Grid — двумерная система макетов для более сложных структур страниц.

1
2
3
4
5
6
7
8
9


.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Три колонки */
    grid-gap: 20px; /* Отступы между элементами */
}

.header {
    grid-column: 1 / -1; /* Занимает все колонки */
}

Переменные CSS

CSS-переменные (пользовательские свойства) позволяют повторно использовать значения.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
    --main-color: #3498db;
    --accent-color: #e74c3c;
    --text-color: #333;
}

body {
    color: var(--text-color);
}

button {
    background-color: var(--main-color);
}

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

Медиа-запросы позволяют применять стили в зависимости от характеристик устройства.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/* Стили для мобильных устройств */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar {
        display: none;
    }
}

🌈 Подходы к организации CSS

БЭМ (Блок, Элемент, Модификатор)

БЭМ — методология именования классов для создания поддерживаемого кода.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


/* Блок */
.card {
    border: 1px solid #ddd;
}

/* Элемент */
.card__title {
    font-size: 18px;
}

/* Модификатор */
.card--featured {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

1
2
3
4


<div class="card card--featured">
    <h2 class="card__title">Заголовок карточки</h2>
    <p class="card__content">Содержимое карточки</p>
</div>

CSS-препроцессоры

Препроцессоры (SASS, LESS) расширяют возможности CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// SASS пример
$primary-color: #3498db;

@mixin button-style($bg-color) {
    background-color: $bg-color;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
}

.button {
    @include button-style($primary-color);
    
    &:hover {
        opacity: 0.9;
    }
}

🚀 Практическое задание

Создайте HTML-страницу с базовой структурой.
Подключите CSS одним из способов.
Используйте разные селекторы для стилизации элементов.
Создайте адаптивный макет с использованием Flexbox или Grid.
Используйте CSS-переменные для основных цветов и размеров.
Добавьте медиа-запрос для адаптации под мобильные устройства.
Проверьте, как отображаются стили на разных устройствах.

🎯 Следующие шаги

В следующих статьях мы рассмотрим более сложные темы, такие как:

Продвинутые техники анимации в CSS
CSS фреймворки (Bootstrap, Tailwind CSS)
CSS-in-JS подходы
Оптимизация производительности CSS

Следите за обновлениями!