From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../advanced_styling_effects/index.html | 8 ++++---- .../backgrounds_and_borders/index.html | 2 +- .../cascade_and_inheritance/index.html | 6 +++--- .../css/building_blocks/cascade_tasks/index.html | 2 +- .../css/building_blocks/debugging_css/index.html | 2 +- .../fundamental_css_comprehension/index.html | 2 +- .../images_media_form_elements/index.html | 4 ++-- files/ru/learn/css/building_blocks/index.html | 2 +- .../selectors/attribute_selectors/index.html | 4 ++-- .../selectors/combinators/index.html | 4 ++-- .../learn/css/building_blocks/selectors/index.html | 2 +- .../type_class_and_id_selectors/index.html | 2 +- .../css/building_blocks/styling_tables/index.html | 22 +++++++++++----------- .../css/building_blocks/the_box_model/index.html | 16 ++++++++-------- .../building_blocks/values_and_units/index.html | 6 +++--- 15 files changed, 42 insertions(+), 42 deletions(-) (limited to 'files/ru/learn/css/building_blocks') diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html index 174d980693..251a05fd63 100644 --- a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html +++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html @@ -36,7 +36,7 @@ translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects

Блок-тень

-

{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и text-shadow, box-shadows отлично поддерживаются брузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.

+

{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и text-shadow, box-shadows отлично поддерживаются браузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.

Вы можете найти примеры из стати на box-shadow.html (или в исходном коде).

@@ -150,7 +150,7 @@ button:active {

{{ EmbedLiveSample('Другие_опции_блок-теней', '100%', 70) }}

-

Мы стилизовали кнопку с помощью состояний focus, hover и active. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противополжном углу кнопки для эстетичности.

+

Мы стилизовали кнопку с помощью состояний focus, hover и active. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противоположном углу кнопки для эстетичности.

При нажатии на кнопку первая тень становится внутренней, чтобы создать ощущение нажатия кнопки.

@@ -302,14 +302,14 @@ article div:last-child {

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

-

Примечание: В Firefox Вы можеет использовать Инспектор фигур, чтобы редактировать фигуры.

+

Примечание: В Firefox Вы можете использовать Инспектор фигур, чтобы редактировать фигуры.

Значение circle() — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте Обзор CSS-фигур на MDN.)

-webkit-background-clip: text

-

Функция, о которой мы, кажется, упомянули в свйстве text для значения {{cssxref("background-clip")}}. Опция -webkit-text-fill-color: transparent; позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс -webkit- для любых браузеров:

+

Функция, о которой мы, кажется, упомянули в свойстве text для значения {{cssxref("background-clip")}}. Опция -webkit-text-fill-color: transparent; позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс -webkit- для любых браузеров:

.text-clip {
   -webkit-background-clip: text;
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
index c0e52dd232..861ec6f884 100644
--- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -32,7 +32,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
Стилизация фона в CSS

 
-
CSS cвойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.

+
CSS свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.

 
 
.box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
index 5d29314cea..dd52f08276 100644
--- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
+++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -51,7 +51,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 
 
Специфичность

 
-
Cпецифичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h1{...}, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:

+
Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h1{...}, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность. По существу, это мера того, насколько специфическим будет отбор по селектору:

 
 
    
  
  • Селектор элементов ( например h1 ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.
    • 
@@ -74,7 +74,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 
 
    {{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} 
    
 
-
    Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы черезвычайно трудно использовать!
    
+
    Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!
    
 
 
    
 
    Примечание: На страницах справочника CSS свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: color property Specifications section.
    
@@ -90,7 +90,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 
 
    Понимание наследования
    
 
-
    Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы устанавили для внешнего <ul> стиль границы, внутренние отступы и цвет шрифта.
    
+
    Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего <ul> стиль границы, внутренние отступы и цвет шрифта.
    
 
 
    Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку <li> и к элементам внутри первого вложенного списка. Далее мы добавили класс special ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.
    
 
diff --git a/files/ru/learn/css/building_blocks/cascade_tasks/index.html b/files/ru/learn/css/building_blocks/cascade_tasks/index.html
index d4f7440cb8..b7580f53e0 100644
--- a/files/ru/learn/css/building_blocks/cascade_tasks/index.html
+++ b/files/ru/learn/css/building_blocks/cascade_tasks/index.html
@@ -40,7 +40,7 @@ original_slug: Learn/CSS/Building_blocks/Каскад_задачи
 
    Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:
    
 
 
      
- 
    1. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использвать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
      2. 
+ 
    2. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использовать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
      3. 
  
    3. Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": MDN Discourse forum Learning category. Ваше сообщение должно включать:
   
        
    
      • Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
        • 
diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.html b/files/ru/learn/css/building_blocks/debugging_css/index.html
index 1e78277f4b..ceb299bcab 100644
--- a/files/ru/learn/css/building_blocks/debugging_css/index.html
+++ b/files/ru/learn/css/building_blocks/debugging_css/index.html
@@ -138,7 +138,7 @@ translation_of: Learn/CSS/Building_blocks/Debugging_CSS
 
 
        Поддерживаются ли свойство и значение браузером в котором вы тестируете?
        
 
-
        Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсетки" (subgrid) {{cssxref("grid-template-columns")}}.
        
+
        Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применен. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсветки" (subgrid) {{cssxref("grid-template-columns")}}.
        
 
 
        Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.
        
 
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 36f4767e10..2e47ff1cdf 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
@@ -8,7 +8,7 @@ original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 
 
        {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
        
 
-
        Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социльной сети.
        
+
        Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социальной сети.
        
 
 
diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html
index 481cd28b58..21896e3f92 100644
--- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html
+++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.html
@@ -57,7 +57,7 @@ translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
 
 
        Вы также можете попробовать значение fill, которое будет заполнять блок, но при этом не сохранять соотношение сторон.
        
 
-
        Замещаемые элемнты в верстке
        
+
        Замещаемые элементы в верстке
        При использовании различных методов верстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.
        
 
@@ -127,7 +127,7 @@ textarea {
 
 
        Другие полезные настройки
        
 
-
        В дополние к правилам отмеченых выше, вы должны также установить overflow: auto для <textarea> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:
        
+
        В дополнение к правилам отмеченных выше, вы должны также установить overflow: auto для <textarea> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:
        textarea {
   overflow: auto;
diff --git a/files/ru/learn/css/building_blocks/index.html b/files/ru/learn/css/building_blocks/index.html
index 8f071e3f62..8f2b09449c 100644
--- a/files/ru/learn/css/building_blocks/index.html
+++ b/files/ru/learn/css/building_blocks/index.html
@@ -52,7 +52,7 @@ translation_of: Learn/CSS/Building_blocks
  
        Блоки в CSS
        
  
        Всё в CSS имеет форму блока, и понимание блоков позволяет Вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим CSS-блоки.
        
  
        Фон и границы
        
- 
        В этом уроке мы рассмотрим всякие интересные вещи, котроые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиетнов и фоновых изображений до скругления углов, фонов и границ.
        
+ 
        В этом уроке мы рассмотрим всякие интересные вещи, которые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиентов и фоновых изображений до скругления углов, фонов и границ.
        
  
        Изменение направления текста
        
  
        Раньше CSS развивался, чтобы лучше поддерживать разные режимы написания, включая справа налево или сверху вниз (как в японском языке). Мы рассмотрим их в этой статье.
        
  
        Перекрытие содержимого
        
diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
index 3ac93f2012..de2d540a59 100644
--- a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
@@ -69,7 +69,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
 
 
          
  
        • Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
          • 
- 
        • li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью зачения. Он выбирает второй пункт списка.
          • 
+ 
        • li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
          • 
  
        • li[class~="a"] выберет класс a, а также значение, которое содержит класс a как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.
          • 
 
        
 
@@ -77,7 +77,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
 
 
        Селекторы вхождения подстроки
        
 
-
        Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со стороки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
        
+
        Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
        
 
 
        
  
 
 
 
 
        
diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html
index 89cab04833..c5dcf8b0c1 100644
--- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html
@@ -37,13 +37,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
        Дочерний комбинатор
        
 
-
        Дочерний комбинатор (>) помещается между двумя селекорами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селетор пишется так:
        
+
        Дочерний комбинатор (>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селектор пишется так:
        article > p
        Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.
        
 
-
        Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <li> получат верхнюю границу красного цвета.
        
+
        Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селектор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <li> получат верхнюю границу красного цвета.
        {{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}
        
 
diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html
index b52ba93b52..dc1eae6b95 100644
--- a/files/ru/learn/css/building_blocks/selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/index.html
@@ -35,7 +35,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
        Что такое селекторы?
        
 
-
        Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.
        
+
        Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.
        Some code with the h1 highlighted.
        
 
diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
index 2d54a6bde3..6e182420c8 100644
--- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
@@ -80,7 +80,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se
 
 
        Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.
        
 
-
        В примере ниже у нас есть <div>, содержащий примечание. Серая граница применятеся когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.
        
+
        В примере ниже у нас есть <div>, содержащий примечание. Серая граница применяется когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.
        Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними.  Вы увидите, что к последнему <div>  не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс  notebox, чтобы получить какую-нибудь стилизацию.
        
 
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 4c39633b30..2dafd6f79b 100644
--- a/files/ru/learn/css/building_blocks/styling_tables/index.html
+++ b/files/ru/learn/css/building_blocks/styling_tables/index.html
@@ -28,7 +28,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables
 
 
        Типичная HTML таблица
        
 
-
        Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать этоболее интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:
        
+
        Давайте начнем с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идет о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:
        <table>
   <caption>A summary of the UK's most famous punk bands</caption>
@@ -82,7 +82,7 @@ translation_of: Learn/CSS/Building_blocks/Styling_tables
 
        В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.
        
 
 
          
- 
        1. В начале неоюходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
          2. 
+ 
        2. В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
          3. 
  
        3. Следующее, это создать новый файл style.css и сохранить его в той же папке вместе с другими файлами.
          4. 
  
        4. Подключить CSS в HTML для этого разместить следующую строку в HTML внутри {{htmlelement("head")}}:
   
          <link href="style.css" rel="stylesheet" type="text/css">
          
@@ -125,9 +125,9 @@ th, td {
 
          Наиболее важные части следующие:
          
 
 
            
- 
          • Свойство {{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("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%, что означает, что таблица заполнит любой контейнер и будет озывчивой (хотя для этого потребуется еще некоторая работа для правильного отображнения на экранах небольших размеров).
            • 
+  Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется еще некоторая работа для правильного отображения на экранах небольших размеров).
  
          • Свойство {{cssxref("border-collapse")}} со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse;  рамки схлопываются в одну и так выглядит намного лучше: 
            • 
  
          • Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
            • 
  
          • Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создает в талице воздух, который позволяет ей дышать, делая ее более понятной.
            • 
@@ -141,7 +141,7 @@ th, td {
 
 
            Теперь мы еще кое-что изменим.
            
 
-
            Во-первых, мы пойдем и найдем на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотит, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбраный вами Google Fonts шрифт.
            
+
            Во-первых, мы пойдем и найдем на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбранный вами Google Fonts шрифт.
            
 
 
            Добавьте элемент {{htmlelement("link")}} в блок head вашего HTML, на строчку выше существующего элемента <link>:
            
 
@@ -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")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.
            
 
 
            Полосатая зебра
            
 
@@ -233,16 +233,16 @@ table {
 }
          
- 
        • Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательноость элементов. Так формула 2n-1 выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.
          • 
+ 
        • Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечетные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все четные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем четным и нечетным строкам разные (яркие) цвета.
          • 
  
        • Еще мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный .png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
          • 
- 
        • И наконец мы установили для таблицы сплошной цвет фона, котрый обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child.
          • 
+ 
        • И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child.
          • 
 
        Этот взрыв цвета выглядит следующим образом:
        
 
-
        То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и акдемической.
        
+
        То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.
        Стилизация заголовка
        
 
@@ -264,7 +264,7 @@ table {
 
 
        Активное обучение: Стилизация вашей собственной таблицы
        
 
-
        Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то зачительно более стильное и менее безвкусное чем наша таблица.
        
+
        Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.
        Стилизация таблицы быстрые советы
        
 
@@ -272,7 +272,7 @@ table {
 
 
          
  
        • Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
          • 
- 
        • Используйте {{cssxref("table-layout")}}: fixed для более понятного поведения разметки, при этомлегко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).
          • 
+ 
        • Используйте {{cssxref("table-layout")}}: fixed для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).
          • 
  
        • Используйте {{cssxref("border-collapse")}}: collapse, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
          • 
  
        • Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это дает возможность накладывать стили друг на друга, если это необходимо.
          • 
  
        • Используйте полоски зебры, чтобы облегчить чтение между строк.
          • 
diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html
index 74a40b9a33..27f451d650 100644
--- a/files/ru/learn/css/building_blocks/the_box_model/index.html
+++ b/files/ru/learn/css/building_blocks/the_box_model/index.html
@@ -8,7 +8,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 ---
 
          {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
          
 
-
          Каждый элемент в CSS заключён в коробку (английское "box") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом коробочную модель CSS, так, чтобы вы могли решать более сложные здачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.
          
+
          Каждый элемент в CSS заключён в коробку (английское "box") и понимание поведения этих коробок — это ключ к умению создавать макеты с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы рассмотрим надлежащим образом коробочную модель CSS, так, чтобы вы могли решать более сложные задачи построения макетов, понимая, как она работает, и терминологию, которая к ней относится.
          
 
 
          
 
@@ -66,7 +66,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
          Однако, мы можем изменить внутренний тип отображения, используя такие значения display как flex. Если мы установим display: flex; для элемента, внешний тип отображения примет значение block, но внутренний тип изменится на flex. Любые прямые дочерние элементы этой коробки станут гибкими (flex) объектами и будут размещены в соответствии с правилами, изложенными в спецификации Flexbox, о которой вы узнаете позже.
          
 
 
          
-
          Примечание: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN Блочное и cтрочное расположение.
          
+
          Примечание: Чтобы узнать больше о значениях display, и о том, как работают коробки при блочном или строчном расположении, посмотрите руководство MDN Блочное и срочное расположение.
          
 
          
 
 
          Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите flex, и другие внутренние значения, которые могут иметь ваши элементы, например grid.
          
@@ -168,7 +168,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
          В примере ниже, вы можете видеть 2 объекта. Оба имеют класс .box, который дает им одинаковые параметры width, height, margin, border, и padding. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.
          
 
-
          Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ишрина и высота совпали с первым блоком?
          
+
          Можете ли вы изменить размер второго объекта (добавляя CSS в класс .alternate) чтобы ширина и высота совпали с первым блоком?
          
 
 
          {{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} 
          
 
@@ -209,9 +209,9 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
          {{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} 
          
 
-
           Cхлопывание margin 
          
+
           Схлопывание margin 
          
 
-
          Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба зничения негативны, то сумма отрицательнных значений будет вычтена из общей суммы.
          
+
          Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания полей. Если у вас есть два элемента, поля которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения негативны, то сумма отрицательных значений будет вычтена из общей суммы.
          
 
 
          В примере ниже имеется два абзаца. Первый абзац имеет ширину margin-bottom  50 пикселей. Ширина второго параграфа — margin-top 30 пикселей. Поля схлопываются так, что в результате  margin между двумя блоками составляет 50 пикселей, а не сумму значений отдельных значений margin.
          
 
@@ -225,7 +225,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
          Граница располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер границы прибавляется к значениям width и height бокса. Если вы используете альтернативную блочную модель, то размер границы уменьшает поле контента данного блока, так как значения границы входит в значения width и height.
          
 
-
          Для слилизации границ существует большое количество различных свойств — имеется четыре границы,  и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.
          
+
          Для стилизации границ существует большое количество различных свойств — имеется четыре границы,  и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.
          
 
 
          Вы можете установить ширину, стиль или цвет всех четырех границ сразу используя {{cssxref("border")}} свойства.
          
 
@@ -238,7 +238,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
  
        • {{cssxref("border-left")}}
          • 
 
        
 
-
        Для утановки ширины, стиля или цвета всех границ используйте:
        
+
        Для установки ширины, стиля или цвета всех границ используйте:
          
  
        • {{cssxref("border-width")}}
          • 
@@ -302,7 +302,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
            
  
          • Применяются свойства width и height.
            • 
- 
          • Использование padding, margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемена.
            • 
+ 
          • Использование padding, margin и border приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.
            • 
 
          
 
 
          Он не прервётся на новую строку и станет больше, чем его содержимое, только если вы явно не укажите свойства width и height.
          
diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html
index 7aa0744ad9..d64426b99e 100644
--- a/files/ru/learn/css/building_blocks/values_and_units/index.html
+++ b/files/ru/learn/css/building_blocks/values_and_units/index.html
@@ -22,7 +22,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units
 
 
          Что такое значение CSS?
          
 
-
          В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечисленно на странице <color>.
          
+
          В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определенного свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <color>.
          
 
 
          
 
          Note: You'll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.
          
@@ -146,7 +146,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units
  
        
-   
+   
@@ -273,7 +273,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units
 
 
        И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.
        
 
-
        RGB и RGBA зачения
        
+
        RGB и RGBA значения
        Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — rgb() — которой дается три параметра представляющих каналы красного, зеленого и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.
        
 
-- 
cgit v1.2.3-54-g00ecf


        
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
   
        
    ЕдиницаОтосительна кОтносительна к