From 85c36d462d9d5baf5296be994675f4b1189bff3e Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Wed, 14 Jul 2021 01:23:40 -0400 Subject: 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> --- .../css/styling_text/styling_links/index.html | 30 +++++++++++----------- .../css/styling_text/styling_lists/index.html | 18 ++++++------- .../styling_text/typesetting_a_homepage/index.html | 6 ++--- 3 files changed, 27 insertions(+), 27 deletions(-) (limited to 'files/ru/learn/css/styling_text') 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 Для изучения вам потребуется: - Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS. + Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS. Вы узнаете: @@ -28,7 +28,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links

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

-

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

+

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

-

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

+

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

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

@@ -50,7 +50,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links text-align: center; } -

{{ EmbedLiveSample('Стили_по_умолчанию', '100%', 120) }}

+

{{ EmbedLiveSample('Default_styles', '100%', 120) }}

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

@@ -82,7 +82,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links

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

-

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

+

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

@@ -165,7 +165,7 @@ Firefox</a>, <a href="https://www.google.com/chrome/index.html">Goog

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

-

{{ EmbedLiveSample('Стилизация_некоторых_ссылок', '100%', 150) }}

+

{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

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

@@ -268,7 +268,7 @@ window.addEventListener("load", drawOutput);

{{ EmbedLiveSample('Playable_code', 700, 800) }}

-

Добавление иконок в ссылки

+

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

@@ -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; } -

{{ EmbedLiveSample('Добавление_иконок_в_ссылки', '100%', 150) }}

+

{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}

-

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

+

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

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

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

-

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

+

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

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

-

Обратите внимание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном; это объяснено в других местах

+

Обратите внимание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном; это объяснено в других местах

-

Стилизация ссылок в виде кнопок

+

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

@@ -392,13 +392,13 @@ a:active {

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

-

{{ EmbedLiveSample('Стилизация_ссылок_в_виде_кнопок', '100%', 100) }}

+

{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

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