Ось готовий урок, згенерований у стилі CS50, спеціально для тебе.

🎓 CS50: Каскадність, Специфічність та Спадкування (CSS)

Вітаю всіх! Радий бачити вас знову.

Сьогодні ми розберемо одну з тих тем, яка змушує новачків бити кулаком по столу і кричати в монітор: "Чому мій заголовок досі синій, я ж написав color: red?!"

Звучить знайомо?

1. 🔥 Вступ: Хто тут головний?

Уявіть ситуацію. Ви працюєте над стильним сайтом. Ви пишете CSS-правило, щоб кнопка була зеленою. Оновлюєте сторінку — а вона сіра. Ви додаєте ще одне правило — нічого. Ви пишете !important (ми поговоримо про це, не робіть так!) — і, о диво, вона зелена. Але тепер ви не можете змінити її колір при наведенні мишки.

У чому проблема?

Браузер — це бюрократ. Коли він має вирішити, як намалювати елемент, він отримує купу інструкцій: від вас, від налаштувань користувача, від самого браузера (дефолтні стилі) і, можливо, від інших CSS-файлів.

Це як у сім’ї, де ви хочете піти гуляти: 1. Мама каже: "Одягни шапку". 2. Тато каже: "Шапка не потрібна, візьми кепку". 3. Бабуся кричить з кухні: "На вулиці мороз, одягни вушанку!"

Кого ви послухаєте? Хто має більший авторитет? Чи, можливо, останнє слово за тим, хто сказав це останнім?

У CSS це вирішують три кити: Каскадність, Специфічність та Спадкування. Без розуміння цієї ієрархії ви будете писати код "наосліп", сподіваючись на удачу. А ми тут не для того, щоб гадати, вірно?

2. 🧠 Теоретична база: Правила гри

Давайте заглянемо "під капот". Як браузер вирішує конфлікти?

1. Каскадність (Cascade)

Уявіть собі водоспад (cascade). Вода тече зверху вниз. Якщо у вас є два абсолютно рівнозначні правила, перемагає те, що написано нижче у коді.

Інтуїція: Останнє слово — вирішальне.

2. Специфічність (Specificity) — "Вага" правила

Це система очок. Не всі селектори рівні. * Тег (h1, div, p) — це рядовий солдат. Вага маленька. * Клас (.btn, .header) — це офіцер. Він перекриває накази солдата (тега). * ID (#main-nav) — це генерал. Один генерал сильніший за сотню офіцерів. * Inline-стилі (в HTML style="...") — це президент. Перебиває майже все.

Запам’ятати: ID > Клас > Тег.

3. Спадкування (Inheritance) — "Генетика"

Деякі властивості передаються від батьків до дітей, а деякі — ні. * Якщо ви встановите body { font-family: Arial; }, всі параграфи всередині теж стануть Arial. Це логічно. * Але якщо ви встановите body { border: 1px solid red; }, параграфи не отримають рамку. Уявіть, якби кожна літера успадковувала рамку — сайт виглядав би як решітка!

Логіка: Текстові стилі зазвичай успадковуються. Геометричні (розміри, відступи, рамки) — ні.

3. 🧪 Приклади: Від теорії до практики

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

Приклад 1: Сила Каскаду (Порядок)

h1 {
    color: blue;
}

h1 {
    color: red;
}

❓ Питання: Якого кольору буде <h1>? . . . ✅ Відповідь: Червоний. Обидва правила мають однакову вагу (селектори тегів), тому перемагає те, що нижче.

Приклад 2: Битва рангів (Специфічність)

<p class="text-highlight" id="intro">Привіт, світе!</p>

#intro {
    color: purple; /* ID */
}

.text-highlight {
    color: green; /* Клас */
}

p {
    color: orange; /* Тег */
}

