Самостійна робота №2
Тема: Каскадність, специфічність селекторів та пріоритети в CSS.
Мета: На практиці зрозуміти, як браузер обирає, яке правило застосувати до елемента, якщо на нього діють кілька суперечливих стилів.
1. Підготувати таблицю-звіт, де розраховано вагу селекторів (Weight) за стандартною формулою: (ID, Class/Attribute, Type).
Приклад для аналізу: Який колір отримає текст у блоці <div id="main" class="content"><p>Текст</p></div>, якщо в CSS задано:
- div p { color: red; }
- #main p { color: blue; }
- .content p { color: green; }
- p { color: orange !important; }
Завдання: Визначити вагу кожного правила та пояснити фінальний результат.
2. Створіть файл cascade.html, де для одного і того самого елемента (наприклад, заголовка або кнопки) задайте стилі п'ятьма різними способами, щоб побачити каскад у дії:
- Браузерні стилі (за замовчуванням).
- Зовнішній CSS-файл (<link>).
- Внутрішні стилі у секції <style> всередині HTML-документа.
- Інлайнові стилі безпосередньо в тегу (атрибут style="...").
- Використання !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) — застосувати стилі до всіх елементів списку, окрім одного конкретного.