Урок 78 із 104
75%
← Назад

Нормалізація стилів у CSS

Нормалізація стилів — це підхід, за якого стандартні стилі браузера не скидаються повністю, а узгоджуються між різними браузерами. Для цього можна використовувати готову бібліотеку normalize.css.

Що таке нормалізація стилів?

Не завжди потрібно повністю скидати стандартні стилі браузера. Альтернативний підхід називається нормалізацією стилів.

Під час нормалізації корисні стандартні стилі браузера зберігаються, але відмінності між браузерами виправляються та узгоджуються. У результаті елементи мають більш передбачуваний вигляд у різних браузерах.

Reset і Normalize — у чому різниця?

  • Reset CSS намагається прибрати або скинути стандартні стилі браузера.
  • Normalize CSS не прибирає все, а виправляє відмінності та зберігає корисні стандартні стилі.
  • Після normalize.css заголовки, списки та інші елементи все одно мають базове оформлення.
  • Після reset.css багато стандартних відступів та інших стилів потрібно задавати самостійно.

normalize.css

Одним із відомих готових рішень для нормалізації стилів є normalize.css. Це CSS-файл, який містить правила для узгодження стандартного оформлення HTML-елементів між браузерами.

❗ Важливо:

normalize.css не є CSS-фреймворком і не задає дизайн сайту. Його завдання — зробити стандартні стилі браузера більш узгодженими та передбачуваними.

Підключення normalize.css

Якщо normalize.css використовується окремим CSS-файлом, його потрібно підключити до HTML до власного файлу стилів. Тоді ваші стилі зможуть перевизначати правила нормалізації.

<head>

<link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="styles.css"> </head>

Практика

📌 Завдання:
  1. Підключіть normalize.css до будь-якого HTML-файлу.
  2. Не додавайте власних CSS-стилів.
  3. Створіть на сторінці заголовок, абзац, список, посилання та кнопку.
  4. Перегляньте сторінку та зверніть увагу на стандартне оформлення елементів.
💡 Показати підказку

Підключайте normalize.css перед власним CSS-файлом. Для цього завдання власний CSS можна взагалі не підключати.

✅ Показати відповідь
<!DOCTYPE html> <html lang="uk"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Normalize CSS</title>

<link rel="stylesheet" href="normalize.css"> </head> <body> <h1>Заголовок сторінки</h1>

<p> Це звичайний абзац тексту. </p>

<ul> <li>Перший пункт</li> <li>Другий пункт</li> <li>Третій пункт</li> </ul>

<a href="#">Посилання</a>

<button type="button">Кнопка</button>

</body> </html>