Href css: Атрибут href | htmlbook.ru

Leave a Comment / Css / By /

Содержание

Стилизация ссылок — Изучение веб-разработки

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

Для изучения вам потребуется:Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS.
Вы узнаете:Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.

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

Состояния ссылок

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

  • Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link.
  • Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited.
  • Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
  • Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя
    HTMLElement.focus()     (en-US)) — стилизуется используя псевдокласс :focus.
  • Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

Стили по умолчанию

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

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>

p {
  font-size: 2rem;
  text-align: center;
}

Вы заметите несколько вещей при изучении стилей по умолчанию:

  • Ссылки подчёркнуты.
  • Не посещённые ссылки синие.
  • Посещённые ссылки фиолетовые
  • Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
  • Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию
    Full Keyboard Access: All controls     нажав Ctrl + F7, прежде чем это будет работать).
  • Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).

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

  • Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
  • Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.

Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:

  • color (en-US) для цвета текста.
  • cursor для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
  • outline (en-US) для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.

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

Стилизация некоторых ссылок

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

Чтобы начать, мы выпишем наши пустые наборы правил:

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа

LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

Также мы дадим некий пример HTML к которому применяется CSS:

<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www.
 
 
 google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

Объединение этих двух даёт нам такой результат:

Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:

  • Первые два правила не так интересны в этом обсуждении.
  • Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
  • Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
  • Следующие два правила используют
    a:focus     и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
    • Нижнее подчёркивание создано используя border-bottom, а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
    • Значение border-bottom установлено на 1px solid, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
  • Наконец, a:active используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!

Активное изучение: Стилизуйте ссылки самостоятельно

В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте своё воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все ещё так же функциональное, как и наш пример выше.

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.

Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:

<p>For more information on the weather, visit our <a href="weather. html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

Далее, CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

Наконец, мы задаём некоторый padding-right для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.

И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*="http"] выбирает элементы <a>, но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.

Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

Инструменты, которые вы исследовали в этой статье также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.

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

Для начала HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

А теперь наш CSS:

body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {
  background: orange;
}

a:active {
  background: red;
  color: white;
}

Что даёт нам следующий результат:

Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

  • Наше второе правило удаляет заданный по умолчанию padding у элемента <ul> и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае <body>).
  • Элементы <li> по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
  • четвёртое правило — которое стилизует элемент <a> — самое сложное; давайте пройдёмся по нему шаг за шагом:
    • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
    • Далее мы устанавливаем display на inline-block — элементы <a> являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block, мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
    • Теперь только изменение размера! Мы хотим заполнить всю ширину элемента <ul>, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
    • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

Обратите внимание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.

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

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

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

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

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

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

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

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

<link rel="apple-touch-icon-precomposed"
      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> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:

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

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

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

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

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

as
Этот атрибут используется только для элементов <link> с атрибутом rel="preload" или rel="prefetch". Он указывает тип контента, загружаемого <link>, который необходим для определения приоритетов контента, сравнения запросов, применения корректного content security policy, и установки корректного Accept запрашиваемого заголовка.
crossorigin
Этот перечисляемый атрибут указывает, должен ли CORS использоваться при загрузки ресурса. CORS-поддерживаемые изображения могут быть повторно использованы в элементе <canvas> не искажая их. Допустимы значения:
anonymous
Cross-origin запрос (т.е. с HTTP-заголовком Origin) выполняется, но учётные данные не отправляются (т.е. нет cookie, сертификата X.509, или базовой аутентификации HTTP). Если сервер не передал учётные данные исходному сайту (нет настроенного HTTP-заголовка Access-Control-Allow-Origin),  изображение будет искажено, а его использование ограничено.
use-credentials
Cross-origin запрос (т.е. с HTTP-заголовком Origin) выполняется вместе с отправкой учётных данных (т.е. выполняется аутентификация cookie, сертификата, и/или базового HTTP). Если сервер не передал учётные данные исходному сайту (через HTTP-заголовок Access-Control-Allow-Credentials (en-US)), ресурс будет искажён, а его использование ограничено.
Если атрибут отсутствует, ресурс загружается без запроса CORS (т.е. без отправки HTTP-заголовка Origin), предотвращая его незагрязненное использование. В случае невалидности, он обрабатывается как при использовании ключевого слова anonymous. Для получения дополнительной информации смотрите  CORS settings attributes.
href
Этот атрибут определяет URL, связываемого ресурса. URL может быть абсолютным или относительным.
hreflang
Этот атрибут определяет язык, связываемого ресурса. Он является консультативным. Допустимые значения определяются BCP47. Используйте этот атрибут только если присутствуют атрибуты href.
importance 
Указывает на относительную важность ресурса. Приоритетные подсказки передаются используя значения:

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

