Зміст курсу

Основи CSS

1. Вступ до CSS

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

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

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

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

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

4. Флексбокс

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

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

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

Колір Фону

Властивість background-color

За допомогою цієї властивості ми можемо задати колір фону для елемента. Значення може бути в будь-якому форматі: hex, rgb, rgba або зарезервоване слово.

css

background-color property

We can set background color for an element with help of this porperty. The value can be in any format: hex, rgb, rgba or reserved word.

css

index.html

index.css

static vs gradient color

Static color refers to a single color value that is applied uniformly to an element, such as red or #0000FF . On the other hand, gradient color involves blending two or more colors together to create a smooth transition between them.

index.html

index.css

linear gradient

Для встановлення лінійного градієнтного кольору фону ми використовуємо

css

linear gradient

To set the linear gradient background color we use:

css

index.html

index.css

Also, we can specify the color percentage in the gradient color.

index.html

index.css

solid linear gradient

We get striped background color if we specify the same percentage for adjacent colors. Let's run the example to get what the difference is.

index.html

index.css

radial gradient

Radial gradient works the same way as linear. The only difference is that color starts at the center and spreads outwards.

index.html

index.css

1. У чому основна відмінність між статичним кольором і градієнтним кольором в CSS?

2. Яка різниця між лінійним градієнтом і радіальним градієнтом в CSS?

Яка різниця між лінійним градієнтом і радіальним градієнтом в CSS?

Select the correct answer

Лінійний градієнт створює перехід кольору, який випромінюється з центральної точки, тоді як радіальний градієнт створює перехід кольору, що йде по прямій лінії

Лінійний градієнт і радіальний градієнт - це одне й те саме

Лінійний градієнт створює перехід кольору, який йде по прямій лінії, тоді як радіальний градієнт створює перехід кольору, який випромінюється з центральної точки.

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

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

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