Давайте узнаем о link элементе и о том, как его использовать для ссылки на внешние таблицы стилей.
Элемент link используется для ссылки на внешние ресурсы, такие как таблицы стилей и иконки сайта. Вот базовый синтаксис для использования link элемента для внешнего файла CSS:
Атрибут rel используется для указания связи между связанным ресурсом и HTML-документом. В этой ситуации нам нужно указать, что этот связанный ресурс является stylesheet.
Считается лучшей практикой разделять HTML и CSS в разных файлах. Разработчик использует link элемент для своего внешнего файла CSS вместо того, чтобы писать все в документе HTML.
Атрибут href используется для указания местоположения URL-адреса внешнего ресурса.
В этом примере косая dot черта сообщает о том, что искать файл нужно в текущей папке или каталоге styles.css.
Элемент link должен быть помещен внутрь head элемента, как показано в следующем примере:
Вы можете встретить несколько link элементов в коде, которые ссылаются на различные таблицы стилей, шрифты и значки. Вот пример использования link элемента для ссылки на внешний шрифт Google под названием Playwright Cuba :
Google Fonts — это набор бесплатных и открытых пользовательских шрифтов, которые можно использовать в любом проекте. Вы можете выбрать, какие шрифты вы хотели бы использовать, и Google предоставит вам необходимый код HTML и CSS. В этом примере значение preconnect атрибута rel сообщает браузеру о необходимости создания раннего соединения со значением, указанным в href атрибуте. Это делается для ускорения времени загрузки этих внешних ресурсов.
Другим распространенным вариантом использования link элемента является ссылка на иконки. Вот пример ссылки на фавикон:
Favicon это сокращение от favorite icon, представляет собой небольшой значок, который обычно отображается на вкладке браузера рядом с заголовком сайта. Многие веб-сайты используют favicon для отображения значка своего бренда.
А теперь немного практики, чтобы посмотреть визуально, как это выглядит. Создаем пустой текстовый файл в блокноте или Notepad++ или в VS Studio Code и вставляем туда блок кода:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Тест шрифта</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Playwrite+CU:wght@100..400&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: 'Playwrite CU', sans-serif;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Текст с подключённым шрифтом Playwrite CU.</p>
</body>
</html>
Сохраняем файл с расширением html и открываем его в браузере. Получаем такую красивую картинку: