Семантична розмітка HTML документів

Тема: Каскадність, специфічність селекторів та пріоритети в CSS.

Мета: На практиці зрозуміти, як браузер обирає, яке правило застосувати до елемента, якщо на нього діють кілька суперечливих стилів.

1. Підготувати таблицю-звіт, де розраховано вагу селекторів (Weight) за стандартною формулою: (ID, Class/Attribute, Type).

Приклад для аналізу: Який колір отримає текст у блоці <div id="main" class="content"><p>Текст</p></div>, якщо в CSS задано:

1. div p { color: red; }
2. #main p { color: blue; }
3. .content p { color: green; }
4. p { color: orange !important; }

Завдання: Визначити вагу кожного правила та пояснити фінальний результат.

2. Створіть файл cascade.html, де для одного і того самого елемента (наприклад, заголовка або кнопки) задайте стилі п'ятьма різними способами, щоб побачити каскад у дії:

1. Браузерні стилі (за замовчуванням).
2. Зовнішній CSS-файл (<link>).
3. Внутрішні стилі у секції <style> всередині HTML-документа.
4. Інлайнові стилі безпосередньо в тегу (атрибут style="...").
5. Використання !important у зовнішньому файлі.

Вимога: Студент має змінити порядок підключення стилів (наприклад, поставити <link> нижче за <style>) і описати, як змінюється відображення елемента.

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

• Задайте для блоку <div> властивості color, font-family, border, margin.
• Всередині блоку створіть абзац <p>. Опишіть, чому текст став кольоровим (успадкування), але навколо абзацу не з'явилася рамка (відсутність успадкування для Box Model).
• Змусьте абзац успадкувати рамку border від батька за допомогою значення inherit.

4. Вивчити та реалізувати на сторінці ЛР №2 вибіркові стилі:

• :nth-child(even) та :nth-child(odd) — для "зебри" у вашій таблиці (різний колір парних і непарних рядків).
• :not(.class-name) — застосувати стилі до всіх елементів списку, окрім одного конкретного.