Зміст курсу

Основи CSS

1. Вступ до CSS

Що таке CSS?Поєднання HTML і CSS Селектори для Стилізації HTML Елементів Челендж: Додайте Свої Перші Стилі Челендж: Додайте Стилі за Допомогою Імені Класу Псевдокласи Дій Користувача Челендж: Псевдокласи Дій Користувача Кольори Тексту Ефективна Робота з CSS Челендж: Змінні в CSS

2. CSS для Тексту

Стилізація Тексту Форматування Тексту Челлендж: Форматування Тексту Додавання Користувацьких Шрифтів до Веб-сторінки Властивості Шрифту Челендж: Шрифти

3. Бокс Модель та Відстань між Елементами

Бокс Модель Бокс Сайзінг Додавання Простору Елементам Челендж: Бокс-сайзінг Структурні та Функціональні Псевдокласи Челендж: Структурні Псевдокласи Типи Елементів Робота з Блочними Елементами Робота з Інлайн Елементами Челендж: Спрогнозуйте Макет Сторінки

4. Флексбокс

Що таке Flexbox?Flex Напрямок Вирівнювання Вмісту по Горизонталі Вирівнювання Елементів по Вертикалі Властивості Flex-Елементів Челендж: Flexbox Челендж: Робота з Flexbox

5. Декоративні Ефекти

Колір Фону Фонове Зображення Робота з Зображеннями Декоративні Псевдо-Елементи Тіні Челендж: Декоративні Ефекти Подальші Кроки

Flex Напрямок

The flex-direction property enables us to determine the direction in which flex items are arranged. By default, this property is set to row, resulting in a left-to-right layout in browsers that use English as the default language. You can set it to:

flex-direction: row | column | row-reverse | column-reverse;

row

index.html

index.css

row-reverse

index.html

index.css

column

Pay attention to the width of the items; they cover the entire width of the parent.

index.html

index.css

column-reverse

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 2

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Зміст курсу

Основи CSS

1. Вступ до CSS

2. CSS для Тексту

3. Бокс Модель та Відстань між Елементами

4. Флексбокс

5. Декоративні Ефекти

Flex Напрямок

flex-direction: row | column | row-reverse | column-reverse;

row

index.html

index.css

row-reverse

index.html

index.css

column

Pay attention to the width of the items; they cover the entire width of the parent.

index.html

index.css

column-reverse

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 2