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> --- .../fundamental_css_comprehension/index.html | 26 +++++----- .../learn/css/building_blocks/selectors/index.html | 60 +++++++++++----------- .../css/building_blocks/styling_tables/index.html | 34 ++++++------ .../css/styling_text/styling_links/index.html | 30 +++++------ .../css/styling_text/styling_lists/index.html | 18 +++---- .../styling_text/typesetting_a_homepage/index.html | 6 +-- 6 files changed, 87 insertions(+), 87 deletions(-) (limited to 'files/ru/learn/css') diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html index eb4a2d4b0f..286708f392 100644 --- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html +++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -33,7 +33,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
-

Примечание: Вместо этого вы можете использовать для проверки такие сайты как  JSBin или Thimble. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать этот URL чтобы указать элементу <img> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <style> в заголовке документа.

+

Примечание: Вместо этого вы можете использовать для проверки такие сайты как  JSBin или Thimble. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать этот URL чтобы указать элементу <img> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <style> в заголовке документа.

Краткое описание проекта

@@ -97,7 +97,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS

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

-

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

Проверка

@@ -108,17 +108,17 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS

В этом модуле

diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index 242a0859fa..090f134d91 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -24,7 +24,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы Необходимые знания: - Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS). + Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS). Цель: @@ -37,7 +37,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

-

Some code with the h1 highlighted.

+

Some code with the h1 highlighted.

Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.

@@ -47,26 +47,26 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

-
h1 {
+
h1 {
   color: blue;
 }
 
 .special {
   color: blue;
-} 

+}

А могу написать короче — просто отделив селекторы запятыми:

-
h1, .special {
+
h1, .special {
   color: blue;
-} 

+}

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

-
h1,
+
h1,
 .special {
   color: blue;
-} 

+}

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

@@ -76,19 +76,19 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

-
h1 {
+
h1 {
   color: blue;
 }
 
 ..special {
   color: blue;
-} 

+}

Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.

-
h1, ..special {
+
h1, ..special {
   color: blue;
-} 

+}

Типы селекторов

@@ -136,7 +136,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы

Продолжение

-

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

+

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

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

@@ -156,57 +156,57 @@ original_slug: Learn/CSS/Building_blocks/Селекторы Селектор по типу h1 {  } - Селектор по типу + Селектор по типу Универсальный селектор * {  } - Универсальный селектор + Универсальный селектор Селектор класса .box {  } - Селекторы классов + Селекторы классов Селектор ID #unique { } - Селекторы по ID + Селекторы по ID Селектор атрибутов a[title] {  } - Селекторы атрибутов + Селекторы атрибутов - Селектор псевдоклассов + Селектор псевдоклассов p:first-child { } - Псевдоклассы + Псевдоклассы Селектор псевдоэлементов p::first-line { } - Псевдоэлементы + Псевдоэлементы Селектор потомков article p - Селектор потомков + Селектор потомков Селектор дочерних элементов article > p - Селектор дочерних элементов + Селектор дочерних элементов Смежные селекторы h1 + p - Смежные селекторы + Смежные селекторы Селектор братских элементов h1 ~ p - Селектор братских элементов + Селектор братских элементов @@ -215,12 +215,12 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
  1. Каскад и наследование
    2. -
  2. CSS-селекторы +
  3. CSS-селекторы
  4. Блоки в CSS
    5. diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.html b/files/ru/learn/css/building_blocks/styling_tables/index.html index 563122004b..7cdc57a8de 100644 --- a/files/ru/learn/css/building_blocks/styling_tables/index.html +++ b/files/ru/learn/css/building_blocks/styling_tables/index.html @@ -17,7 +17,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables Необходимые знания: - Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS). + Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS). Цель: @@ -71,9 +71,9 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables </tfoot> </table> -

    Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

    +

    Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

    -

    +

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

    @@ -128,14 +128,14 @@ th, td {
  5. Свойство {{cssxref("table-layout")}} со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ({{cssxref(":nth-child")}}) ("Выберите n-ый дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts.

    Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).
    6. -
  6. Свойство {{cssxref("border-collapse")}} со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse;  рамки схлопываются в одну и так выглядит намного лучше:
    7. +
  7. Свойство {{cssxref("border-collapse")}} со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse;  рамки схлопываются в одну и так выглядит намного лучше:
  8. Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
  9. Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.

    10. На этом этапе наша таблица выглядит уже гораздо лучше:

    -

    +

    Немного простой типографики

    @@ -186,7 +186,7 @@ tfoot th {

    В результате таблица выглядит немного аккуратнее:

    -

    +

    Графика и цвета

    @@ -210,7 +210,7 @@ thead th, tfoot th, tfoot td {

    Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и ещё {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.

    -

    Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.

    +

    Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.

    Полосатая зебра

    @@ -240,7 +240,7 @@ table {

    Этот взрыв цвета выглядит следующим образом:

    -

    +

    То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.

    @@ -258,9 +258,9 @@ table { letter-spacing: 1px; } -

    Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение bottom. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

    +

    Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение bottom. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

    -

    +

    Активное обучение: Стилизация вашей собственной таблицы

    @@ -290,13 +290,13 @@ table {

    В этом блоке

     

    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) }}

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