fix various fixable flaws in Learn tree (ru) (#1429)

* fix various fixable flaws in Learn tree (ru)

* Update index.html

* Update index.html

* removed error-chrome-win7.png

* error-opera-macos.png

Co-authored-by: Maxim Postautov <54762420+mpstv@users.noreply.github.com>

1 files changed, 15 insertions, 15 deletions

diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.html
index 5d66f90825..81b8c0bfc1 100644
--- a/files/ru/learn/css/styling_text/styling_links/index.html
+++ b/files/ru/learn/css/styling_text/styling_links/index.html
@@ -13,7 +13,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
  <tbody>
   <tr>
    <th scope="row">Для изучения вам потребуется:</th>
-   <td>Основы компьютерной грамотности, базовые знания HTML (изучите <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals">базовые знания о текстах и шрифтах CSS</a>.</td>
+   <td>Основы компьютерной грамотности, базовые знания HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/First_steps">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">базовые знания о текстах и шрифтах CSS</a>.</td>
   </tr>
   <tr>
    <th scope="row">Вы узнаете:</th>
@@ -28,7 +28,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
 
 <h3 id="Состояния_ссылок">Состояния ссылок</h3>
 
-<p><span class="tlid-translation translation" lang="ru"><span title="">Первое, что нужно понять, это концепция состояний ссылок </span></span>— разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">псевдоклассы</a>:</p>
+<p><span class="tlid-translation translation" lang="ru"><span title="">Первое, что нужно понять, это концепция состояний ссылок </span></span>— разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors#pseudo-classes">псевдоклассы</a>:</p>
 
 <ul>
  <li><strong>Link (не посещённая)</strong>: <span class="tlid-translation translation" lang="ru"><span title="">Состояние по умолчанию, в котором находится ссылка</span></span>, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.</li>
@@ -38,7 +38,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
  <li><strong>Active</strong>: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс {{cssxref(":active")}}</li>
 </ul>
 
-<h3 id="Стили_по_умолчанию">Стили по умолчанию</h3>
+<h3 id="Default_styles">Стили по умолчанию</h3>
 
 <p>Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).</p>
 
@@ -50,7 +50,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
   text-align: center;
 }</pre>
 
-<p>{{ EmbedLiveSample('Стили_по_умолчанию', '100%', 120) }}</p>
+<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">Вы заметите несколько вещей при изучении стилей по умолчанию</span></span>:</p>
 
@@ -82,7 +82,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links
 <p><strong>Обратите внимание</strong>: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — <span class="tlid-translation translation" lang="ru"><span title="">вы можете использовать любые свойства, которые вам нравятся. </span></span> <span class="tlid-translation translation" lang="ru"><span title="">Просто постарайтесь не сходить с ума слишком сильно!</span></span></p>
 </div>
 
-<h3 id="Стилизация_некоторых_ссылок">Стилизация некоторых ссылок</h3>
+<h3 id="Styling_some_links">Стилизация некоторых ссылок</h3>
 
 <p>Мы уже рассмотрели состояния по умолчанию в некоторых деталях, давайте взглянем на типичный набор стилей ссылок.</p>
 
@@ -165,7 +165,7 @@ Firefox&lt;/a&gt;, &lt;a href="https://www.google.com/chrome/index.html"&gt;Goog
 
 <p>Объединение этих двух даёт нам такой результат:</p>
 
-<p>{{ EmbedLiveSample('Стилизация_некоторых_ссылок', '100%', 150) }}</p>
+<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p>
 
 <p>Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но <span class="tlid-translation translation" lang="ru"><span title="">все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:</span></span></p>
 
@@ -268,7 +268,7 @@ window.addEventListener("load", drawOutput);
 
 <p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
 
-<h2 id="Добавление_иконок_в_ссылки">Добавление иконок в ссылки</h2>
+<h2 id="Including_icons_on_links">Добавление иконок в ссылки</h2>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки </span></span>— например, мы будем использовать <a href="https://icons8.com/web-app/741/external-link">этот отличный образец с сайта icons8.com</a>.</p>
 
@@ -313,28 +313,28 @@ a:active {
 }
 
 a[href*="http"] {
-  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background: url('external-link-52.png') no-repeat 100% 0;
   background-size: 16px 16px;
   padding-right: 19px;
 }</pre>
 
-<p>{{ EmbedLiveSample('Добавление_иконок_в_ссылки', '100%', 150) }}</p>
+<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p>
 
-<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p>
+<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists#using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p>
 
 <p>Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.</p>
 
 <p>Наконец, мы задаём некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.</p>
 
-<p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p>
+<p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors#attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p>
 
 <p>Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!</p>
 
 <div class="note">
-<p><strong>Обратите внимание</strong>: Не переживайте если вы ещё не знакомы с <a href="/en-US/docs/Learn/CSS/Styling_boxes">фоном </a>и <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p>
+<p><strong>Обратите внимание</strong>: Не переживайте если вы ещё не знакомы с <a href="/en-US/docs/Learn/CSS/Building_blocks">фоном </a>и <a href="/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p>
 </div>
 
-<h2 id="Стилизация_ссылок_в_виде_кнопок">Стилизация ссылок в виде кнопок</h2>
+<h2 id="Styling_links_as_buttons">Стилизация ссылок в виде кнопок</h2>
 
 <p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты, которые вы исследовали в этой статье</span></span> также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.</p>
 
@@ -392,13 +392,13 @@ a:active {
 
 <p>Что даёт нам следующий результат:</p>
 
-<p>{{ EmbedLiveSample('Стилизация_ссылок_в_виде_кнопок', '100%', 100) }}</p>
+<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p>
 
 <p>Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:</p>
 
 <ul>
  <li>Наше второе правило удаляет заданный по умолчанию {{cssxref("padding")}} у элемента {{htmlelement("ul")}} и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае {{htmlelement("body")}}).</li>
- <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li>
+ <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, <span class="tlid-translation translation" lang="ru"><span title="">что приводит к тому, что элементы списка располагаются в одной строке друг с другом </span></span>— теперь они ведут себя как строчные элементы.</li>
  <li>четвёртое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдёмся по нему шаг за шагом:
   <ul>
    <li>как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.</li>