Що робить тег <link>? Як підключається CSS?

HTMLJunior~1 хв читання

Тег <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

Браузер завантажує HTML.
Доходить до <head>.
Бачить <link rel="stylesheet" href="style.css">.
Завантажує CSS-файл і застосовує стилі до DOM.
Після цього рендерить сторінку з оформленням.

Підсумок:

Властивість	Опис
Тег	`<link>`
Тип	Непарний
Основне призначення	Підключення зовнішніх ресурсів (насамперед CSS)
Розташування	Усередині `<head>`
Ключові атрибути	`rel`, `href`, `media`
Важливість	Критично важливий для оформлення та структури

Простими словами: <link> каже браузеру:

«Візьми ось цей файл і використай його для оформлення сторінки.»

А CSS підключається саме через нього, щоб сторінка виглядала не як голий HTML, а як повноцінний, стилізований сайт.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.