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

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

Селектор тегу

Селектор тегу застосовує стилі до всіх елементів певного тегу, забезпечуючи однакове оформлення на сторінці.

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

<p>It was all in my head.</p>

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

p {
  property: value;
}

Запустіть наступний приклад і перевірте, як це працює.

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

Селектори класу дозволяють вибирати елементи, які мають однакове ім'я класу, забезпечуючи більш точний контроль.

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

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

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

.text {
  property: value;
}

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

Усі елементи з атрибутом class="text" стилізуються червоним кольором тексту, розміром шрифту 24px і фоном кольору пшениці. Назва класу text визначена у файлі index.css з використанням префікса ..

Комбінування класів

Можна призначати кілька класів одному елементу для гнучкого стилізування.

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

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

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

.text {
  property: value;
}

.font {
  property: value;
}

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

Елемент <p> з класами text і font отримує стилі від обох селекторів. Клас text встановлює колір navy, а клас font встановлює розмір шрифту 24px.

Селектор Id

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

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

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

У CSS зверніться до id за допомогою хештега (#), щоб визначити стилі:

#title {
  property: value;
}

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

Атрибут id="title" однозначно ідентифікує елемент <p>, і стилі, визначені селектором #title, застосовуються лише до цього конкретного елемента.