Как вставить ссылку в css

Как сделать ссылку

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега , который имеет единственный обязательный атрибут href . В качестве значения используется адрес документа (URL).

Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Начинаются они с указания протокола передачи данных. Так, для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные ссылки начинаются с ключевого слова http:// (пример 1).

Пример 1. Использование абсолютных ссылок

      
Поисковая система Яндекс
  

Относительные ссылки, как следует из их названия, построены относительно текущего документа или адреса.

Примеры относительных адресов

/
/demo/ Эти две ссылки называются неполные и указывают веб-серверу загружать файл index.html (или default.html), который находится в корне сайта или папке demo. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге.

/images/pic.gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic.gif, который находится в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта.

manual/info.html Если перед именем папки нет никаких дополнительных символов, вроде точек, то она размещена внутри текущего каталога (пример 2).

Пример 2. Использование относительных ссылок

      
Посмотрите на мою фотографию!
 
Как сделать такое же фото?
  

Иногда можно встретить в адресе ссылки путь в виде ./file/doc.html . Точка со слэшем (символ /) означает, что отсчет ведется от текущей папки. Подобная запись избыточна и ее можно сократить до file/doc.html .

2.7. CSS-ссылки

CSS-ссылки содержат свойства, которые отвечают за внешний вид гипертекстовых ссылок HTML-документа. Ссылки представляют собой основной способ навигации по сайту, поэтому применение CSS-стилей для оформления улучшит их визуальное восприятие.

Основной способ оформления ссылок заключается в стилизации подчеркивания ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид курсора с помощью свойства cursor .

Оформление гипертекстовых ссылок

• Содержание:
• 1. Псевдоклассы состояний гипертекстовых ссылок
• 2. Выборка отдельных ссылок
• 3. Подчеркивание ссылок
• 4. Изображения для ссылок
• 5. Использование фонового изображения
• 6. Ссылки-кнопки
• 7. Примеры оформления ссылок

1. Псевдоклассы состояний гипертекстовых ссылок

Большинство браузеров выделяют четыре основных состояния гиперссылок, каждому из которых соответствует свой псевдокласс селектора:

• Непосещенная — a:link
• Посещенная — по которой уже выполнялся переход — a:visited
• Не нажатая — над которой находится указатель мыши — a:hover
• Нажатая — которая удерживается мышью — a:active

Используя псевдоклассы для форматирования каждого состояния ссылок, можно дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким — ещё нет, например:

a:link < color: #497DDD; border-bottom: 1px dashed; >a:visited < color: #EF7D55; >a:hover < color: #154088; border-bottom: .07em solid; >a:active

Форматировать ссылки нужно в указанной последовательности, в противном случае состояние стилей перестанет работать (в силу механизма каскадности).

2. Выборка отдельных ссылок

Для стилизации отдельных ссылок нужно задать им стилевой класс, после чего можно будет менять внешний вид выбранных ссылок:

3. Подчеркивание ссылок

Добавление подчеркивания только при наведении на ссылку:

a < text-decoration: none; >a:hover

Внешний вид нижней границы ссылки:

4. Изображения для ссылок

Добавить изображение для ссылки можно с помощью CSS-свойства background-image . Так как элемент является строчным a , то предварительно его нужно преобразовать в блочный элемент a .

Чтобы вставить изображение или иконку перед ссылкой, необходимо добавить отступ с помощью свойства padding-left . Этот прием может пригодиться в случае, когда на странице есть ссылки для загрузки каких-либо документов различных форматов, и вы можете добавить значок-изображение типа файла для большей наглядности.

Если нужно, чтобы значок автоматически добавился ко всем ссылкам, содержащим документы одного формата, можно воспользоваться следующей конструкцией:

a[href$=".pdf"] < background-image: url(images/pdf.png); >

Символ href$ в селекторе атрибута дает браузеру команду найти все атрибуты href , заканчивающиеся определенным образом (в данном случае .pdf ) и добавить к ссылке соответствующий значок.

5. Использование фонового изображения

Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы фоновое изображение:

6. Ссылки-кнопки

Благодаря свойствам background-color , border и padding , ссылкам можно придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств ссылок при наведении курсора мыши a:hover , добавить интересные эффекты.

/*общие стили для всех кнопок*/ a < display: inline-block; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; margin: 15px 25px; padding: 15px 20px; font-size: 20px; font-weight: bold; font-family: 'Montserrat', sans-serif; transition: 0.4s ease-in-out; >/*кнопка 1*/ .one a < border-radius: 10px; color: #EC4D3C; background-color: white; background-image: -webkit-radial-gradient(#FCD2D1 2px, rgba(255, 0, 0, 0) 2px); background-image: -o-radial-gradient(#FCD2D1 2px, rgba(255, 0, 0, 0) 2px); background-image: radial-gradient(#FCD2D1 2px, transparent 2px); background-size: 12px 12px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.one a:hover < background-size: 16px 16px; >/*кнопка 2*/ .two a < border-radius: 10px; color: #F17434; background-color: white; background-image: -webkit-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px), -webkit-repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: -o-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px), -o-repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px), repeating-linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.two a:hover < background-image: -webkit-repeating-linear-gradient(left, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: -o-repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px); background-image: repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px, transparent 2px, transparent 10px); >/*кнопка 3*/ .three a < border-radius: 10px; color: #36454A; background: -webkit-linear-gradient(top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: -o-linear-gradient(top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: linear-gradient(to top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); box-shadow: 2px 2px 3px black; >.three a:hover < background: -webkit-linear-gradient(bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: -o-linear-gradient(bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); background: linear-gradient(to bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%); >/*кнопка 4*/ .four a < border-radius: 10px; color: #598428; background: -webkit-linear-gradient(70deg, #C3D600, #C3D600 50%, #A5B400 50%); background: -o-linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%); background: linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.four a:hover < background: -webkit-linear-gradient(-110deg, #C3D600, #C3D600 50%, #A5B400 50%); background: -o-linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%); background: linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%); >/*кнопка 5*/ .five a < border-radius: 10px; color: #40382D; box-shadow: inset 0 -5px 0 #40382D; >.five a:hover < box-shadow: inset 0 -60px 0 #40382D, 2px 2px 3px rgba(0, 0, 0, 0.3); color: #DECDA5; >/*кнопка 6*/ .six a < border-radius: 10px; color: #CEA640; background: #FFF79A; border-bottom: 5px solid #E1B442; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); >.six a:hover < box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); >/*кнопка 7*/ .seven a < color: #45A0A4; background: -webkit-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat; background: -o-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat; background: linear-gradient(to right, #E3612C 0, #E3612C 33.3%, #FCCE30 33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat; background-size: 70% 5px; >.seven a:hover < background-size: 100% 5px; >/*кнопка 8*/ .eight a < border-radius: 10px; background: #E8CCB5; color: #B05151; padding: 15px 30px; position: relative; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); >.eight a:before, .eight a:after < content: ""; display: inline-block; position: absolute; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #F58262; box-shadow: inset 0 -2px 0 #B05151; opacity: 0; transition: .5s ease-in-out; >.eight a:before < left: 13px; >.eight a:after < right: 13px; >.eight a:hover:before, .eight a:hover:after < opacity: 1; >/*кнопка 9*/ .nine a < color: #E7E5DD; text-shadow: 1px 1px black; background: url(https://html5book.ru/wp-content/uploads/2015/01/borger-grey.png) repeat-x; border-bottom: 1px solid #bfc1ad; border-left: 1px solid #bfc1ad; border-right: 1px solid #bfc1ad; >.nine a:hover < background-position: 300px 0; >/*кнопка 10*/ .ten a < color: #E7E5DD; border-radius: 25px; border: 3px solid #E7E5DD; >.ten a:hover < color: #BDB9AB; background: #E7E5DD; >.ten a span < opacity: 0; padding-left: 5px; padding-right: 5px; font-weight: bold; transition: 0.4s ease-in-out; >.ten a:hover span < opacity: 1; padding-left: 10px; padding-right: 10px; color: #BDB9AB; >/*кнопка 11*/ .eleven a < box-sizing: border-box; border: 1px solid white; color: white; font-size: 12px; font-style: italic; font-weight: 400; letter-spacing: 1.2px; line-height: 1; padding: 15px 40px; position: relative; >.eleven a:after

7. Примеры оформления ссылок

