Основи CSS

Основи CSS

0%

1. Вступ до CSS

Базові концепції та правила CSS для додавання стилів до веб-сторінки.

Що таке CSS?

Поєднання HTML і CSS

Селектори для Стилізації HTML Елементів

Челендж: Додайте Свої Перші Стилі

Челендж: Додайте Стилі за Допомогою Імені Класу

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

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

Кольори Тексту

Ефективна Робота з CSS

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

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

Набір властивостей CSS, які використовуються для стилізації текстового вмісту елементів HTML.

Стилізація Тексту

Форматування Тексту

Челлендж: Форматування Тексту

Додавання Користувацьких Шрифтів до Веб-сторінки

Властивості Шрифту

Челендж: Шрифти

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

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

Бокс Модель

Бокс Сайзінг

Додавання Простору Елементам

Челендж: Бокс-сайзінг

Структурні та Функціональні Псевдокласи

Челендж: Структурні Псевдокласи

Типи Елементів

Робота з Блочними Елементами

Робота з Інлайн Елементами

Челендж: Спрогнозуйте Макет Сторінки

4. Флексбокс

Метод впорядкування набору елементів у рядках і стовпцях.

Що таке Flexbox?

Flex Напрямок

Вирівнювання Вмісту по Горизонталі

Вирівнювання Елементів по Вертикалі

Властивості Flex-Елементів

Челендж: Flexbox

Челендж: Робота з Flexbox

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

Створіть візуально приголомшливий та інтерактивний веб-дизайн, використовуючи продвинуті методи 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

index

index

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

index

index

index

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

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

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

some-alt