high: указывает браузеру, что ресурс находится в высоком приоритете.

low: указывает браузеру, что ресурс находится в низком приоритете.

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

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

Примечания:

  • В 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-защищённых ресурсов в незащищённые источники.
rel
Этот атрибут определяет отношения связываемого документа и текущего документа. Атрибут должен быть разделённым пробелами списком значений типов ссылки.
sizes
Этот атрибут определяет размеры иконки для визуальных медиа, содержащихся в ресурсе. Он должен быть представлен только, если rel содержит значение icon или нестандартный тип, например apple-touch-icon Apple. Может иметь следующие значения:
  • any, означает, что иконка может быть масштабируема до любого размера, например в векторном формате image/svg+xml.
  • пробелоразделенный список размеров, каждый в формате <width in pixels>x<height in pixels> или <width in pixels>X<height in pixels>. Каждый из этих размеров должен содержаться в ресурсе.

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

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

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

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

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

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

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

charset Этот API вышел из употребления и его работа больше не гарантируется.
Этот атрибут определяет кодировку символов связываемого ресурса. Значение представляет собой список наборов символов, разделённый пробелами и/или запятыми, как определено в  RFC 2045. Значение по умолчанию iso-8859-1. Примечание по использованию: Для получения эффекта использования данного устаревшего атрибута, используйте HTTP-заголовок Content-Type на связываемый ресурс.
rev Этот API вышел из употребления и его работа больше не гарантируется.

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

Примечание: Этот атрибут считается устаревшим жизненным стандартом WHATWG HTML (который является каноничной спецификацией MDN). Однако, стоит отметить, что rev не считается устаревшим в спецификации W3C. Стоит сказать, учитывая неопределённость, полагаться на rev не стоит.

Взамен, вы должны использовать атрибут rel с противоположным значением типов ссылки. Например, чтобы установить обратную ссылку для made, укажите author.Также, этот атрибут не означает «ревизия» и не должен использоваться с номером версии, даже если многие сайты используют его в этих целях.

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

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

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

<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" href="favicon144.png">

<link rel="apple-touch-icon-precomposed" href="favicon114.png">

<link rel="apple-touch-icon-precomposed" 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.="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}

И стиль следующий HTML с ним. Выходные стили суммируются в комментариях:

<ul>
    <!-- [1] No background, 1em left and right padding -->
    <li><a href="/index.php">My site's page</a></li>

    <!-- [2] Background, 1em left and right padding -->
    <li><a href="http://example.com">External link</a></li>

    <!-- [3] No background, no right padding -->
    <li><a href="http://mysite.com">My site's base URL without www</a></li>        

    <!-- [4] No background, no right padding -->
    <li><a href="http://www.mysite.com">My site's base URL with www</a></li>

    <!-- [5] No background, no right padding -->
    <li><a href="http://mysite.com/page.php">A page in my site with base URL</a></li>
</ul>

Что происходит?

  1. Выбрано только a
    Атрибут href="/index.="http:"] соответствует любым якорям с href , начинающимся с href="http:...." , например:

    <a href="http://www.google.com">Test</a> <!-- would match -->
