Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Декоративні Псевдо-Елементи | Decorative Effects
course content

Зміст курсу

Основи CSS

1. Вступ до CSS

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

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

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

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

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

4. Флексбокс

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

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

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

Основи CSS

Декоративні Псевдо-ЕлементиДекоративні Псевдо-Елементи

Псевдо-елементи ::before і ::after - це спеціальні селектори, які дозволяють вставляти вміст до або після вмісту елемента. Ми використовуємо їх для додавання декоративних елементів, таких як іконки або рамки, до вмісту елемента, не змінюючи власне HTML-вміст.

  • ::before додає вміст перед контентом елемента.
  • ::after додає вміст після контента елемента.

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

html

index.html

css

index.css

js

index.js

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

Секція 5. Розділ 4
course content

Зміст курсу

Основи CSS

1. Вступ до CSS

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

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

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

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

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

4. Флексбокс

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

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

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

Основи CSS

Декоративні Псевдо-ЕлементиДекоративні Псевдо-Елементи

Псевдо-елементи ::before і ::after - це спеціальні селектори, які дозволяють вставляти вміст до або після вмісту елемента. Ми використовуємо їх для додавання декоративних елементів, таких як іконки або рамки, до вмісту елемента, не змінюючи власне HTML-вміст.

  • ::before додає вміст перед контентом елемента.
  • ::after додає вміст після контента елемента.

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

html

index.html

css

index.css

js

index.js

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

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