❓ Питання: Який колір переможе? . . . ✅ Відповідь: Фіолетовий (Purple). Чому? Тому що ID (#intro) — це "генерал". Неважливо, що клас і тег написані нижче. Вага ID перебиває їх.

Приклад 3: Спадкування vs Пряма вказівка

<div class="parent">
    Я батько.
    <p class="child">Я дитина.</p>
</div>

.parent {
    color: blue;
}

.child {
    color: red;
}

❓ Питання: Якого кольору текст "Я дитина"? . . . ✅ Відповідь: Червоний. Хоча .child знаходиться всередині .parent (і міг би успадкувати синій), пряма вказівка на елемент (через його власний клас) завжди сильніша за спадкування. Спадкування — це найслабший зв'язок.

4. 🛠 Практична частина

Час "забруднити руки" кодом. Відкрийте ваш редактор або CodePen і виконайте ці завдання.

🔹 Завдання 1: Зламайте систему

Створіть div з класом .box. 1. Напишіть стиль для .box, що робить фон синім. 2. Нижче напишіть стиль для div (тег), що робить фон червоним. 3. Чому фон залишився синім, хоча div написаний нижче? (Згадайте про офіцерів і солдатів).

🔹 Завдання 2: "Генерал" проти армії

Створіть елемент: <h2 class="title" id="main-title">Заголовок</h2>. Спробуйте змінити його колір, використовуючи тільки класи. Напишіть хоч 5 різних класів і причепіть їх до елемента. Чи зможуть вони перебити один ID у CSS?

🔹 Завдання 3: Сила `!important` (і чому це зло)

У попередньому завданні додайте до одного з класів !important (наприклад, .title { color: pink !important; }). Що сталося? Тепер спробуйте перебити цей колір через ID. Вийшло? (Спойлер: це пастка, з якої важко вибратися. Відчуйте цей біль зараз, щоб не створювати його у реальних проєктах).

🔹 Завдання 4: Міні-кейс "Кнопка"

У вас є кнопка: <button class="btn btn-primary">Купити</button>. * .btn задає базові стилі (розмір, шрифт). * .btn-primary задає колір фону (синій). * Завдання: Створіть правило, яке перефарбує цю кнопку в зелений, не чіпаючи HTML, але щоб це правило було "сильнішим" за .btn-primary. (Підказка: Ви можете комбінувати селектори, наприклад button.btn-primary або .btn.btn-primary).

🔹 Питання "А що, якщо..."

Що, якщо у батьківського елемента стоїть opacity: 0.5? Чи зможе дочірній елемент повернути собі opacity: 1 і стати повністю непрозорим? Спробуйте.

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі, дивлячись на CSS?

⛔️ Новачок: * Використовує ID для стилізації (#header, #footer). Це створює "війну специфічності". Потім доводиться писати ще складніші селектори, щоб перебити ці ID. * Вставляє !important, як тільки щось не працює. Це призводить до того, що через місяць проєкт неможливо підтримувати. * Пише довгі ланцюжки: div ul li a span { ... }. Це робить код повільним і крихким.

✅ Досвідчений розробник: * Використовує переважно класи. Класи мають середню вагу, їх легко комбінувати та перевизначати. * Тримає специфічність низькою і рівномірною. Якщо всі правила — це просто класи, то працює простий каскад (хто нижче — той і правий). Це легко читати. * Використовує методології (як BEM), щоб уникати конфліктів імен.

Порада з практики: Ніколи не використовуйте ID для стилів. Залиште ID для JavaScript-хуків або якорів посилань. Стилізуйте класами.

6. 🧩 Підсумок

Отже, що ми сьогодні дізналися?

Каскад: Якщо вага рівна, перемагає останній.
Специфічність: ID б'є Клас, Клас б'є Тег. Рахуйте очки!
Спадкування: Деякі риси передаються дітям, але прямий наказ завжди важливіший за спадок.

Тепер ви не будете сліпо тикати стилі, сподіваючись, що вони спрацюють. Ви розумієте, чому кнопка не зелена, і знаєте, як це виправити елегантно, а не кувалдою !important.

Що далі? Ми навчилися фарбувати коробки. Але як розмістити ці коробки поруч одна з одною, а не стовпчиком? На наступному уроці ми розберемо Блокову модель (Box Model) та Flexbox. Це те, що перетворить ваш набір елементів на справжній макет сайту.

А на сьогодні це все. Мене звати [Ваше Ім'я], і це був CS50. (Віртуально 😉)

Успіхів у коді!