Гипертекстовые ссылки можно оформить различными способами, но основной прием оформления основывается на изменении внешнего вида ссылки при наведении на нее курсором мыши — состояние ссылки a:hover .

/*общие стили для всех ссылок*/ a < text-decoration: none; display: inline-block; padding: 5px 10px; letter-spacing: 1px; margin: 0 20px; font-size: 24px; font-family: 'Fredoka One', cursive; transition: .3s ease-in-out; >/*первая ссылка*/ .s1 < color: #FFD201; letter-spacing: 1px; border-bottom: 1px solid transparent; border-top: 1px solid transparent; >.s1:hover < border-bottom: 1px solid #FFD201; border-top: 1px solid #FFD201; >/*вторая ссылка*/ .s2 < color: #969696; text-shadow: 1px 1px black; letter-spacing: 1px; border-bottom: 2px solid transparent; >.s2:hover < color: #F54318; border-bottom: 2px solid #F54318; box-shadow: 0 1px 0 white, 0 2px 0 #969696; >/*третья ссылка*/ .s3 < color: #BA7D67; border: 2px solid transparent; >.s3:hover < border: 2px solid #BA7D67; >/*четвертая ссылка*/ .s4 < color: #2AABBA; font-style: italic; padding-left: 35px; background: url(https://html5book.ru/wp-content/uploads/2019/04/pdf-icon.png) no-repeat left; text-decoration: underline; >.s4:hover < color: #C9D414; >/*пятая ссылка*/ .s5 < color: #CBB8AA; position: relative; >.s5 < text-shadow: 1px 1px white, 2px 2px #6A5F55; >.s5:hover < text-shadow: 1px 1px 1px #6A5F55; >/*шестая ссылка*/ .s6 < color: #E7805E; border-bottom: 1px dashed; >.s6:hover < border-bottom: 1px solid #9B8381; >/*седьмая ссылка*/ .s7 < color: #D5A39C; >.s7:hover < transform: scaleX(1.1); >/*восьмая ссылка*/ .s8 < color: #92B8C5; text-shadow: 1px 1px 1px #555555; >.s8:hover < position: relative; top: 2px; left: 2px; >/*девятая ссылка*/ .s9 < color: #B2BBC0; text-shadow: 1px 0 #4D575D; >.s9:hover < transform: rotate(-5deg); >/*десятая ссылка*/ .s10 < color: #B79DCC; position: relative; >.s10:after < content: ""; display: block; position: relative; width: 100%; margin: auto; border-bottom: 3px dashed #C1CF00; bottom: -5px; transition: .5s ease-in-out; >.s10:hover:after < width: 0; >/*одиннадцатая ссылка*/ .s11 < background-image: linear-gradient(#FE5568 50%, #FE5568 50%), linear-gradient(silver 50%, silver 50%); background-position: center bottom; background-repeat: no-repeat; background-size: 0 2px, 100% 2px; color: #1E3A52; padding-bottom: 3px; transition: .5s ease-in-out; >.s11:hover < background-size: 100% 2px, 100% 2px; color: #FE5568; >/*двенадцатая ссылка*/ .s12 < background-image: linear-gradient(#EE5E4F 50%, #EE5E4F 50%), linear-gradient(silver 50%, silver 50%); background-position: center bottom; background-repeat: no-repeat; background-size: 0 .063em, 100% .063em; color: #607584; padding-bottom: .188em; transition: background-size .5s; >.s12:hover < background-size: 100% .063em, 100% .063em; background-position: left bottom; >/*тринадцатая ссылка*/ .s13 < color: #34495e; line-height: 1.2; position: relative; padding: 0 14px; text-transform: uppercase; >.s13:after < content: ""; height: 100%; min-width: 4px; background: #34495e; position: absolute; left: 0; bottom: 0; transition: .5s; >.s13:hover:after < min-width: 100%; background: #95a5a6; opacity: .35; >/*четырнадцатая ссылка*/ .s14 < border-bottom: 2px solid #5be; color: #555; background-image: linear-gradient(180deg, transparent 65%, #5bf 65%); background-position: 0% 100%; background-repeat: no-repeat; background-size: 100% 0%; >.s14:hover

Как создать HTML кнопку, которая действует как ссылка

Есть много способов создания HTML кнопки, которая действует как ссылка, т.е., когда вы нажимаете на эту кнопку, она перенаправляется на указанный URL-адрес.

Вы можете выбрать один из следующих методов добавления ссылки на HTML кнопку.

Добавьте строчный onclick event

Пример

html> html> head> title>Заголовок документа title> head> body> button onclick="window.location.href = 'https://w3docs.com';">Click Here button> body> html>

Этот пример может не работать, если кнопка находится внутри тега .

Пример

html> html> head> title>Заголовок документа title> head> body> form> input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs"/> form> body> html>

Ссылки не будут работать, если JavaScript не используется, а поисковая система может проигнорировать такие ссылки.

Используйте атрибут action или formaction внутри элемента .

1. атрибут action

Пример

html> html> head> title>Заголовок документа title> head> body> form action="https://www.w3docs.com/"> button type="submit">Click me button> form> body> html>

Для того, чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank» .

Пример

html> html> head> title>Заголовок документа title> head> body> form action="https://www.w3docs.com/" method="get" target="_blank"> button type="submit">Click me button> form> body> html>

Так как нет форм и данных, этот пример семантически не будет иметь смысла. Но данная разметка допустима.

1. б. атрибут HTML5 formaction .

Пример

html> html> head> title>Заголовок документа title> head> body> form> button type="submit" formaction="https://www.w3docs.com">Click me button> form> body> html>

Атрибут formaction используется только для кнопок с type=”submit”. Так как этот атрибут является HTML5-specific, он может слабо поддерживаться в старых браузерах.

Добавьте ссылку в стиле HTML кнопки (используя CSS)

Пример

html> html> head> title>Заголовок документа title> style> .button < background-color: #FF4500; border: none; color: white; padding: 20px 34px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; > style> head> body> a href="https://www.w3docs.com/" class="button">Click Here a> body> html>

Так как требуется сложное стилевое оформление, этот метод может не работать в некоторых браузерах.

: Элемент — ссылка на внешний ресурс

Элемент HTML — Ссылка на Внешний Ресурс ( ) определяет отношения между текущим документом и внешним ресурсом. Этот элемент чаще всего используется для ссылки на stylesheets, а также для создания иконок сайта (как для иконок в стиле «favicon», так и для иконок домашних экранов и приложений мобильных устройств) среди прочего.

Интерактивный пример

Чтобы подключить таблицу стилей, вы должны включить элемент внутри вашего следующим образом:

link href="main.css" rel="stylesheet" /> 

В этом простом примере указывается путь к таблице стилей внутри атрибута href и атрибут rel со значением stylesheet . rel означает «отношения (relationship)», и, вероятно, является одной из ключевых особенностей элемента — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике типы ссылок (en-US) , есть много различных видов отношений.

Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:

link rel="icon" href="favicon.ico" /> 

Есть ряд других значений rel для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:

link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png" /> 

Атрибут sizes определяет размер иконки, когда type содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.

Вы можете, также, указать медиа тип или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:

link href="print.css" rel="stylesheet" media="print" /> link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)" /> 

В элемент также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:

link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> 

Значение rel — preload указывает, что браузер должен предварительно загрузить этот ресурс (смотрите Предварительная загрузка контента при помощи rel=»preload» (en-US) для более подробной информации), атрибут as указывает на определённый класс загружаемого контента. Атрибут crossorigin указывает должен ли ресурс загружаться с помощью запроса CORS.

Другие замечания по использованию:

• Элемент может присутствовать в элементах или , в зависимости от того, имеет ли он тип ссылки, являющейся body-ok. Например, ссылка типа stylesheet является body-ok,и, поэтому, допускается в body. Однако, это не очень хорошая практика использования; более осмысленно отделять ваши от содержимого body, помещая их в .
• При использовании для установки favicon сайта, и когда ваш сайт использует Политику Безопасности Контента (CSP) для повышения безопасности, политика применяется к favicon. Если вы столкнулись с проблемой при загрузке favicon, проверьте, что img-src директива (en-US) заголовка Content-Security-Policy (en-US) не препятствует доступу к ней.
• Спецификации HTML и XHTML определяют обработчики событий для элемента , но не указывают как они будут использоваться.
• В XHTML 1.0, пустые элементы, такие как , требуют слеш: .
• WebTV поддерживает использование значения next для rel в качестве предварительной загрузки следующей страницы в серии документов.

