Основи CSS

Зміст курсу

Основи CSS

Основи CSS

1. Вступ до CSS

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

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

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

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

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

4. Флексбокс

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

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

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

Челендж: Псевдокласи Дій Користувача

Завдання

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

Крок за кроком:

Виберіть всі елементи a з назвою класу header-link.
Встановіть відповідний псевдоклас.
Застосуйте властивість color зі значенням blue.

index.html

index.css

Використовуйте . та назву класу, щоб вибрати елемент за назвою класу.
Використовуйте псевдоклас :hover для реагування на наведення курсору миші.

index.html

index.css

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

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

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

Запитати АІ

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

Зміст курсу

Основи CSS

Основи CSS

1. Вступ до CSS

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

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

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

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

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

4. Флексбокс

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

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

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

Челендж: Псевдокласи Дій Користувача

Завдання

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

Крок за кроком:

Виберіть всі елементи a з назвою класу header-link.
Встановіть відповідний псевдоклас.
Застосуйте властивість color зі значенням blue.

index.html

index.css

Використовуйте . та назву класу, щоб вибрати елемент за назвою класу.
Використовуйте псевдоклас :hover для реагування на наведення курсору миші.

index.html

index.css

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

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

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

some-alt