Тег <link> в html создает взаимосвязи между вашим HTML-документом, другими документами и ресурсами. Также его можно использовать для отображения элементов при печати, определения фавиконов, альтернативных форм и связывания сценариев и таблиц стилей.
В приложении будет четыре таких тега:
<link rel="icon" href="/appleicon.png"/>2
<link rel="apple-touch-icon" href="/appleicon.png"/>
<link rel="apple-touch-startup-image" href="startup.png"/>
<link rel="stylesheet" href="styles.css"/>
<link> можетсопровождатьсятакимиатрибутами, какhref, rel, type, sizes, hreflang, media иtitle. rev иcharset элемента<link> в HTML5 упразднили.Синтаксис:
<link href="url to resource" rel="type of relationship" title="title"/>
rel задает отношения между ресурсом, который указан в href. Атрибуты rel и href обязательны. Три первых тега из четырех, которые мы упомянули выше, нужны для работы с картинками.
Элементы <link> для связи с таблицами стилей
Элемент используют для отправки различных таблиц стилей CSS на ПК, планшеты или смартфоны. Это зависит от того, под каким углом в конкретный момент стоит дисплей устройства, или в зависимости от ширины окна пользовательского браузера.
Каждая таблицу стилей можно настроить для работы с разными медиа, размерами браузера, разрешениями экрана, ориентациями окна браузера:
<link href="/css/styles.css" media="all" rel="stylesheet"/>
<link href="/css/tinylittledevice.css"
media="only screen and (max-device-width: 480px)" rel="stylesheet"/>
<link href="/css/print.css" media="print" rel="stylesheet"/>
Атрибуты <link>
-
href - обязательный атрибут - URL и указывает на целевой файл <link>.
-
media - показывает, к какому типу медиа относится содержимое ссылки.
-
hreflang - язык медиаинформации, которая связана с документом.
-
rel – показывает отношение <link> к актуальному документу.
-
sizes - новый атрибут, который определяет размер пиктограммы, если она медиа имеет ее форму.
media
Описывает, к какому типу медиа имеет отношение контент, на который можно перейти по ссылке. По умолчанию значение – all, источник - href .
Значениядляразличныхмедиа: screen, tty, tv, projection, handheld, print, braille, aural иall. Сюда можно включать media-запросы. Важность атрибута значительно повысилась с появлением CSS3. Теперь можно выдавать разные таблицы стилей на основе свойств media.
Так это осуществляется в зависимости от того, в какой ориентации – альбомной или книжной – работает ваша программа:
<link rel="stylesheet" media="всеи (orientation:portrait)" href="prtrt.css"/>
<link rel="stylesheet" media="всеи (orientation:landscape)" href="lndscp.css"/>
Запросы @media — это одна из новинок CSS3. Вот наиболее важные значения этого атрибута, распро странившиеся в последнее время:
- (min/max)-width — ширина области просмотра;
- (min/max)-height — высота области просмотра;
- (min/max)-device-width — ширинаэкрана;
- (min/max)-device-height — высотаэкрана;
- orientation — ориентация экрана, книжная (высота больше ширины) или аль бомная (высота меньше ширины;
- (min/max)-aspect-ratio — соотношение ширины и высоты экрана;
- (min/max)-device-aspect-ratio — соотношение ширины и высоты устройства.