Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить тег <link>? Як підключається CSS?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Тег **`<link>`** слугує для зв'язування HTML-документа із зовнішніми файлами, найчастіше він використовується для підключення CSS-стилів, які задають оформлення сторінки: кольори, шрифти, відступи, фон, анімації тощо. **Ключове:** Тег `<link>` завжди розміщується всередині блоку `<head>`, щоб браузер завантажив стилі до рендерингу сторінки, і є непарним тегом без закривного тегу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняТег `<link>` слугує для **зв'язування HTML-документа із зовнішніми файлами**. Найчастіше він використовується для **підключення CSS-стилів**, які задають оформлення сторінки: кольори, шрифти, відступи, фон, анімації тощо. --- ### 1. Загальний синтаксис тегу `<link>` ```html <link rel="stylesheet" href="style.css"> ``` Розшифровка: - `rel="stylesheet"`: вказує тип зв'язку: це таблиця стилів; - `href="style.css"`: шлях до файлу CSS (може бути відносним або абсолютним); - `<link>`: **непарний тег** (не має закривного тегу). --- ### 2. Де розміщується Тег `<link>` завжди розміщується **всередині блоку** `<head>`, щоб браузер завантажив стилі **до рендерингу сторінки**: ```html <head> <meta charset="UTF-8"> <title>Мій сайт</title> <link rel="stylesheet" href="style.css"> </head> ``` --- ### 3. Приклад підключення CSS #### Зовнішній файл: ```html <link rel="stylesheet" href="styles/main.css"> ``` Такий спосіб є пріоритетним: - код стилів відокремлений від HTML, - можна повторно використовувати CSS-файл на кількох сторінках, - сторінка швидше кешується браузером. #### Абсолютний шлях: ```html <link rel="stylesheet" href="https://example.com/css/main.css"> ``` Використовується під час підключення зовнішніх бібліотек (наприклад, Bootstrap). #### Кілька файлів: ```html <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="media.css"> ``` Порядок важливий: **останній файл може перевизначити попередні**. --- ### 4. Атрибути `<link>` | Атрибут | Призначення | Приклад | |---|---|---| | `rel` | Визначає тип зв'язку | `rel="stylesheet"` | | `href` | Шлях до файлу | `href="style.css"` | | `type` | MIME-тип (опціонально) | `type="text/css"` | | `media` | Для яких пристроїв/екранів застосовувати | `media="screen and (max-width: 768px)"` | | `as` | Для попереднього завантаження (`rel="preload"`) | `as="style"` | --- ### 5. Як працює підключення CSS 1. Браузер завантажує HTML. 2. Доходить до `<head>`. 3. Бачить `<link rel="stylesheet" href="style.css">`. 4. Завантажує CSS-файл і застосовує стилі до DOM. 5. Після цього рендерить сторінку з оформленням. --- ### Підсумок: | Властивість | Опис | |---|---| | Тег | `<link>` | | Тип | Непарний | | Основне призначення | Підключення зовнішніх ресурсів (насамперед CSS) | | Розташування | Усередині `<head>` | | Ключові атрибути | `rel`, `href`, `media` | | Важливість | Критично важливий для оформлення та структури | --- **Простими словами:** `<link>` каже браузеру: > «Візьми ось цей файл і використай його для оформлення сторінки.» А **CSS підключається саме через нього**, щоб сторінка виглядала не як голий HTML, а як повноцінний, стилізований сайт.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.