Тег link
Тег link подключает CSS файлы на HTML страницу. Кроме того, link подключает некоторые другие файлы, например, фавикон. (Фавикон — это ярлычок сайта, который виден во вкладке браузера. Его также можно увидеть в некоторых поисковиках при поиске напротив сайтов, например в Яндексе).
У данного тега очень много атрибутов и они могут принимать разнообразные значения, однако в реальной жизни они все практически не используются. Самое популярное — это подключение CSS и добавление фавикона.
Как подключить CSS в HTML5: . В более ранних версиях нужно было добавлять атрибут type в значении text/css. В HTML5 так тоже можно делать, но это не обязательно.
Тег link не требует закрывающего тега.
Атрибуты
| Атрибут | Описание |
|---|---|
| href | Путь к подключаемому файлу. |
| media | Тип устройства, для которого следует подключить файл. Что имеется ввиду — вы можете подключить CSS файл только для больших экранов (значение screen ) или только для маленьких экранов: для мобильников или планшетов (значение handheld ). Возможные значения: all, braille, handheld, print, screen, speech, projection, tty, tv. Подробнее смотрите ниже. |
| rel | Тип подключаемого файла. Возможные значения: stylesheet | alternate. Значение stylesheet указывает на то, что подключается CSS файл, значение alternate используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей. |
| charset | Кодировка подключаемого файла. В настоящее время стандартом является utf-8 . |
| type | Тип данных подключаемого файла. Для CSS следует использовать text/css, для фавикона: image/x-icon. |
Значения атрибута media
В HTML5 в качестве значений могут быть указаны медиа-запросы.
| Значение | Описание |
|---|---|
| all | Все устройства. |
| screen | Экран монитора. |
| handheld | Телефоны, смартфоны, устройства с маленьким экраном. |
| braille | Устройства, основанные на системе Брайля, предназначены для слепых людей. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры. |
| Принтеры. | |
| projection | Проекторы. |
| tty | Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана. Для них не должны использоваться пиксели в качестве единиц измерения. |
| tty | Телевизоры, которые умеют открывать web страницы (бывает и такое). |
Значение по умолчанию: all .
Пример
Давайте посмотрим, как выглядит структура простейшей html страницы, к которой добавим подключение CSS файлов и фавикона:
Смотрите также
- тег style ,
который добавляет CSS прямо на странице - атрибут style , который задает стили конкретному тегу
Link type text css rel stylesheet href http
HTML-тег устанавливает связь между документом и внешним ресурсом, например, таблицей стилей.
Атрибуты тега :
- href — адрес гиперссылки.
- rel — указывает связь между текущим документом и связанным ресурсом.
- as — тип ресурса, на который вы ссылаетесь.
- type — MIME-тип связанного ресурса.
- media — медиазапрос, для которого предназначен связанный ресурс.
- sizes — размер иконок в ссылке rel=»icon» .
- integrity — ожидаемое криптографическое хеш-значение связанного ресурса.
- crossorigin — как элемент будет обрабатывать CORS-запросы.
Примеры использования
Ссылка на таблицу стилей для устройств с определённой шириной:
Для чего использовать тег
- Для ссылки на таблицу стилей.
- Для ссылки на иконку, которая будет отображаться в адресной строке браузера или на странице.
- Для ссылки на RSS-канал.
- Для ссылки на канонический URL, чтобы избежать проблем с дублированием контента.
Глобальные атрибуты
Ограничения
Тег может использоваться только для ссылки на внешние ресурсы. Его нельзя использовать для определения внутренних стилей или скриптов.
Нюансы
- Если атрибут rel имеет значение stylesheet , атрибут type может быть опущен, так как по умолчанию используется значение text/css .
- Если атрибут rel имеет значение icon , атрибут type должен иметь значение image/png .
- Атрибут as используется только для запросов предварительной загрузки.
🔡 Другие теги для изменения текста
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.