Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Колір Фону | Декоративні Ефекти
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

1. Вступ до CSS
Що таке CSS?Поєднання HTML і CSSСелектори для Стилізації HTML ЕлементівЧелендж: Додайте Свої Перші СтиліЧелендж: Додайте Стилі за Допомогою Імені КласуПсевдокласи Дій КористувачаЧелендж: Псевдокласи Дій КористувачаКольори ТекстуЕфективна Робота з CSSЧелендж: Змінні в CSS
2. CSS для Тексту
Стилізація ТекстуФорматування ТекстуЧеллендж: Форматування ТекстуДодавання Користувацьких Шрифтів до Веб-сторінкиВластивості ШрифтуЧелендж: Шрифти
3. Бокс Модель та Відстань між Елементами
Бокс МодельБокс СайзінгДодавання Простору ЕлементамЧелендж: Бокс-сайзінгСтруктурні та Функціональні ПсевдокласиЧелендж: Структурні ПсевдокласиТипи ЕлементівРобота з Блочними ЕлементамиРобота з Інлайн ЕлементамиЧелендж: Спрогнозуйте Макет Сторінки
4. Флексбокс
Що таке Flexbox?Flex НапрямокВирівнювання Вмісту по ГоризонталіВирівнювання Елементів по ВертикаліВластивості Flex-ЕлементівЧелендж: FlexboxЧелендж: Робота з Flexbox
5. Декоративні Ефекти
Колір ФонуФонове ЗображенняРобота з ЗображеннямиДекоративні Псевдо-ЕлементиТініЧелендж: Декоративні ЕфектиПодальші Кроки

bookКолір Фону

Колір фону веб-сайту відіграє вирішальну роль у створенні тону та атмосфери сайту. Це один з основних візуальних елементів, які користувачі бачать, коли заходять на ваш сайт, і він може суттєво вплинути на загальний вигляд і атмосферу сайту.

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

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

html

index

css

index

js

index

copy

статичний та градієнтний колір

Статичний колір означає єдине значення кольору, яке рівномірно застосовується до елемента, наприклад, red або #0000FF . З іншого боку, градієнтний колір передбачає змішування двох або більше кольорів для створення плавного переходу між ними.

html

index

css

index

js

index

copy

За допомогою градієнтного кольору ми можемо створювати візуально привабливіші та динамічніші дизайни, ніж зі статичним кольором. Розглянемо різні способи оголошення градієнтів.

linear gradient

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

html

index

css

index

js

index

copy

Також ми можемо вказати процентне співвідношення кольорів у градієнтному кольорі.

html

index

css

index

js

index

copy

solid linear gradient

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

html

index

css

index

js

index

copy

radial gradient

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

html

index

css

index

js

index

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

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

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

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

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

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

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

Як ми можемо покращити це?

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

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