Основи 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. Декоративні Ефекти

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

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

text-decoration

Властивість text-decoration можна застосувати до будь-якого текстового вмісту, зокрема до посилань, заголовків, абзаців та списків. Вона додає рядкові ефекти, такі як підкреслення. Загальні значення:

Давайте запустимо наступний приклад і подивимося на різницю між усіма значеннями властивостей.

index

index

index

text-transform

Властивість text-transform дозволяє змінювати капіталізацію текстового вмісту в HTML-елементах.

Розглянемо різницю між усіма значеннями:

index

index

index

text-align

Властивість text-align дозволяє вирівнювати текстовий вміст по горизонталі.

index

index

index

1. Яка властивість CSS дозволяє змінювати капіталізацію текстового вмісту?

2. Яка властивість CSS дозволяє вирівнювати текстовий вміст по горизонталі?

3. Яка властивість CSS дозволяє додавати візуальні ефекти до текстового вмісту, наприклад, підкреслення або закреслення?

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

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

some-alt