Атрибуты

Этот элемент включает в себя глобальные атрибуты.

Этот атрибут используется только для элементов с атрибутом rel=»preload» или rel=»prefetch» . Он указывает тип контента, загружаемого , который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного Accept запрашиваемого заголовка.

Этот перечисляемый атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе не искажая их. Допустимы значения:

Cross-origin запрос (т.е. с HTTP-заголовком Origin ) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка Access-Control-Allow-Origin ), изображение будет искажено, а его использование ограничено.

Cross-origin запрос (т.е. с HTTP-заголовком Origin ) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок Access-Control-Allow-Credentials (en-US) ), ресурс будет искажён, а его использование ограничено.Если атрибут отсутствует, ресурс загружается без запроса CORS (т.е. без отправки HTTP-заголовка Origin) , предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова anonymous. Для получения дополнительной информации смотрите CORS settings attributes.

Этот атрибут определяет URL, связываемого ресурса. URL может быть абсолютным или относительным.

Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются BCP47. Используйте этот атрибут только если присутствуют атрибуты href .

Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения: auto : указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритетов ресурсов. high : указывает браузеру, что ресурс находится в высоком приоритете. low : указывает браузеру, что ресурс находится в низком приоритете.

**Примечание:**Атрибут importance можно использовать только для элементов с атрибутами rel=»preload» или rel=»prefetch» .

integrity Экспериментальная возможность

Содержит встроенные метаданные — криптографический хеш-код ресурса(файла) в кодировке base64, который вы сообщаете браузеру для загрузки. Браузер может использовать его для проверки, что загруженный ресурс был получен без неожиданных манипуляций. Смотрите Subresource Integrity (en-US) .

Этот атрибут указывает медиа, который применяет связываемый ресурс. Его значение должно быть типом медиа или медиавыражением. Этот атрибут, в основном, полезен при связывании с внешними таблицами стилей — он позволяет пользовательскому агенту выбрать наиболее подходящее устройство для запуска.

Примечание:

• В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print , screen , aural , braille . HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
• Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.

referrerpolicy Экспериментальная возможность

Строка, указывающая какой реферер использовать при загрузки ресурсов:

• no-referrer означает, что заголовок Referer не будет отправлен.
• no-referrer-when-downgrade означает, что заголовок Referer не будет отправлен при переходе к источнику без TLS (HTTPS). Это поведение пользовательского агента по умолчанию, если не указано иное.
• origin означает, что реферером будет источник, который соответствует схеме, хосту и порту.
• origin-when-cross-origin означает, что навигация к другим источникам будет ограничена схемой, хостом, портом, в то время как навигация по одному и тому же источнику будет включать путь реферер .
• unsafe-url означает, что в качестве источника ссылки будет указываться источник и путь (но не фрагмент, пароль или имя пользователя). Этот вариант небезопасен, потому что он может способствовать утечки источников и путей из TLS-защищённых ресурсов в незащищённые источники.

Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком значений типов ссылки (en-US) .

Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если rel содержит значение icon или нестандартный тип, например apple-touch-icon Apple. Может иметь следующие значения:

• any , означает, что иконка может быть масштабируема до любого размера, например в векторном формате image/svg+xml .
• пробелоразделенный список размеров, каждый в формате x или X . Каждый из этих размеров должен содержаться в ресурсе.

**Примечание:**Большинство форматов иконок могут хранить только одну иконку, поэтому чаще всего sizes содержит только одну запись. MS’s ICO формат, как и Apple’s ICNS. ICO более распространены; вы должны использовать их.

Этот атрибут используется для определения типа связываемого контента. Значение атрибута должно быть типом MIME, такое как text/html, text/css и т.д. Обычно он используется для определения типа таблицы стилей, на которую делается ссылка (например, text/css), но, учитывая, что CSS является единственным языком таблиц стилей, используемым в сети, этот атрибут может быть пропущен, что является рекомендацией. Он также используется для типов ссылок rel=»preload» , чтобы браузер загружал только те типы файлов, которые он поддерживает.

Нестандартные атрибуты

disabled Non-standard

