Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Селектори для Стилізації HTML Елементів | Вступ до CSS
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

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

Щоб ефективно застосовувати стилі, потрібно розуміти селектори CSS, оскільки саме вони визначають елементи HTML, до яких потрібно застосувати стилі.

Селектор тегів

Одним із способів застосування стилів є використання самого тегу елемента. Стилі, задані за допомогою селектора тегів, впливатимуть на всі елементи з цим тегом. Це корисно для застосування узгодженого стилю до елементів на всьому веб-сайті.

Синтаксис: У HTML є елемент p:

html

Щоб застосувати стилі в CSS-файлі, використовуйте ім'я тегу (p) як селектор:

python

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

html

index.html

css

index.css

copy

Селектор класу

Більш точний спосіб стилізації елементів - це використання селекторів класів. Ці селектори націлені на елементи з певними іменами класів, що дозволяє нам застосовувати стилі вибірково.

Синтаксис: У HTML додайте атрибут class зі змістовною назвою класу:

html

У CSS посилайтеся на ім'я класу через крапку (.), щоб визначити стилі:

python

Давайте розглянемо наступний приклад і побачимо, що лише елементи з класом text отримають ці стилі, що дасть вам змогу краще контролювати ваші стилі.

html

index.html

css

index.css

copy

Композиція класів

Ми також можемо об'єднати декілька класів в одному елементі, що робить композицію класів потужним інструментом для застосування стилів - відокремлюйте імена класів пробілами в атрибуті class.

Синтаксис: У HTML додайте декілька імен класів до елемента:

html

У CSS визначте стилі для кожного класу окремо:

python

Давайте запустимо наступний приклад і подивимося, як це працює. Елементи з класами text і font отримають вказані стилі.

html

index.html

css

index.css

copy

Селектор ID

Хоча селектор id можна використовувати для стилізації, загалом це не рекомендується. Ідентифікатори повинні бути унікальними на сторінці, що обмежує їх повторне використання.

Синтаксис: В HTML додайте атрибут id до елемента:

html

У CSS посилайтеся на ідентифікатор за допомогою хештега (#) для визначення стилів:

python

Давайте запустимо наступний приклад і подивимося, як він працює. Цей приклад застосовує стилі до унікального елемента з ідентифікатором title.

html

index.html

css

index.css

copy

1. Як ми можемо націлити і застосувати стилі до цього HTML-елемента?

2. Як ми можемо націлити і застосувати стилі до HTML-елемента з id="navigation-link"?

question mark

Як ми можемо націлити і застосувати стилі до цього HTML-елемента?

Select the correct answer

question mark

Як ми можемо націлити і застосувати стилі до HTML-елемента з id="navigation-link"?

Select the correct answer

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

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

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

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

Запитати АІ

expand
ChatGPT

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

course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

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

Щоб ефективно застосовувати стилі, потрібно розуміти селектори CSS, оскільки саме вони визначають елементи HTML, до яких потрібно застосувати стилі.

Селектор тегів

Одним із способів застосування стилів є використання самого тегу елемента. Стилі, задані за допомогою селектора тегів, впливатимуть на всі елементи з цим тегом. Це корисно для застосування узгодженого стилю до елементів на всьому веб-сайті.

Синтаксис: У HTML є елемент p:

html

Щоб застосувати стилі в CSS-файлі, використовуйте ім'я тегу (p) як селектор:

python

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

html

index.html

css

index.css

copy

Селектор класу

Більш точний спосіб стилізації елементів - це використання селекторів класів. Ці селектори націлені на елементи з певними іменами класів, що дозволяє нам застосовувати стилі вибірково.

Синтаксис: У HTML додайте атрибут class зі змістовною назвою класу:

html

У CSS посилайтеся на ім'я класу через крапку (.), щоб визначити стилі:

python

Давайте розглянемо наступний приклад і побачимо, що лише елементи з класом text отримають ці стилі, що дасть вам змогу краще контролювати ваші стилі.

html

index.html

css

index.css

copy

Композиція класів

Ми також можемо об'єднати декілька класів в одному елементі, що робить композицію класів потужним інструментом для застосування стилів - відокремлюйте імена класів пробілами в атрибуті class.

Синтаксис: У HTML додайте декілька імен класів до елемента:

html

У CSS визначте стилі для кожного класу окремо:

python

Давайте запустимо наступний приклад і подивимося, як це працює. Елементи з класами text і font отримають вказані стилі.

html

index.html

css

index.css

copy

Селектор ID

Хоча селектор id можна використовувати для стилізації, загалом це не рекомендується. Ідентифікатори повинні бути унікальними на сторінці, що обмежує їх повторне використання.

Синтаксис: В HTML додайте атрибут id до елемента:

html

У CSS посилайтеся на ідентифікатор за допомогою хештега (#) для визначення стилів:

python

Давайте запустимо наступний приклад і подивимося, як він працює. Цей приклад застосовує стилі до унікального елемента з ідентифікатором title.

html

index.html

css

index.css

copy

1. Як ми можемо націлити і застосувати стилі до цього HTML-елемента?

2. Як ми можемо націлити і застосувати стилі до HTML-елемента з id="navigation-link"?

question mark

Як ми можемо націлити і застосувати стилі до цього HTML-елемента?

Select the correct answer

question mark

Як ми можемо націлити і застосувати стилі до HTML-елемента з id="navigation-link"?

Select the correct answer

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

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

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

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