Зміст курсу

Основи CSS

1. Вступ до CSS

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

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

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

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

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

4. Флексбокс

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

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

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

Основи CSS

Додавання Простору Елементам

Властивості margin, padding і border допомагають нам додати більше простору до елементів, покращуючи зовнішній вигляд веб-ресурсу, читабельність і зручність використання. Розглянемо кожну з них детальніше.

Властивість padding

padding відноситься до простору між вмістом елемента та його рамкою.

“padding”

Існує декілька способів задати значення padding.

Скорочення

Кожний padding окремо

Властивість margin

Марджин називається простір між елементом і сусідніми елементами. Це область поза межами елемента.

margin

Ми можемо дати марджин кількома способами.

Скорочено

Кожний margin окремо

Властивість border

border відноситься до лінії, яка оточує падінг та вміст елемента. Це область, яка відокремлює вміст елемента від його марджина.

border

Скорочено

Це означає, що рамка всіх сторін будуть виглядати однаково. Їх ширина - 4px, стиль - solid, а колір - brown.

Розглянемо наступний приклад і розберемося з можливими стилями рамок:

index.html

index.css

index.js

Кожен border окремо.

1. Яка різниця між padding та margin в CSS?

2. Яке призначення властивості border?

3. Як застосувати різні значення margin до різних сторін елемента?

Яка різниця між padding та margin в CSS?

Виберіть правильну відповідь

Margin додає простір за межами елемента, тоді як padding додає простір всередині елемента.

Padding додає простір за межами елемента, тоді як margin додає простір всередині елемента.

Margin і padding - це одне і те ж саме в CSS.

Яке призначення властивості border?

Виберіть правильну відповідь

Щоб додати декоративний контур навколо елемента

Щоб додати додатковий простір всередині елемента

Щоб додати додатковий простір за межами елемента

Як застосувати різні значення margin до різних сторін елемента?

Виберіть кілька правильних відповідей

Використати властивості margin-top, margin-right, margin-bottom і margin-left.

Використати властивість margin-all і вказати кожне значення по порядку: верхнє, нижнє, ліве, праве.

Використати властивість margin і вказати кожне значення по порядку: верхнє, праве, нижнє, ліве.

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

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

Зміст курсу

Основи CSS

1. Вступ до CSS

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

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

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

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

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

4. Флексбокс

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

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

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

Основи CSS

Додавання Простору Елементам

Властивості margin, padding і border допомагають нам додати більше простору до елементів, покращуючи зовнішній вигляд веб-ресурсу, читабельність і зручність використання. Розглянемо кожну з них детальніше.

Властивість padding

padding відноситься до простору між вмістом елемента та його рамкою.

“padding”

Існує декілька способів задати значення padding.

Скорочення

Кожний padding окремо

Властивість margin

Марджин називається простір між елементом і сусідніми елементами. Це область поза межами елемента.

margin

Ми можемо дати марджин кількома способами.

Скорочено

Кожний margin окремо

Властивість border

border відноситься до лінії, яка оточує падінг та вміст елемента. Це область, яка відокремлює вміст елемента від його марджина.

border

Скорочено

Це означає, що рамка всіх сторін будуть виглядати однаково. Їх ширина - 4px, стиль - solid, а колір - brown.

Розглянемо наступний приклад і розберемося з можливими стилями рамок:

index.html

index.css

index.js

Кожен border окремо.

1. Яка різниця між padding та margin в CSS?

2. Яке призначення властивості border?

3. Як застосувати різні значення margin до різних сторін елемента?

Яка різниця між padding та margin в CSS?

Виберіть правильну відповідь

Margin додає простір за межами елемента, тоді як padding додає простір всередині елемента.

Padding додає простір за межами елемента, тоді як margin додає простір всередині елемента.

Margin і padding - це одне і те ж саме в CSS.

Яке призначення властивості border?

Виберіть правильну відповідь

Щоб додати декоративний контур навколо елемента

Щоб додати додатковий простір всередині елемента

Щоб додати додатковий простір за межами елемента

Як застосувати різні значення margin до різних сторін елемента?

Виберіть кілька правильних відповідей

Використати властивості margin-top, margin-right, margin-bottom і margin-left.

Використати властивість margin-all і вказати кожне значення по порядку: верхнє, нижнє, ліве, праве.

Використати властивість margin і вказати кожне значення по порядку: верхнє, праве, нижнє, ліве.

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

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

some-alt