<a href="#element">Test</a>              <!-- wouldn't match -->

    Поделиться Nick Craver     04 октября 2010 в 21:09

    • что делает ссылка href=»#»?

      Я наткнулся на следующий фрагмент в исходном коде веб-сайта. <link href=# id=colour-scheme rel=stylesheet> Что это делает?

    • что делает <a href=»#!»> ?

      Я наткнулся на следующие ссылки: <a href=#!> <a href=#! class=mob-trigger data-target=#mob-commercial> Что означает добавление восклицательного знака по отношению к href?


    5

    Для каждой ссылки, параметр «href» которой начинается с «http:», установите фон на ключевое изображение (без повторения, расположенное в правом верхнем углу).

    Для каждой ссылки, параметр «href» которой начинается с «http://mysite.com «или» http://www.mysite.com», установите фоновое изображение равным нулю (а отступ справа-0).

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

    (Я думаю, что буду использовать его в будущем. 🙂

    Поделиться Lazlo     04 октября 2010 в 21:10


    0

    В правилах сказано, что, согласно W3C документы :

    • Все якоря, имеющие атрибут href , начинающийся с http:
    • Все якоря, имеющие атрибут href , начинающиеся с http://mysite.com или http://www.mysite.com

    Поделиться rfunduk     04 октября 2010 в 21:11


    0

    Это селектор атрибутов.=https://] Я не могу его искать, так как не знаю точной терминологии для этого. Любая помощь с некоторыми ссылками для изучения этих…


    Что делает » > » в CSS

    Возможный Дубликат : Что означает “>” в правилах CSS? Я видел это в некоторых CSS тело > .navid Что я хочу знать, так это то, что делает знак > в этом фрагменте кода CSS?


    jqtouch css и A href ссылка

    Я пытаюсь вызвать ссылку со страницы, которая указывает на другую часть страницы. Это код, который я использую для этого: <a href=#product><img src=Dress1.jpg…


    Что делает href выражение <a href=»javascript:;»> </a> ?

    Я видел следующий href, используемый время от времени на веб-страницах. Однако я не понимаю, что это пытается сделать или техника. Может кто-нибудь уточнить, пожалуйста? <a…


    Что делает » + » в css?

    Возможный Дубликат : Что означает + в CSS? Я не понимаю, что делает + в этом контексте. и что он делает? На какие события клика it/won’t он будет реагировать? $(document).on(‘click’,…


    Что значит <a href=“?var=something “> </a>

    Что делает <a href=?var=something></a> в приведенном выше теге what ? Does Я изучаю одну работу веб-фрейма, и там было упомянуто во время разбиения на страницы topic.when мы нажимаем на…


    Что делает ссылка :в CSS?

    Поэтому, имея тег a с классом btn, я могу стилизовать его, используя .btn в моем CSS. Однако некоторые говорят, что лучше стилизовать вашу кнопку с помощью .btn:link , а не просто .btn ….

    Атрибут href


    Определение и использование

    Для элементов <a> и <area> атрибут href указывает URL-адрес страницы, к которой переходит ссылка.

    Для элементов <base> атрибут href указывает базовый URL-адрес для всех относительных URL-адресов на странице.

    Для элементов <link> атрибут href указывает расположение (URL) внешнего ресурса (чаще всего файл таблицы стилей).

    Относится к

    Атрибут href может использоваться для следующих элементов:

    Пример

    Пример

    Атрибут href указывает назначение ссылки:

    <a href=»https://html5css.ru»>Visit html5css</a>

    Пример области

    Изображение-карта, с щелчком области:


    usemap=»#planetmap»>

    <map name=»planetmap»>
      <area shape=»rect» coords=»0,0,82,126″ href=»sun.htm» alt=»Sun»>
      <area shape=»circle» coords=»90,58,3″ href=»mercur.htm» alt=»Mercury»>
      <area shape=»circle» coords=»124,58,8″ href=»venus.htm» alt=»Venus»>
    </map>

    Базовый пример

    Укажите базовый URL-адрес для всех относительных URL-адресов на странице:

    <head>
    <base href=»https://html5css.ru/images/»>
    </head>

    Пример ссылки

    Ссылка на внешнюю таблицу стилей:

    <link rel=»stylesheet» type=»text/css» href=»theme.css»>

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

    Атрибут href имеет следующую поддержку браузера для каждого элемента:

    Элемент
    aДаДаДаДаДа
    areaДаДаДаДаДа
    baseДаДаДаДаДа
    linkДаДаДаДаДа

    HTML и CSS с примерами кода

    Тег <link> (от англ. link — ссылка, связь) устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

    Элемент <link> обычно размещается внутри контейнера <head> и не создаёт ссылку, в отличие от элемента <a>.

    Метаданные документа

    Синтаксис

    <head>
  <link href="<адрес>" />
</head>

    Закрывающий тег не требуется.

    Атрибуты

    href
    Путь к связываемому файлу.
    media
    Определяет устройство, для которого следует применять стилевое оформление.
    rel
    Определяет отношения между текущим документом и файлом, на который делается ссылка.
    sizes
    Указывает размер иконок для визуального отображения.
    type
    MIME-тип данных подключаемого файла.

    Также для этого элемента доступны универсальные атрибуты.

    href

    Путь к файлу, на который делается ссылка.

    Синтаксис

    <link href="<адрес>" />

    Значения

    В качестве значения принимается полный или относительный путь к файлу.

    Значение по умолчанию

    Нет.

    media

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

    Синтаксис

    <link media="all | print | screen | speech" />

    Значения

    all
    Все устройства.
    print
    Печатающее устройство вроде принтера.
    screen
    Экран монитора.
    speech
    Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.

    В HTML5 в качестве значений могут быть указаны медиа-запросы.

    Значение по умолчанию

    all

    rel

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

    Синтаксис

    Значения

    alternate
    Альтернативный тип, используется, к примеру, для указания ссылки на файл в формате XML для описания ленты новостей, анонсов статей.
    author
    Указывает ссылку на автора текущего документа или статьи.
    help
    Указывает ссылку на контекстно-зависимую справку.
    icon
    Адрес картинки, которая символизирует текущий документ или сайт.
    license
    Сообщает, что основное содержание текущего документа распространяется по лицензии, описанной в указанном документе.
    next
    Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на следующий документ.
    prefetch
    Указывает на предварительно кэшированный ресурс текущей страницы или сайта целиком.
    prev
    Сообщает, что текущий документ является частью связанных между собой документов, а ссылка указывает на предыдущий документ.
    search
    Указывает ссылку на ресурс, который применяется для поиска по документу или сайту.
    stylesheet
    Определяет, что подключаемый файл хранит таблицу стилей (CSS).

    Значение по умолчанию

    Нет.

    sizes

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

    Синтаксис

    <link rel="icon" />
<link
  rel="icon"
  any"
/>

    Значения

    Вначале указывается ширина иконки в пикселах без указания единиц (например, 16), затем пишется латинская буква x в верхнем (X) или нижнем регистре (x), после чего идёт высота иконки. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться в любой размер, к примеру, если она хранится в векторном формате SVG.

    Значение по умолчанию

    Нет.

    type

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

    Синтаксис

    <link type="<MIME-тип>" />

    Значения

    Имя MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.

    Значение по умолчанию

    text/css

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

    Описание и примеры

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>LINK</title>
    <link rel="stylesheet" href="ie.css" />
    <link
      rel="alternate"
      type="application/rss+xml"
      title="Статьи с сайта xsltdev.ru"
      href="http://xsltdev.ru/rss.xml"
    />
    <link
      rel="shortcut icon"
      href="http://xsltdev.ru/favicon.ico"
    />
  </head>
  <body>
    <p>...</p>
  </body>
</html>

    Ссылки

    CSS псевдокласс :link

    Псевдокласс :link используется для применения стиля к ссылкам, которые еще не посещались пользователем.

    Элемент может быть :visited и :active, в случае которых псевдокласс :link будет иметь эффект.

    Псевдокласс :link выбирает любой непосещенный элемент <a>, <area> или <link>, который имеет атрибут href.

    Версия¶

    CSS1

    Синтаксис¶

    :link {
css declarations;
}

    Пример¶

    <!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      a:link {
      background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h3>Пример селектора :link</h3>
    <a href="https://www.w3docs.com">w3docs</a>
    <a href="https://stackdev.io/">Stackdev</a>
  </body>
</html>
    Попробуйте сами!

    Рассмотрим другой пример:

    Пример¶

    <!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p { font-size: 20px; 
      }
      /* unvisited link */
      a:link {
      color: #ccc;
      }
      /* visited link */
      a:visited {
      color: #1c87c9;
      }
      /* mouse over link */
      a:hover {
      color: #8ebf42;
      }
      /* selected link */
      a:active {
      color: #666;
      }
    </style>
  </head>
  <body>
    <h3>Пример селектора :link</h3>
    <p>Visit our 
      <a href="https://www.w3docs.com/">website</a>.
    </p>
  </body>
</html>
    Попробуйте сами!

    В следующем примере наведите курсор мыши на ссылки и увидите результат сами:

    <!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      a{
      display:block;
      padding:5px 0 10px;
      font-weight:bold;
      }
      a.one:link { 
      color: #ccc;
      }
      a.one:visited { 
      color: #095484;
      }
      a.one:hover { 
      color: #8ebf42;
      }
      a.two:link {
      color: #ccc;
      }
      a.two:visited {
      color: #095484;
      }
      a.two:hover {
      font-size: 150%;
      }
      a.three:link {
      color: #ccc;
      }
      a.three:visited {
      color: #095484;
      }
      a.three:hover {
      background: #8ebf42;
      }
      a.four:link {
      color: #ccc;
      }
      a.four:visited {
      color: #095484;
      }
      a.four:hover {
      font-family: monospace;
      }
      a.five:link {
      color: #095484;
      text-decoration: none;
      }
      a.five:visited {
      color: #095484; text-decoration: none; 
      }
      a.five:hover {
      text-decoration: overline underline; 
      }
    </style>
  </head>
  <body>
    <h3>Пример селектора :link</h3>
    <p>
      <a href="#">Меняется цвет ссылки</a>
      <a href="#">Меняется размер шрифта ссылки</a>
      <a href="#">Меняется фоновый цвет ссылки</a>
      <a href="#">Меняется шрифт ссылки</a>
      <a href="#">Меняется текстовое оформление ссылки</a>
    </p>
  </body>
</html>
    Попробуйте сами!

    Основы HTML, CSS и веб-дизайна

    Добавление стилей в HTML-документ

    Помните невидимую «голову» документа? Именно в ней можно указать адрес CSS-файла со стилями:

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

    Если HTML-файл лежит в одной директории с файлом main.css, то стили из этого CSS-файла будут применены к странице. Если же файл лежит в другом месте, то нужно указать путь к нему. Например, если структура директорий такая:

    my_site/
├── css/
│   ├── main.css
├── html/
│   ├── index.html

    То в файле index.html путь нужно указать так:

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

    Такой путь называется относительным. Он указывается относительно текущего расположения файла index.html. Чтобы добраться до файла main.css нам было нужно выйти из директории html. Это делается с помощью конструкции ../. Далее мы указали директорию css и название нашего CSS файла.

    Существуют также абсолютные пути. Они всегда строятся от корня файловой системы. В таком случае путь всегда начинается со слэша. Если представить, что сайт лежит в корне нашей файловой системы, то путь выглядел бы следующим образом: /css/main.css.

    Стили также можно поместить прямо в HTML-файл, не создавая отдельный CSS-файл:

    <!DOCTYPE html>
<html>
  <head>
    <title>Моё резюме</title>
    <style>
      .important {
        color: green;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h2>Алексей Примадонин</h2>
    <h4>Веб-разработчик</h4>
    <p>
      <a href="mailto:[email protected]">[email protected]</a>,
      <a href="https://github.com/alprim">github.com/alprim</a>
    </p>
  </body>
</html>

    Такой вариант может быть уместен для минимальных страниц, которые гарантированно не будут разрастаться. В целом, лучше всегда разделять HTML и CSS на отдельные файлы. Один CSS-файл можно использовать в нескольких HTML-документах, к тому же разделение представления (presentation — это стили) и содержания (content — это сам HTML) — правильная стратегия при построении информационных систем.

    Каскад

    Почему же C в CSS — это cascade? Дело в том, что стили складываются каскадом в единый набор.

    p {
  color: green;
  font-size: 20px;
}

p {
  color: red;
}

    В итоге у элемента p цвет текста будет красным, потому что этот стиль был указан в таком же селекторе, но после предыдущего. При этом размер шрифта останется 20 пикселей: это значение не заменялось.

    Можно представить, что стили собрались каскадом в такой набор:

    {
  color: red;
  font-size: 20px;
}

    Каскад происходит сверху вниз, и работает даже внутри одного селектора. Ниже — странный пример, но результат будет тем же: цвет текста будет красным:

    p {
  color: green;
  color: red;
  font-size: 20px;
}

    Каскадность также заключается в том, что один элемент может попадать под действие нескольких селекторов разного типа. Например:

    p {
  color: red;
}

p.important {
  font-size: 20px;
}

#intro {
  font-style: italic;
}

    <p>
  Индейские племена Манахаттоу и Канарси.
</p>

    Такой элемент будет одновременно красным, размером 20 пикселей и курсивом. Но у разных видов селекторов разный приоритет.

    Порядок таков:

    1. Селектор типа элемента (p)
    2. Селектор класса (.important)
    3. Селектор id (#intro)

    1 — низкий приоритет, 3 — высокий приоритет.

    Пример:

    #intro {
  color: green;
}

p {
  color: blue;
  font-weight: bold;
}

p.important {
  color: purple;
  font-style: italic;
}

    <p>
  Индейские племена Манахаттоу и Канарси.
</p>

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

    1. Селектор типа элемента p:
      • синий цвет
      • полужирность
    2. Селектор класса p.important:
      • синий цвет заменил на пурпурный цвет
      • курсив
    3. Селектор идентификатора #intro:
      • пурпурный цвет заменил на зелёный цвет

    Стили сложились каскадом, что-то заменилось, что-то нет, и в итоге получился такой набор:

    {
  color:green;
  font-weight: bold;
  font-style: italic;
}

    Остались вопросы? Задайте их в разделе «Обсуждение»

    Вам ответят команда поддержки Хекслета или другие студенты.

    Ошибки, сложный материал, вопросы >
    Нашли опечатку или неточность?

    Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

    Что-то не получается или материал кажется сложным?

    Загляните в раздел «Обсуждение»:

    • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
    • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
    • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
    Об обучении на Хекслете

    HTML href Атрибут

    Определение и использование

    Для элементов и href Атрибут указывает URL страницы, на которую ведет ссылка.

    Для элементов href Атрибут указывает базовый URL-адрес для всех относительных URL-адресов на странице.

    Для элементов href Атрибут указывает расположение (URL) внешнего ресурса (чаще всего файл таблицы стилей).

    Относится к

    Атрибут href можно использовать для следующих элементов:

    Примеры

    A Пример

    Атрибут href указывает место назначения ссылки:

    Посетите W3Schools

    Попробуй сам »

    Пример площади

    Карта изображений с интерактивными областями:


    usemap = «# planetmap»>

    <карта name = "planetmap">
    Солнце
    Меркурий
    Venus

    Попробуй сам »

    Базовый пример

    Укажите базовый URL-адрес для всех относительных URL-адресов на странице:



    Попробуй сам »

    Пример ссылки

    Ссылка на внешнюю таблицу стилей:

    Тема

    Попробуй сам »

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

    Атрибут href поддерживает следующие браузеры для каждого элемента:

    Элемент
    а Есть Есть Есть Есть Есть
    площадь Есть Есть Есть Есть Есть
    основание Есть Есть Есть Есть Есть
    ссылка Есть Есть Есть Есть Есть

    : ссылка | CSS-уловки

    Селектор : link — это псевдокласс, нацеленный на все непосещенные элементы привязки ( ) на странице.

      a: link {
  цвет: аквамарин;
}

    В приведенном выше примере цвет всех непосещенных ссылок изменится на аквамарин.

    При использовании в сочетании с псевдоклассом : hover , : link должен появиться первым или вообще не определяться, чтобы стили : hover работали. Это потому, что они одинаково специфичны, поэтому, если : ссылка появится после, эти стили переопределят стили наведения.

    Псевдокласс : link будет нацелен на все элементы , которые имеют атрибут href , даже если href имеет пустое значение.В этом смысле он похож на селектор атрибутов [href] .

    Это означает, что следующие три элемента HTML могут быть стилизованы с помощью псевдокласса : link :

       CSS-уловки 

 CSS-уловки 

 CSS-уловки

    Однако третий пример в приведенном выше блоке кода будет недопустимым HTML.

    Есть только три элемента HTML, которые принимают атрибут href : , и .Только элемент может быть стилизован через псевдокласс : link .

    Кроме того, вы не можете добавить атрибут href к другому типу элемента и сделать его стилизованным с помощью : link . Другими словами, если у вас был следующий HTML:

      
     CSS-уловки

    Следующий CSS не будет иметь никакого эффекта:

      div: link {
  цвет: аквамарин;
}

    Опять же, HTML не пройдет проверку, поскольку href не является допустимым атрибутом для

    .

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

     : ссылка {
  цвет: аквамарин;
}

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

      a {
  цвет: аквамарин;
}

    Однако, если на странице есть какие-либо элементы , для которых не установлен атрибут href (например, на старых страницах, которые использовали ), приведенный выше код также будет нацелен на эти элементы, и это может быть нежелательным результатом.

    Следует также отметить, что, начиная с CSS2, другие языки документов (помимо HTML) могут определять другие элементы, помимо якорей, которые могут быть стилизованы с помощью псевдокласса : link .

    Сопутствующие объекты

    Другие ресурсы

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

    Хром Safari Firefox Opera IE Android iOS
    Любая Любые Любые Любые Любые Любые Любые

    : элемент ссылки на внешний ресурс — HTML: язык разметки гипертекста

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

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

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

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

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

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

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

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

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

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

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

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

    as
    Этот атрибут используется, только если для элемента установлено значение rel = "preload" или rel = "prefetch" .Он определяет тип содержимого, загружаемого <ссылка> , что необходимо для сопоставления запросов, применения правильной политики безопасности содержимого и установки правильного заголовка запроса Accept . Кроме того, rel = "preload" использует это как сигнал для установления приоритета запроса. В таблице ниже перечислены допустимые значения этого атрибута и элементы или ресурсы, к которым они применяются.
    Значение Относится к
    аудио элементов
    документ