nmk

Лабораторне заняття №3 (2 години). Робота з селекторами, кольорами та типографікою.

Мета

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

План

  1. Підключення зовнішнього файлу style.css до розмітки.
  2. Скидання базових стилів браузера (CSS Reset).
  3. Підключення кастомних шрифтів (Google Fonts).
  4. Налаштування глобальних змінних (CSS Variables) для кольорів та типографіки.
  5. Стилізація текстових елементів (заголовків, параграфів, посилань).
  6. Стилізація базових блоків (фон сторінки, кольори кнопок).
  7. Робота з каскадом та специфічністю (ID vs Class).
  8. Стилізація Hero-секції (фонові зображення та накладання).

Хід роботи

Увага: Продовжуємо роботу над інтернет-магазином “TechShop” у вашому репозиторії.

Порада: Якщо у вас ще немає репозиторію, створіть його за допомогою команди git init та додайте файл .gitignore з переліком папок та файлів, які не потрібно відстежувати (наприклад, node_modules, .env, dist, build). Ви також можете працювати над створенням власного сайту (наприклад, під час лабораторної роботи ми працювали над сайтом “My Portfolio”). Головна умова - виконання всіх пунктів плану.

  1. Підготовка коду:
    • Переключіться на гілку main та синхронізуйте її: git checkout main && git pull.
    • Створіть нову гілку для стилів: git checkout -b feature/basic-styles.
  2. Підключення CSS та шрифтів:
    • Переконайтеся, що папка assets/css існує, і в ній є файл style.css.
    • У файлі index.html всередині тегу <head> підключіть CSS-файл за допомогою тегу <link rel="stylesheet" href="...">.
    • Зайдіть на Google Fonts, оберіть сучасний шрифт (наприклад, Inter або Roboto), скопіюйте <link>-теги та вставте їх у свій <head>. Приклад підключення: 
      <!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

  3. Скидання стилів (Reset) та змінні: Браузери мають власні вбудовані стилі (User Agent Styles), які відрізняються (наприклад, відступи в Chrome та Safari можуть бути різними). Щоб ваш сайт виглядав однаково скрізь, використовують спеціальні файли для “нулювання” цих стилів.

    Існує два основні підходи:

    • Reset.css (агресивний): Повністю видаляє всі стилі (навіть жирність заголовків та маркери списків). Ви починаєте з чистого аркуша.
    • Normalize.css (лагідний): Не видаляє все, а лише виправляє розбіжності між браузерами та зберігає корисні дефолтні стилі (наприклад, заголовки залишаться заголовками).

    Порада: Сучасні розробники часто використовують “Modern Reset” — невеликий набір правил, який фокусується на виправленні найпоширеніших проблем (як-от box-sizing).

    Черговість підключення: Завжди підключайте файл скидання стилів ПЕРЕД вашим власним CSS-файлом. Це гарантує, що ваші стилі перекриють (overrule) стандартні.

    <link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/style.css">

    Практичний приклад (Simple Reset): Відкрийте style.css і на самому початку додайте:

    /* Скидання відступів та рамок для всіх елементів */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Розміри елемента включають внутрішні відступи та рамки */
}

/* Глобальні змінні проєкту (Палітра TechShop) */
:root {
  --primary-color: #2563eb; /* Ваш фірмовий синій */
  --primary-hover: #1d4ed8; /* Колір при наведенні */
  --accent-color: #f59e0b;  /* Акцентний помаранчевий */
  --text-dark: #1f2937;     /* Основний текст */
  --text-light: #6b7280;    /* Другорядний текст */
  --bg-color: #f9fafb;      /* Фон сторінки */
  --font-main: "Inter", sans-serif;
}
  4. Глобальна типографіка:
    • Для тегу body задайте:
      • шрифт (використовуючи змінну var(--font-main)),
      • загальний колір тексту color: var(--text-dark);,
      • колір фону сторінки background-color,
      • базовий розмір шрифту та висоту рядка (line-height).

    Приклад коду:

     body {
   font-family: var(--font-main);
   background-color: var(--bg-color);
   color: var(--text-dark);
   line-height: 1.6; /* Покращує читабельність тексту */
   font-size: 16px;
 }
  5. Селектори елементів, класів та псевдокласів:
    • Стилізуйте всі заголовки H1 - H3 (зробіть їх жирними, додайте відступи margin-bottom).
    • Стилізуйте стандартні посилання <a>:
      • приберіть підкреслення (text-decoration: none;),
      • задайте колір --primary-color,
      • додайте псевдоклас :hover (щоб при наведенні колір змінювався на темніший).

    Важливо про специфічність: Якщо ви задасте стиль для a { color: red; }, а потім для .nav-link { color: blue; }, посилання з класом .nav-link буде синім, тому що селектор класу має більшу “вагу” (специфічність), ніж селектор тегу. Найвищу вагу має ID (#id).

    Вкладені селектори (Descendant Selectors): Використовуйте їх, щоб стилізувати елементи лише всередині певного блоку:

     .footer a {
   color: var(--text-light); /* Посилання лише у футері будуть сірими */
 }
    • Скористайтесь селектором класу (додайте у HTML до вашої кнопки клас class="btn"). Стилізуйте кнопку .btn:
      • колір фону, колір тексту, поля (padding), закруглення кутів (border-radius), відміна стандартного бордера.
      • додайте тінь (box-shadow) та прозорість (rgba) для ефектів.

    Сучасна кнопка:

     .btn {
   display: inline-block;
   padding: 12px 24px;
   background-color: var(--primary-color);
   color: white;
   border-radius: 8px;
   font-weight: 600;
   text-transform: uppercase; /* Текст великими літерами */
   letter-spacing: 1px;       /* Розрідження літер */
   transition: all 0.3s ease;
   box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2); /* Ніжна синя тінь */
 }

 .btn:hover {
   background-color: var(--primary-hover);
   transform: translateY(-2px); /* Кнопка ніби піднімається */
   box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3);
 }
  6. Стилізація секції Hero (Фон та Центрування):
    • Знайдіть красиве фото на Unsplash.
    • Для вашої головної секції (наприклад, <section class="hero">) задайте фон.

    Приклад стилізації Hero:

     .hero {
   height: 60vh; /* 60% висоти екрану */
   background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('path-to-image.jpg');
   background-size: cover;
   background-position: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: white;
 }

 .hero h1 {
   font-size: 3rem;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
 }

  7. Збереження та відправка (Commit & Push):

    • Перевірте відображення сторінки у браузері. Вона повинна виглядати значно охайніше, з новими шрифтами та корпоративними кольорами (хоча елементи ще можуть стояти в один стовпець).
    • Зробіть коміт: git add . та git commit -m "Add typography and basic colors using CSS variables".
    • Відправте гілку. Зливати результати лабораторної роботи з гілкою main не потрібно.

Результат

Головна сторінка сайту набула корпоративних кольорів, використовує кастомний шрифт Google Fonts. Кнопки та посилання реагують на наведення (hover).

Контрольні питання

  1. Чому важливо використовувати властивість box-sizing: border-box на всіх елементах *?
  2. Що таке CSS-змінні (:root) і чому вони кращі за просто написання HEX-кодів (#2563eb) у кожному селекторі?
  3. Що таке специфічність селекторів? Який селектор спрацює, якщо до одного елемента застосовано стилі через тег p та клас .text?
  4. Навіщо використовувати linear-gradient поверх фонового зображення в секції Hero?
  5. Як працює властивість transition і як вона впливає на User Experience (UX)?
  6. Яка різниця між color: #000 та color: rgba(0,0,0,0.5)?