Модуль 3

Синтаксис CSS та структура правил

Ось готовий урок, створений спеціально для тебе у стилі David Malan. Вмикай увагу на повну, поїхали! 🚀

🎨 Урок: Синтаксис CSS та структура правил

(Або: Як змусити ваш сірий HTML виглядати як Apple)

1. 🔥 Вступ: Проблема та мотивація

Уявімо ситуацію. Ви щойно написали свій перший HTML-код. Ви відкриваєте файл у браузері, очікуючи побачити наступний Facebook чи Instagram, а бачите... нудний чорний текст на білому фоні, притиснутий до лівого краю. Сумно, правда?

Ось тут виникає проблема: HTML відповідає лише за структуру (це скелет). Але скелет сам по собі нікого не приваблює. Нам потрібна шкіра, одяг, макіяж, стиль.

У реальному житті, коли ви будуєте будинок, архітектор (HTML) каже: "Ось тут буде стіна, а тут — вікно". Але саме дизайнер інтер'єру (CSS) вирішує: "Ця стіна буде тепло-бежевою, а на вікні будуть стильні жалюзі".

Без CSS інтернет виглядав би як текстові документи з 1993 року. Ви б не змогли зробити кнопку зеленою, щоб користувач захотів на неї натиснути. Ви б не змогли розмістити фотографію праворуч від тексту.

Тож питання до вас: Чи готові ви перетворити "скелет" на щось живе і красиве? Якщо так, то нам треба розібратися з правилами цієї гри.

2. 🧠 Теоретична база (Що там "під капотом"?)

CSS розшифровується як Cascading Style Sheets (Каскадні таблиці стилів). Але забудьте про розшифровку на хвилину. Давайте зрозуміємо логіку.

Браузер читає ваш код зверху вниз. Коли він бачить CSS, він ставить собі три питання: 1. КОГО я маю змінити? (Селектор) 2. ЩО саме я маю в ньому змінити? (Властивість) 3. ЯК я маю це змінити? (Значення)

Анатомія одного правила

Це — фундамент. Якщо ви зрозумієте це зараз, ви зрозумієте 90% CSS.

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

Розберемо це як хірург:

  1. Селектор (h1): Це адресат. Ми кажемо браузеру: "Гей, знайди всі заголовки першого рівня на сторінці!".
  2. Блок оголошень ({ ... }): Це все, що знаходиться всередині фігурних дужок. Це "конверт" із вказівками для нашого адресата.
  3. Властивість (color, font-size): Це характеристика, яку ми міняємо. Колір, розмір, ширина, відступ.
  4. Значення (blue, 24px): Це конкретний вигляд. Синій, 24 пікселі тощо.

⚠️ Що треба запам'ятати залізно (Синтаксис):

  • Після властивості завжди ставимо двокрапку (:).
  • В кінці кожного рядка правила ставимо крапку з комою (;). Це як крапка в реченні. Якщо забудете — браузер "зламається" і перестане читати далі.
  • Правила живуть у фігурних дужках { }.

Інтуїтивно: Уявіть, що ви замовляєте піцу. * Селектор: Піца "Маргарита". * Властивість: Розмір. * Значення: Велика. * Властивість: Бортик. * Значення: Сирний.

3. 🧪 Приклади (Від "Hello World" до реальності)

Приклад 1: Мінімальний старт

Давайте просто перефарбуємо звичайний текст абзацу (<p>).

p {
    color: red;
}

Питання до вас: Що станеться з усіма абзацами на сторінці? (Пауза для роздумів) Результат: Абсолютно весь текст, який знаходиться в тегах <p>, стане червоним. Просто, як двері.

Приклад 2: Типовий елемент (Кнопка)

Уявіть, що у вас є посилання, яке має виглядати як кнопка "Купити".

button {
    background-color: orange; /* Фон */
    color: white;             /* Колір тексту */
    padding: 10px 20px;       /* Відступи всередині: 10 зверху/знизу, 20 збоку */
    border: none;             /* Прибираємо стандартну рамку */
    border-radius: 5px;       /* Закруглені кути - це сучасно! */
}

Чому це працює: Ми комбінуємо кілька властивостей в одному блоці { }. Браузер застосовує їх усі одночасно до елемента button.

Приклад 3: Щось пішло не так...

Подивіться на цей код уважно. Що тут не так?

h2 {
    color: green
    font-size: 20px;
}

Очікування: Заголовок зелений і розміром 20px. Реальність: Скоріш за все, font-size не спрацює, або й весь стиль зламається. Чому? Ми забули крапку з комою (;) після green. Браузер читає це як green font-size: 20px, не розуміє, що це за колір такий, і ігнорує інструкцію. Синтаксис має значення!

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

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

  1. 🔹 Копіпаст-майстер: Напишіть правило для тегу body. Зробіть йому background-color: lightblue;. Перевірте, чи змінився фон усієї сторінки.

  2. 🔹 Зміна умов: Візьміть приклад з кнопкою (Приклад 2). Змініть її так, щоб текст був чорним (black), а фон — жовтим (yellow).

  3. 🔹 Дебаггінг (Пошук помилок): Знайдіть і виправте 3 помилки в цьому коді: css h1 { color red; font-size: 30px text-align: center; )

  4. 🔹 Міні-кейс: Вам потрібно оформити "цитату дня". У вас є тег <blockquote>. Напишіть CSS, який робить текст курсивом (font-style: italic;) і сірого кольору (gray).

  5. 🔹 "А що, якщо...": Що станеться, якщо написати дві однакові властивості? css p { color: red; color: blue; } Якого кольору буде текст? Спробуйте здогадатися, чому (підказка у слові Cascading — каскадність).

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

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

  1. Охайність — це професіоналізм.

    • Новачок: Пише все в один рядок h1{color:red;font-size:12px;}. Це працює, але читати це — пекло.
    • Профі: Використовує відступи. Кожна властивість — з нового рядка.

  2. Не зубріть, а розумійте. Я не пам'ятаю всі властивості CSS напам'ять. І Девід Малан не пам'ятає. Ми пам'ятаємо логіку. Якщо мені треба зробити тінь, я гуглю "css box shadow mdn".

    • Порада: Ваш найкращий друг — це документація MDN (Mozilla Developer Network). Не бійтеся підглядати.

  3. Англійська мова. CSS — це просто англійська мова. text-align: center означає буквально "вирівнювання тексту: центр". Якщо ви знаєте англійську хоча б на базовому рівні, ви вже знаєте половину CSS.

6. 🧩 Підсумок

Сьогодні ми зробили перший крок у світ дизайну.

  • Ми зрозуміли, що HTML — це каркас, а CSS — це ремонт.
  • Ми вивчили формулу: Селектор { Властивість: Значення; }.
  • Ми навчилися знаходити дрібні, але фатальні помилки (привіт, крапка з комою!).

Тепер ви вмієте: Змінювати колір, фон та розмір будь-якого стандартного елемента на сторінці.

🤔 Тизер наступного уроку: Але стривайте... Що робити, якщо ми хочемо, щоб один абзац був червоним, а інший — синім? Зараз наше правило p { color: red; } фарбує всі абзаци. Як нам вказати на конкретного "хлопця" в натовпі? Про це ми поговоримо на наступному уроці, тема: "Класи (Classes) та Ідентифікатори (IDs)".

А поки що — щасти вам у кодуванні!

← До списку уроків Наступний урок →