Тег <link>: подключение CSS
Как подключить таблицу стилей и чем link отличается от обычной ссылки a.
Зачем нужен этот элемент
link описывает отношение документа к внешнему ресурсу. Наиболее частый случай — подключение CSS-файла в head через rel=»stylesheet». Пользователь не видит отдельной кликабельной ссылки: браузер загружает ресурс и использует его для страницы.
Один stylesheet можно подключить на нескольких страницах, чтобы общий дизайн менялся централизованно. Проверяйте путь к файлу и статус ответа во вкладке Network. Если вместо CSS сервер отдаёт HTML-страницу ошибки, стили не применятся.
Синтаксис и пример
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Подключение CSS</title>
</head>
<body><h1>Моя страница</h1></body>
</html>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| rel="stylesheet" | Связь с таблицей стилей. |
| href | Адрес файла CSS. |
| media | Условие применения, например print. |
Частая ошибка
Небольшая практика
Создайте рядом с index.html файл style.css и подключите его. В песочнице внешние ресурсы отключены: проверяйте этот пример в собственных файлах.
Разберите также <style>, <meta>: эти элементы пригодятся в том же интерфейсе.