Запис
Опис
🔹 1. Inline-стилі (вбудовані напряму в елемент)
📘 Цей спосіб задає стилі прямо в атрибуті style у самому HTML-елементі. Не рекомендується використовувати для великих проєктів.
<h1 style="color: red">Some Title - <a href="#">link</a></h1>
🔹 2. Вбудовані стилі через тег <style> у <head>
📘 Цей метод дозволяє задати стилі для кількох елементів відразу без окремого файлу. Підходить для невеликих сторінок або тестування.
<style>
div {
max-width: 1200px;
margin: 0 auto;
background-color: antiquewhite;
padding: 10px 20px;
}
</style>
🔹 3. Зовнішній CSS-файл через <link>
📘 Найкраща практика для організації стилів. Стилі зберігаються в окремому .css файлі, що полегшує підтримку коду.
<link rel="stylesheet" href="../css/style.css">
🔹 4. Зовнішній CSS-файл через @import у стилях
📘 Альтернативний спосіб підключення зовнішнього CSS-файлу через директиву @import всередині тегу <style>. Не рекомендується — читається гірше та може впливати на продуктивність.
<style> @import '../css/style2.css'; </style>
Стилі підключаються у тег <head> для того, щоб браузер мав доступ до всіх правил оформлення ще до початку побудови вмісту сторінки. Це дозволяє одразу правильно відобразити структуру та зовнішній вигляд елементів, не викликаючи візуального "перемальовування" після завантаження.
Коли сторінка завантажується, браузер послідовно обробляє HTML-код зверху вниз. Якщо CSS-стилі знаходяться у <head>, то браузер:
- Зчитує HTML-розмітку.
- Виявляє та обробляє всі CSS-правила.
- Формує DOM (структуру елементів) і застосовує до них стилі.
- Лише після цього показує сторінку користувачу.
Це називається рендерингом. Якщо стилі були б підключені пізніше (наприклад, внизу сторінки), то елементи могли б спочатку з’явитися без стилів, а потім “перемалюватися” — це негативно впливає на UX.
📘 Тобто, правильне підключення стилів у <head> — це частина best practices у фронтенд-розробці.
Список відтворення
Матеріали для самовивчення