Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Челендж: Змінні в CSS | Вступ до CSS
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

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

book
Челендж: Змінні в CSS

Завдання

Перед нами стоїть завдання оформити веб-сторінку блогу. Завдання полягає в наступному:

  1. Визначте колір у блоці :root:

    • Створіть змінну з ім'ям --description-color і присвойте їй значення #9e6f21.

  2. Застосуйте змінну --description-color як значення властивості color до елементів <p> з класом .description.

html

index.html

css

index.css

copy

  • Використовуйте -- та описову назву для створення змінної, потім встановіть : і присвойте їй значення.

  • Присвойте змінній значення #9e6f21.

  • Використовуйте var() і в дужках вкажіть ім'я змінної, щоб використовувати її як значення властивості.

html

index.html

css

index.css

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

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

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

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

Запитати АІ

expand
ChatGPT

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

course content

Зміст курсу

Основи CSS

Основи CSS

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

book
Челендж: Змінні в CSS

Завдання

Перед нами стоїть завдання оформити веб-сторінку блогу. Завдання полягає в наступному:

  1. Визначте колір у блоці :root:

    • Створіть змінну з ім'ям --description-color і присвойте їй значення #9e6f21.

  2. Застосуйте змінну --description-color як значення властивості color до елементів <p> з класом .description.

html

index.html

css

index.css

copy

  • Використовуйте -- та описову назву для створення змінної, потім встановіть : і присвойте їй значення.

  • Присвойте змінній значення #9e6f21.

  • Використовуйте var() і в дужках вкажіть ім'я змінної, щоб використовувати її як значення властивості.

html

index.html

css

index.css

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

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

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

Секція 1. Розділ 10
Ми дуже хвилюємося, що щось пішло не так. Що трапилося?
some-alt