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
Декоративні Псевдо-Елементи

Розглянемо наступний приклад, де нашим завданням є додавання декору для ефекту наведення курсору миші на посилання:

Let's consider the following example, where our task is to add some decoration for the hover effect on the links:

html

index.html

css

index.css

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

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

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

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