Этот атрибут используется для отключения отношения ссылки. В сочетании со скриптом, этот атрибут может использоваться для включения и выключения различных отношений таблицы стилей.

**Примечание:**Хотя в стандарте HTML нет атрибута disabled , атрибут disabled есть в объекте DOM HTMLLinkElement .

methods Non-standard

Значение этого атрибута предоставляет информацию о функциях, которые могут выполняться над объектом. Значения обычно задаются протоколом HTTP, когда он используется, но может быть (аналогично атрибуту title) полезно заранее включить в ссылку консультативную информацию. Например, браузер может выбрать другое отображение ссылки в зависимости от указанных методов; то, что доступно для поиска может получить другую иконку, или внешняя ссылка может отображаться с указанием перехода с текущего сайта. Этот атрибут не совсем понятен и не поддерживается, даже определяющим браузером, Internet Explorer 4.

prefetch Non-standard Secure context

Этот атрибут идентифицирует ресурс, который может потребоваться при следующей навигации, и необходимость получить его пользовательским агентом. Это позволяет пользовательскому агенту быстрее реагировать, когда, в будущем, ресурс будет запрошен.

Определяет название фрейма или окна, которое определяет связывающие отношения, или, которое будет показывать рендеринг любого связываемого ресурса.

Устаревшие атрибуты

Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в RFC 2045. Значение по умолчанию iso-8859-1 .

Примечание: Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок Content-Type на связываемый ресурс.

Значение этого атрибута показывает отношение текущего документа к связываемому документу, как определено атрибутом href . Этот атрибут, таким образом, определяет обратную связь по сравнению со значением атрибута rel . Значения типов ссылки (en-US) для атрибута аналогичны возможным значениям для rel .

Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит. Примечание: Взамен, вы должны использовать атрибут rel с противоположным значением типов ссылки (en-US) . Например, чтобы установить обратную ссылку для made , укажите author .Также, этот атрибут не означает «ревизия» и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.

Стилизация с CSS

Элемент не имеет визуального представления в веб-документе, поэтому он не должен стилизоваться.

Примеры

Включение таблицы стилей

Включение таблицы стилей на страницы имеет следующий синтаксис:

link href="style.css" rel="stylesheet" /> 

Предоставление альтернативных таблиц стилей

Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.

link href="default.css" rel="stylesheet" title="Default Style" /> link href="fancy.css" rel="alternate stylesheet" title="Fancy" /> link href="basic.css" rel="alternate stylesheet" title="Basic" /> 

Предоставление иконок для различных контекстов использования

Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения rel и sizes как подсказки.

link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png" /> link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png" /> link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" /> link rel="apple-touch-icon-precomposed" href="favicon57.png" /> link rel="icon" href="favicon32.png" /> 

Условная загрузка ресурсов с медиавыражениями

Вы можете предоставить тип медиа или запрос внутри атрибута media ; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:

link href="print.css" rel="stylesheet" media="print" /> link href="mobile.css" rel="stylesheet" media="all" /> link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)" /> link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)" /> 

События загрузки таблицы стилей

Вы можете определить, когда таблица стилей была загружена, наблюдая за событием load , запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием error :

script> var myStylesheet = document.querySelector("#my-stylesheet"); myStylesheet.onload = function ()  // Do something interesting; the sheet has been loaded >; myStylesheet.onerror = function ()  console.log("An error occurred loading the stylesheet!"); >; script> link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" /> 

Примечание: Событие load запускается после загрузки и анализа таблицы стилей и всего импортируемого содержимого, непосредственно перед тем, как стили будут применены к содержимому.

Preload примеры

Техническое резюме

Каталоги контента	Контент метаданных. Если есть itemprop (en-US) : потоковый контент и фразовый контент.
Допустимое содержимое	Нет, это empty element.
Пропуск тегов	Так как это пустой элемент, присутствовать должен начальный тэг, конечный — отсутствует.
Допустимые родители	Любой элемент, принимающий элементы метаданных. Если есть itemprop (en-US) : любой элемент, принимающий фразовый контент.
Допустимые ARIA-роли	Нет
DOM-интерфейс	HTMLLinkElement

Спецификации

Specification
HTML Standard # the-link-element

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

• Link (en-US) HTTP header
• Ryan Grove’s and node event compatibility chart

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 19 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.