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

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

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

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

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

html
<p>It was all in my mind</p>

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

python
9
1
2
3
p {
  property: value;
}

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

index.html

index.css

<!DOCTYPE html>

<head>

</head>

<body>

It was all in my mind

</body>

</html>

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

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

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

html
<p class="text">This song is another hit.</p>

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

python
9
1
2
3
.text {
  property: value;
}

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

index.html

index.css

<!DOCTYPE html>

<head>

</head>

<body>

The weather is nice. We would rather go for a walk!

<a class="link" href="#">Navigate to main page</a>

Cactuses are my passion.

</body>

</html>

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

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

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

html
<p class="text font">A robot created chemicals.</p>

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

python
9
1
2
3
4
5
6
7
.text {
  property: value;
}

.font {
  property: value;
}

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

index.html

index.css

<!DOCTYPE html>

<head>

</head>

<body>

We test multiple class names

This paragraph has only "text" class name

This paragraph has only "font" class name

</body>

</html>

Селектор ID

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

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

html
<p id="title">Choose from different themes.</p>

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

python
9
1
2
3
#title {
  property: value;
}

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

index.html

index.css

<!DOCTYPE html>

<head>

</head>

<body>

Let's see what can id do for us.

</body>

</html>

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

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

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

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

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

Запитати АІ

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