Урок 2. Селектори та властивості: Основні селектори (по тегу, класу, ідентифікатору)

План уроку: Селектори та властивості (25-30 хвилин)

1. Вступ (5 хвилин)

• Що таке селектор в CSS?
  • Селектор — це частина CSS, що використовується для вибору елемента або групи елементів на сторінці, до яких будуть застосовуватися стилі.
  • Основна мета селекторів — визначити, до яких саме елементів HTML ви хочете застосувати свої стилі.

2. Основні типи селекторів (15 хвилин)

• Селектор за тегом (Type Selector):

  • Вибирає всі елементи з вказаним тегом.
  • Наприклад, щоб змінити всі заголовки <h1>, використовується селектор за тегом:
    

    h1 {
      color: blue;
      font-size: 36px;
    }
    

    Пояснення: Всі елементи <h1> на сторінці стануть синіми та матимуть розмір 36px.
    
    
• Селектор за класом (Class Selector):
  • Вибирає елементи, яким присвоєно конкретний клас за допомогою атрибуту class.
  • Використовується крапка перед назвою класу в CSS:
    

    .highlight {
      background-color: yellow;
    }
    

    Приклад HTML:
    

    <p class="highlight">Цей текст виділений жовтим фоном.</p>
    

  • Пояснення: Всі елементи з класом highlightбудуть мати жовтий фон.
    
    

• Селектор за ідентифікатором (ID Selector):

  • Вибирає елемент, який має унікальний атрибут id.
  • У CSS для селектора за ідентифікатором використовується знак решітки # перед ідентифікатором:
    

    #main-title {
      color: green;
      text-align: center;
    }
    

    Приклад HTML:
    

    <h1 id="main-title">Це головний заголовок</h1>
    

    Пояснення: Елемент з ідентифікатором main-title стане зеленим та буде вирівняний по центру. 

3. Практика (10 хвилин)

• Завдання 1:

  • Створіть HTML-документ із заголовками, параграфами та списками.
  • Створіть CSS-файл, де для заголовків застосуєте селектори за тегом, для певного абзацу — за класом, а для списку — за ідентифікатором.
    
    

• Приклад HTML:

  <h1>Вітаємо на нашому сайті!</h1>
  <p class="description">Це наш чудовий сайт.</p>
  <ul id="main-list">
    <li>Перший пункт</li>
    <li>Другий пункт</li>
  </ul>
  

• Приклад CSS:
  

  h1 {
    color: blue;
  }
  
  .description {
    font-style: italic;
  }
  
  #main-list {
    background-color: lightgrey;
  }
  

• Завдання 2:

  • Попросіть учнів змінити кольори заголовків, шрифт параграфів та фоновий колір списків через відповідні селектори.

4. Підсумок уроку (5 хвилин)

• Що повторити:
  • Три основні типи селекторів: селектори за тегом, класом та ідентифікатором.
  • Коли використовувати кожен тип селектора.
    
    
• Запитання для обговорення:
  • Чому варто уникати використання одного й того ж ідентифікатора для кількох елементів?
  • Коли краще використовувати клас замість ідентифікатора?

Домашнє завдання

• Створіть веб-сторінку з різними елементами (заголовками, абзацами, списками) та застосуйте до них стилі через селектори за тегом, класом та ідентифікатором.

Цей урок допоможе учням зрозуміти основні принципи вибору елементів на сторінці та стилізації за допомогою CSS. Це базовий крок до розуміння складніших правил CSS та їхнього застосування.