diff options
Diffstat (limited to 'files/ru/web/html/element/link/index.html')
| -rw-r--r-- | files/ru/web/html/element/link/index.html | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/files/ru/web/html/element/link/index.html b/files/ru/web/html/element/link/index.html index 8d72fa0b3e..de177c77d6 100644 --- a/files/ru/web/html/element/link/index.html +++ b/files/ru/web/html/element/link/index.html @@ -19,29 +19,29 @@ original_slug: Web/HTML/Element/ссылка <p>Чтобы подключить таблицу стилей, вы должны включить элемент <code><link></code> внутри вашего {{HTMLElement("head")}} следующим образом:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> +<pre class="brush: html no-line-numbers"><link href="main.css" rel="stylesheet"></pre> <p>В этом простом примере указывается путь к таблице стилей внутри атрибута <code>href</code> и атрибут <code>rel</code> со значением <code>stylesheet</code>. <code>rel</code> означает "отношения (relationship)", и, вероятно, является одной из ключевых особенностей элемента <code><link></code> — значение сообщает как указанный элемент связан с содержащим его документом. Как вы увидите в нашем справочнике <a href="/en-US/docs/Web/HTML/Link_types">типы ссылок</a>, есть много различных видов отношений.</p> <p>Существует ряд других распространённых типов, с которыми вы столкнётесь. Например, ссылка на сайт иконок:</p> -<pre class="brush: html no-line-numbers notranslate"><link rel="icon" href="favicon.ico"></pre> +<pre class="brush: html no-line-numbers"><link rel="icon" href="favicon.ico"></pre> <p>Есть ряд других значений <code>rel</code> для иконок, в основном, используемых для обозначения специальных типов иконок для использования на различных мобильных платформах, например:</p> -<pre class="brush: html no-line-numbers notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" +<pre class="brush: html no-line-numbers"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"></pre> <p>Атрибут <code>sizes</code> определяет размер иконки, когда <code>type</code> содержит тип MIME связанного ресурса. Они предоставляют советы, позволяющие браузеру выбрать наиболее подходящую иконку.</p> <p>Вы можете, также, указать медиа тип или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если media состояние равно true. Например:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<pre class="brush: html no-line-numbers"><link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> <p>В элемент <code><link></code> также были добавлены некоторые новые интересные возможности производительности и безопасности, к примеру:</p> -<pre class="brush: html no-line-numbers notranslate"><link rel="preload" href="myFont.woff2" as="font" +<pre class="brush: html no-line-numbers"><link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous"></pre> <p>Значение <code>rel</code> - <code>preload</code> указывает, что браузер должен предварительно загрузить этот ресурс (смотрите <a href="/en-US/docs/Web/HTML/Preloading_content">Предварительная загрузка контента при помощи rel="preload"</a> для более подробной информации), атрибут <code>as</code> указывает на определённый класс загружаемого контента. Атрибут <code>crossorigin</code> указывает должен ли ресурс загружаться с помощью запроса {{Glossary("CORS")}}.</p> @@ -180,7 +180,7 @@ original_slug: Web/HTML/Element/ссылка <p>Включение таблицы стилей на страницы имеет следующий синтаксис:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="style.css" rel="stylesheet"> +<pre class="brush: html no-line-numbers"><link href="style.css" rel="stylesheet"> </pre> <h3 id="Предоставление_альтернативных_таблиц_стилей">Предоставление альтернативных таблиц стилей</h3> @@ -189,7 +189,7 @@ original_slug: Web/HTML/Element/ссылка <p>Пользователь может выбрать, какую таблицу стилей использовать, выбрав её в меню Вид > Стиль страницы. Это позволяет пользователям видеть мультиверсию страницы.</p> -<pre class="brush: html no-line-numbers notranslate"><link href="default.css" rel="stylesheet" title="Default Style"> +<pre class="brush: html no-line-numbers"><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"> </pre> @@ -198,7 +198,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете включить ссылки на несколько различных иконок на одной странице, и браузер выберет, какая из них лучше подходит для его конкретного контекста, используя значения <code>rel</code> и <code>sizes</code> как подсказки.</p> -<pre class="brush: html no-line-numbers notranslate"><!-- third-generation iPad with high-resolution Retina display: --> +<pre class="brush: html no-line-numbers"><!-- third-generation iPad with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> <!-- iPhone with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> @@ -213,7 +213,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете предоставить тип медиа или запрос внутри атрибута <code>media</code>; этот ресурс будет загружен только в том случае, если условия медиа равно true. Например:</p> -<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<pre class="brush: html no-line-numbers"><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)"> @@ -223,7 +223,7 @@ original_slug: Web/HTML/Element/ссылка <p>Вы можете определить, когда таблица стилей была загружена, наблюдая за событием <code>load</code>, запускающимся в нем; аналогично, вы можете обнаружить, произошла ли ошибка при обработки таблицы стилей, наблюдая за событием <code>error</code>:</p> -<pre class="brush: html notranslate"><script> +<pre class="brush: html"><script> var myStylesheet = document.querySelector('#my-stylesheet'); myStylesheet.onload = function() { |