diff options
| author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-23 21:32:09 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-23 21:32:09 +0300 |
| commit | 9a96229818a3971444a77c238cc5ae45921db1bf (patch) | |
| tree | eb49956807321447f47ebdd01c4d71e1f46779cf /files/ru/learn/css | |
| parent | a4f49f9a14007bf65efdbe671d6383e8b233ac5b (diff) | |
| download | translated-content-9a96229818a3971444a77c238cc5ae45921db1bf.tar.gz translated-content-9a96229818a3971444a77c238cc5ae45921db1bf.tar.bz2 translated-content-9a96229818a3971444a77c238cc5ae45921db1bf.zip | |
Fix capitalization of Russian pronouns (#294)
* Fix capitalization of Russian pronouns
* Apply suggestions from code review
Co-authored-by: Alexander Myshov <myshov@users.noreply.github.com>
* Update files/ru/web/mathml/element/math/index.html
Co-authored-by: Alexander Myshov <myshov@users.noreply.github.com>
Co-authored-by: Alexander Myshov <myshov@users.noreply.github.com>
Diffstat (limited to 'files/ru/learn/css')
23 files changed, 97 insertions, 97 deletions
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 98c1d9b0a9..59ff2e0d03 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 @@ -19,7 +19,7 @@ translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects --- <div>{{LearnSidebar}}</div> -<p class="summary">В этой статье описаны некоторые хитрости, которые познакомят Вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</p> +<p class="summary">В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</p> <table class="learn-box standard-table"> <tbody> @@ -114,7 +114,7 @@ article { <p>{{ EmbedLiveSample('Несколько_теней', '100%', 100) }}</p> -<p>Мы сделали контейнер с несколькими ступенчатыми цветными тенями, но Вы можете делать, как считаете то нужным, например, чтобы добавить реалистичности, опираясь на какие-нибудь источники света.</p> +<p>Мы сделали контейнер с несколькими ступенчатыми цветными тенями, но вы можете делать, как считаете то нужным, например, чтобы добавить реалистичности, опираясь на какие-нибудь источники света.</p> <h3 id="Другие_опции_блок-теней">Другие опции блок-теней</h3> @@ -195,7 +195,7 @@ button:active { <h3 id="background-blend-mode">background-blend-mode</h3> -<p>Снова обратимся к примеру. Во-первых, {{cssxref("background-blend-mode")}} — мы покажем несколько контейнеров {{htmlelement("div")}}, чтобы Вы сравнили оригинал с редактированной версией:</p> +<p>Снова обратимся к примеру. Во-первых, {{cssxref("background-blend-mode")}} — мы покажем несколько контейнеров {{htmlelement("div")}}, чтобы вы сравнили оригинал с редактированной версией:</p> <pre class="brush: html"><div> </div> @@ -288,7 +288,7 @@ article div:last-child { <p>Как видите, смешались не только фоновые изображения, но и <code><div></code> под ними.</p> <div class="note"> -<p><strong>Примечание</strong>: Не переживайте, если Вы не знаете такие свойства разметки, как {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}} и т. д. Мы детально рассмотрим это в модуле <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> +<p><strong>Примечание</strong>: Не переживайте, если вы не знаете такие свойства разметки, как {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}} и т. д. Мы детально рассмотрим это в модуле <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p> </div> <h2 id="CSS-фигуры">CSS-фигуры</h2> @@ -302,7 +302,7 @@ article div:last-child { <p>Форма в этом примере не реагирует на содержание изображения. Вместо этого в центре изображения определяется центр окружности, как если бы мы начертили циркулем окружность, вписанную в изображение. Это та окружность, которую обтекает текст.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: В Firefox Вы можете использовать <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Инспектор фигур</a>, чтобы редактировать фигуры.</p> +<p><strong>Примечание</strong>: В Firefox вы можете использовать <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Инспектор фигур</a>, чтобы редактировать фигуры.</p> </div> <p>Значение <code>circle()</code> — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте <a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Обзор CSS-фигур</a> на MDN.)</p> 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 71587be09c..e521b20fa4 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 @@ -160,7 +160,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством {{cssxref ("background-image")}}.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных </span></span><code><a href="/en-US/docs/Web/CSS/gradient"><gradient></a></code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Поиграть с градиентами Вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например </span></span><a href="https://cssgradient.io/">этот</a><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Вы можете создать градиент, а затем скопировать и вставить его </span></span>в свой код<span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных </span></span><code><a href="/en-US/docs/Web/CSS/gradient"><gradient></a></code><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например </span></span><a href="https://cssgradient.io/">этот</a><span class="tlid-translation translation" lang="ru"><span title="">.</span> <span title="">Вы можете создать градиент, а затем скопировать и вставить его </span></span>в свой код<span class="tlid-translation translation" lang="ru"><span title="">.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Попробуйте использовать разные градиенты в примере ниже.</span> <span title="">В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.</span></span></p> @@ -170,7 +170,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p>Также возможно создавать несколько фоновых изображений — просто разделив значения свойства <code>background-image</code> запятыми.</p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Когда Вы сделаете это, произойдёт наложение фоновых изображений друг на друга.</span> <span title="">Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.</span></span> </p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга.</span> <span title="">Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.</span></span> </p> <div class="blockIndicator note"> <p><strong>Примечание</strong>: Градиенты можно <span class="tlid-translation translation" lang="ru"><span title="">легко смешивать с обычными фоновыми изображениями</span></span>.</p> @@ -296,7 +296,7 @@ background-position: 10px 20px, top right;</pre> <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 555)}} </p> <div class="blockIndicator note"> -<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Примечание</span></span>:</strong> Вы можете посмотреть <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">решение</a> здесь — <span class="tlid-translation translation" lang="ru"><span title="">но сначала попробуйте сделать это сами</span></span>!</p> +<p><strong><span class="tlid-translation translation" lang="ru"><span title="">Примечание</span></span>:</strong> вы можете посмотреть <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">решение</a> здесь — <span class="tlid-translation translation" lang="ru"><span title="">но сначала попробуйте сделать это сами</span></span>!</p> </div> <h2 id="Итоги">Итоги</h2> 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 dd8cf674a5..c43e8e822a 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 @@ -14,7 +14,7 @@ translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance --- <div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> -<p>Цель этого урока — углубить Ваше понимание некоторых основополагающих концепций CSS — каскадов, спецификаций и наследования, — которые контролируют то, как CSS применяется к HTML и как разрешаются конфликты.</p> +<p>Цель этого урока — углубить ваше понимание некоторых основополагающих концепций CSS — каскадов, спецификаций и наследования, — которые контролируют то, как CSS применяется к HTML и как разрешаются конфликты.</p> <p>Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше.</p> 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 b7580f53e0..261b742ec9 100644 --- a/files/ru/learn/css/building_blocks/cascade_tasks/index.html +++ b/files/ru/learn/css/building_blocks/cascade_tasks/index.html @@ -14,7 +14,7 @@ original_slug: Learn/CSS/Building_blocks/Каскад_задачи <p>Цель этого задания — помочь вам проверить ваше понимание некоторых значений и элементов, которые мы рассмотрели в уроке <a href="/ru-RU/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a>.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>, которые можно использовать для работы над заданием, предварительно загрузив в них код.<br> +<p><strong>Примечание</strong>: вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>, которые можно использовать для работы над заданием, предварительно загрузив в них код.<br> <br> Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел {{anch("Оценка или дальнейшая помощь")}} внизу этой страницы.</p> </div> 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 b7f68a3e29..910edf7ce4 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 @@ -112,7 +112,7 @@ textarea { <h3 id="Элементы_форм_и_box-sizing">Элементы форм и box-sizing</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов.</span></span> Вы изучали свойство <code>box-sizing</code> в <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">нашем уроке Блоки в CSS</a> и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов.</span></span> вы изучали свойство <code>box-sizing</code> в <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">нашем уроке Блоки в CSS</a> и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.</p> <p>Для единообразия рекомендуется устанавливать margin и padding на <code>0</code> для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.</p> diff --git a/files/ru/learn/css/building_blocks/index.html b/files/ru/learn/css/building_blocks/index.html index 8f2b09449c..a5873dd2cd 100644 --- a/files/ru/learn/css/building_blocks/index.html +++ b/files/ru/learn/css/building_blocks/index.html @@ -15,13 +15,13 @@ translation_of: Learn/CSS/Building_blocks --- <div>{{LearnSidebar}}</div> -<p class="summary">Этот модуль — продолжение раздела <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>: Вы уже знакомы с синтаксисом языка и опробовали основные функции; пришло время углубиться в CSS. В этом модуле рассматриваются каскады и наследование, все доступные типы селекторов, блоков, изменений размеров, фонов, границ, а также отладка и многое другое.</p> +<p class="summary">Этот модуль — продолжение раздела <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>: вы уже знакомы с синтаксисом языка и опробовали основные функции; пришло время углубиться в CSS. В этом модуле рассматриваются каскады и наследование, все доступные типы селекторов, блоков, изменений размеров, фонов, границ, а также отладка и многое другое.</p> -<p class="summary">Наша цель в этом модуле — обеспечить Вас необходимым набором инструментов для написания хорошего CSS-кода, а также помочь Вам понять необходимую теорию для перехода к особым дисциплинам, таким как <a href="/ru/docs/Learn/CSS/Styling_text">стилизация текста</a> и <a href="/ru/docs/Learn/CSS/CSS_layout">размещение элементов с помощью CSS</a>.</p> +<p class="summary">Наша цель в этом модуле — обеспечить вас необходимым набором инструментов для написания хорошего CSS-кода, а также помочь вам понять необходимую теорию для перехода к особым дисциплинам, таким как <a href="/ru/docs/Learn/CSS/Styling_text">стилизация текста</a> и <a href="/ru/docs/Learn/CSS/CSS_layout">размещение элементов с помощью CSS</a>.</p> <h2 id="Необходимые_умения">Необходимые умения</h2> -<p>Перед изучением этого раздела Вы должны иметь:</p> +<p>Перед изучением этого раздела вы должны иметь:</p> <ol> <li>Стандартную рабочую среду (<a href="/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установке базового программного обеспечения</a>), а также понимание того, как создавать файлы и работать с ними (<a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>).</li> @@ -30,16 +30,16 @@ translation_of: Learn/CSS/Building_blocks </ol> <div class="note"> -<p><strong>Примечание</strong>: Если Вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, Вы можете опробовать примеры (большую часть) на таких онлайн-программах, как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Примечание</strong>: Если вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, вы можете опробовать примеры (большую часть) на таких онлайн-программах, как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Руководства">Руководства</h2> -<p>В этом модуле содержатся следующие статьи, в которых рассказывается об основных составляющих языка. По мере обучения Вы встретите упражнения, позволяющие Вам усвоить пройденный материал.</p> +<p>В этом модуле содержатся следующие статьи, в которых рассказывается об основных составляющих языка. По мере обучения вы встретите упражнения, позволяющие вам усвоить пройденный материал.</p> <dl> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></dt> - <dd>Цель данного урока — углубить Ваше понимание основных концепций CSS — каскадов, спецификаций и наследования, — которые контролируют, как CSS добавляется в HTML и как разрешаются конфликты.</dd> + <dd>Цель данного урока — углубить ваше понимание основных концепций CSS — каскадов, спецификаций и наследования, — которые контролируют, как CSS добавляется в HTML и как разрешаются конфликты.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">CSS-селекторы</a></dt> <dd>Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы рассмотрим разные типы в мельчайших подробностях и увидим как они работают. Подстатьи по порядку: <ul> @@ -50,9 +50,9 @@ translation_of: Learn/CSS/Building_blocks </ul> </dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS</a></dt> - <dd>Всё в CSS имеет форму блока, и понимание блоков позволяет Вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим <em>CSS-блоки.</em></dd> + <dd>Всё в CSS имеет форму блока, и понимание блоков позволяет вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим <em>CSS-блоки.</em></dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></dt> - <dd>В этом уроке мы рассмотрим всякие интересные вещи, которые Вы можете делать благодаря CSS-фонам и границам, — от добавления градиентов и фоновых изображений до скругления углов, фонов и границ.</dd> + <dd>В этом уроке мы рассмотрим всякие интересные вещи, которые вы можете делать благодаря CSS-фонам и границам, — от добавления градиентов и фоновых изображений до скругления углов, фонов и границ.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста</a></dt> <dd>Раньше CSS развивался, чтобы лучше поддерживать разные <strong>режимы написания</strong>, включая <em>справа налево</em> или <em>сверху вниз</em> (как в японском языке). Мы рассмотрим их в этой статье.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></dt> @@ -60,21 +60,21 @@ translation_of: Learn/CSS/Building_blocks <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения свойств CSS</a></dt> <dd>У каждого CSS-свойства есть значения. В этом уроке мы рассмотрим основные значения и их единицы.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></dt> - <dd>В предыдущих уроках Вы встречались с различными способами изменения размеров элементов с использованием CSS. В этой статье мы собрали разные способы изменить размер через CSS.</dd> + <dd>В предыдущих уроках вы встречались с различными способами изменения размеров элементов с использованием CSS. В этой статье мы собрали разные способы изменить размер через CSS.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></dt> - <dd>Мы рассмотрим, как некоторые элементы относятся к CSS. Изображения, формы и другие медиа-элементы ведут себя по-другому, когда Вы стилизуете их через CSS. Некоторые функции могут не работать, поэтому в этой статье мы рассмотрим то, что Вам нужно знать про эти элементы.</dd> + <dd>Мы рассмотрим, как некоторые элементы относятся к CSS. Изображения, формы и другие медиа-элементы ведут себя по-другому, когда вы стилизуете их через CSS. Некоторые функции могут не работать, поэтому в этой статье мы рассмотрим то, что вам нужно знать про эти элементы.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></dt> <dd>Стилизация HTML таблиц — это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья описывает, как сделать, чтобы Ваши HTML-таблицы выглядели хорошо, и некоторые свойства, подробно рассмотренные в предыдущих статьях.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></dt> <dt></dt> - <dd>При написании CSS Вы можете столкнуться с тем, что Ваш CSS-код работает не так, как Вы того хотели. Вы узнаете, как отлаживать CSS и как с помощью инструментов разработчика понять, где неполадка.</dd> + <dd>При написании CSS вы можете столкнуться с тем, что ваш CSS-код работает не так, как вы того хотели. Вы узнаете, как отлаживать CSS и как с помощью инструментов разработчика понять, где неполадка.</dd> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация CSS-кода</a></dt> - <dd>Как только Вы начнёте работать над большими проектами и таблицами стилей, Вы поймёте, что обслуживать такие таблицы не так-то и легко. В статье мы рассмотрим, как лучше писать CSS, чтобы его было легче обслуживать.</dd> + <dd>Как только вы начнёте работать над большими проектами и таблицами стилей, вы поймёте, что обслуживать такие таблицы не так-то и легко. В статье мы рассмотрим, как лучше писать CSS, чтобы его было легче обслуживать.</dd> </dl> <h2 id="Смотрите_также">Смотрите также</h2> <dl> <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Узконаправленные функции CSS</a></dt> - <dd>В этой статье описаны некоторые хитрости, которые познакомят Вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</dd> + <dd>В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</dd> </dl> diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index dc1eae6b95..242a0859fa 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -39,9 +39,9 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> -<p>Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент <code>h1</code> или класс <code>.special</code>.</p> +<p>Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент <code>h1</code> или класс <code>.special</code>.</p> -<p>В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые Вы встретите, определены в <a href="https://www.w3.org/TR/selectors-3/">Спецификации селекторов 3 уровня</a>, где Вы сможете найти всю информацию о поддержке селекторов в браузерах.</p> +<p>В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в <a href="https://www.w3.org/TR/selectors-3/">Спецификации селекторов 3 уровня</a>, где вы сможете найти всю информацию о поддержке селекторов в браузерах.</p> <h2 id="Несколько_селекторов">Несколько селекторов</h2> @@ -136,7 +136,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <h2 id="Продолжение">Продолжение</h2> -<p>Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или Вы можете двинуться дальше: нас ждут <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">селекторы тегов, классов и идентификаторов</a>.</p> +<p>Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors">селекторы тегов, классов и идентификаторов</a>.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> diff --git a/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html index 4375def5db..ce8f4424e0 100644 --- a/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html +++ b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html @@ -14,7 +14,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Селекторы_ <p>Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>, которые можно использовать для работы над заданием, предварительно загрузив в них код.<br> +<p><strong>Примечание</strong>: вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>, которые можно использовать для работы над заданием, предварительно загрузив в них код.<br> <br> Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел <a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8#Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</a> внизу этой страницы.</p> </div> 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 96ba3fb315..cadef38488 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 @@ -173,7 +173,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Вы можете найти решение этой задачи <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">здесь</a>.</p> +<p><strong>Примечание</strong>: вы можете найти решение этой задачи <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">здесь</a>.</p> </div> <h3 id="Использование_инструментов_разработчика_в_браузере_для_просмотра_блочных_моделей">Использование инструментов разработчика в браузере для просмотра блочных моделей</h3> diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index 46e77bfe72..101646aea2 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -62,7 +62,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.</p> -<p><strong>Примечание</strong>: Вы также можете установить значение {{cssxref("display")}} <code>inline-flex, </code>если хотите расставить inline элементы как flex блоки.</p> +<p><strong>Примечание</strong>: вы также можете установить значение {{cssxref("display")}} <code>inline-flex, </code>если хотите расставить inline элементы как flex блоки.</p> <h2 id="Внутри_flex_модели">Внутри flex модели</h2> @@ -90,7 +90,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.</p> <div class="note"> -<p><strong>Примечание</strong>: Вы можете также располагать flex элементы в обратном направлении, используя значения <code>row-reverse</code> и <code>column-reverse</code>. Попробуйте их тоже!</p> +<p><strong>Примечание</strong>: вы можете также располагать flex элементы в обратном направлении, используя значения <code>row-reverse</code> и <code>column-reverse</code>. Попробуйте их тоже!</p> </div> <h2 id="Перенос_строк">Перенос строк</h2> diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index 084dc2f654..cfdfcd3c83 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -259,7 +259,7 @@ body { .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> <div class="note"> -<p><strong>Примечание</strong>: Вы можете увидеть нашу законченную версию в файле <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">liquid-grid-calc.html</a> (также см. её <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">в режиме реального времени</a>).</p> +<p><strong>Примечание</strong>: вы можете увидеть нашу законченную версию в файле <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">liquid-grid-calc.html</a> (также см. её <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">в режиме реального времени</a>).</p> </div> <div class="note"> diff --git a/files/ru/learn/css/css_layout/index.html b/files/ru/learn/css/css_layout/index.html index 1fce962206..3f0be53aca 100644 --- a/files/ru/learn/css/css_layout/index.html +++ b/files/ru/learn/css/css_layout/index.html @@ -43,7 +43,7 @@ translation_of: Learn/CSS/CSS_layout <h2 id="Руководство">Руководство</h2> -<p>Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у Вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.</p> +<p>Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.</p> <dl> <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></dt> diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index e99182f446..13c7c1dafd 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -50,7 +50,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!</p> <div class="note"> -<p><strong>Примечание</strong>: Вы можете посмотреть живой пример на данном этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">см. исходный код</a>).</p> +<p><strong>Примечание</strong>: вы можете посмотреть живой пример на данном этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">см. исходный код</a>).</p> </div> <h3 id="Относительное_позиционирование">Относительное позиционирование</h3> @@ -169,7 +169,7 @@ span { <p>Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. <span class="tlid-translation translation" lang="ru"><span title="">Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является </span></span><strong><span class="tlid-translation translation" lang="ru"><span title="">исходным содержащим блоком</span></span></strong>. См. раздел ниже для дополнительной информации<span class="tlid-translation translation" lang="ru"><span title="">).</span></span></p> <div class="note"> -<p><strong>Примечание</strong>: Вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить <code>top: 0; bottom: 0; left: 0; right: 0;</code> и <code>margin: 0;</code> для вашего позиционируемого элемента и посмотрите, что произойдёт! <span class="tlid-translation translation" lang="ru"><span title="">Потом снова все верните...</span></span></p> +<p><strong>Примечание</strong>: вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить <code>top: 0; bottom: 0; left: 0; right: 0;</code> и <code>margin: 0;</code> для вашего позиционируемого элемента и посмотрите, что произойдёт! <span class="tlid-translation translation" lang="ru"><span title="">Потом снова все верните...</span></span></p> </div> <div class="note"> diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html index 8552c0c8ee..62d427f5c5 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -134,7 +134,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн </figure> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Вы можете найти <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">живой пример</a> и <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">исходный код</a> этого примера на GitHub.</p> +<p><strong>Примечание</strong>: вы можете найти <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">живой пример</a> и <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">исходный код</a> этого примера на GitHub.</p> </div> <h2 id="Современные_технологии_макетов">Современные технологии макетов</h2> diff --git a/files/ru/learn/css/first_steps/getting_started/index.html b/files/ru/learn/css/first_steps/getting_started/index.html index cad8d8ee51..ed393dddc5 100644 --- a/files/ru/learn/css/first_steps/getting_started/index.html +++ b/files/ru/learn/css/first_steps/getting_started/index.html @@ -62,12 +62,12 @@ translation_of: Learn/CSS/First_steps/Getting_started </pre> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Если Вы читаете это на устройстве или в среде, где Вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.</p> +<p><strong>Примечание</strong>: Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.</p> </div> <h2 id="Добавление_CSS_в_наш_документ">Добавление CSS в наш документ</h2> -<p>Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым Вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.</p> +<p>Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.</p> <p>Создайте файл в той же папке, что и документ HTML, и сохраните его как <code>styles.css</code>. Расширение .css показывает, что это файл CSS.</p> @@ -75,19 +75,19 @@ translation_of: Learn/CSS/First_steps/Getting_started <pre class="brush: html"><link rel="stylesheet" href="styles.css"></pre> -<p>Элемент {{htmlelement("link")}} сообщает браузеру, что у нас есть таблица стилей, используя атрибут <em>rel</em>, и местоположение этой таблицы стилей в качестве значения атрибута <em>href.</em> Вы можете проверить, работает ли CSS, добавив правило в <em>styles.css</em>. Используя Ваш редактор кода, добавьте следующее в ваш файл CSS:</p> +<p>Элемент {{htmlelement("link")}} сообщает браузеру, что у нас есть таблица стилей, используя атрибут <em>rel</em>, и местоположение этой таблицы стилей в качестве значения атрибута <em>href.</em> вы можете проверить, работает ли CSS, добавив правило в <em>styles.css</em>. Используя ваш редактор кода, добавьте следующее в ваш файл CSS:</p> <pre class="brush: css">h1 { color: red; }</pre> -<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — Вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли Вы ввели всё.</p> +<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли вы ввели всё.</p> -<p>Вы можете продолжить работу в <code>styles.css</code> локально, или Вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.</p> +<p>Вы можете продолжить работу в <code>styles.css</code> локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.</p> <h2 id="Стилизация_HTML-элементов">Стилизация HTML-элементов</h2> -<p>Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент<em> selector</em> — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, Вы должны использовать селектор <code>p</code>. Чтобы сделать все абзацы зелёными, Вы должны использовать:</p> +<p>Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент<em> selector</em> — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, вы должны использовать селектор <code>p</code>. Чтобы сделать все абзацы зелёными, вы должны использовать:</p> <pre class="brush: css">p { color: green; @@ -107,7 +107,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.</p> -<p>Однако Вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <code><ul></code> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:</p> +<p>Однако вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <code><ul></code> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:</p> <pre class="brush: css">li { list-style-type: none; @@ -115,13 +115,13 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Попробуйте добавить это в свой CSS сейчас.</p> -<p>Свойство <code>list-style-type</code> — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> и Вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.</p> +<p>Свойство <code>list-style-type</code> — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> и вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.</p> -<p>Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка Вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение <code>square</code>.</p> +<p>Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение <code>square</code>.</p> <h2 id="Добавление_класса">Добавление класса</h2> -<p>Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока Вы хотите, чтобы все элементы этого типа в Вашем документе выглядели одинаково. В большинстве случаев это не так, и Вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.</p> +<p>Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. В большинстве случаев это не так, и вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.</p> <p>В своём HTML-документе добавьте Атрибут <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> ко второму пункту списка. Ваш список теперь будет выглядеть так:</p> @@ -131,7 +131,7 @@ translation_of: Learn/CSS/First_steps/Getting_started <li>Элемент <em>три</em></li> </ul></pre> -<p>В Вашем CSS Вы можете выбрать класс <code>special</code> к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:</p> +<p>В вашем CSS вы можете выбрать класс <code>special</code> к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:</p> <pre class="brush: css">.special { color: orange; @@ -142,14 +142,14 @@ translation_of: Learn/CSS/First_steps/Getting_started <p>Вы можете захотеть, чтобы <span> в абзаце также был оранжевым и жирным. Попробуйте добавить класс "<code>special"</code>, затем перезагрузите страницу и посмотрите, что получится.</p> -<p>Иногда Вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:</p> +<p>Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:</p> <pre class="brush: css">li.special { color: orange; font-weight: bold; }</pre> -<p>Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы Вы сделали это, Вы бы больше не смогли применить класс к <code><span></code> или другому элементу, просто добавив к нему класс; Вы должны добавить этот элемент в список селекторов:</p> +<p>Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к <code><span></code> или другому элементу, просто добавив к нему класс; вы должны добавить этот элемент в список селекторов:</p> <pre class="brush: css">li.special, span.special { @@ -157,11 +157,11 @@ span.special { font-weight: bold; }</pre> -<p>Как Вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и Вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только Вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.</p> +<p>Как вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.</p> <h2 id="Стилизация_элементов_на_основе_их_расположения_в_документе">Стилизация элементов на основе их расположения в документе</h2> -<p>Есть моменты, когда Вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут Вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента <code><em></code> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <code><em></code> который вложен в элемент <code><li></code>, я могу использовать селектор под названием <strong>descendant combinator (комбинатор-потомок)</strong>, который просто принимает форму пробела между двумя другими селекторами.</p> +<p>Есть моменты, когда вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента <code><em></code> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <code><em></code> который вложен в элемент <code><li></code>, я могу использовать селектор под названием <strong>descendant combinator (комбинатор-потомок)</strong>, который просто принимает форму пробела между двумя другими селекторами.</p> <p>Добавьте следующее правило в таблицу стилей.</p> @@ -169,7 +169,7 @@ span.special { color: rebeccapurple; }</pre> -<p>Этот селектор выберет любой элемент <code><em></code>, который находится внутри (потомка) <code><li></code>. Итак, в Вашем примере документа Вы должны найти, что <code><em></code> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.</p> +<p>Этот селектор выберет любой элемент <code><em></code>, который находится внутри (потомка) <code><li></code>. Итак, в вашем примере документа вы должны найти, что <code><em></code> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.</p> <p>Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите <code>+</code> (<strong>соседний братский комбинатор</strong>) между селекторами.</p> @@ -179,12 +179,12 @@ span.special { font-size: 200%; }</pre> -<p>Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли Вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.</p> +<p>Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.</p> <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Как Вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы</a> позже в нашем курсе.</p> +<p><strong>Примечание</strong>: Как вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы</a> позже в нашем курсе.</p> </div> <h2 id="Стилизация_элементов_на_основе_состояния">Стилизация элементов на основе состояния</h2> @@ -205,23 +205,23 @@ a:visited { text-decoration: none; }</pre> -<p>В приведённом ниже примере Вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли Вы сделать ссылки жирным шрифтом?</p> +<p>В приведённом ниже примере вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли вы сделать ссылки жирным шрифтом?</p> <p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> -<p>Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте Вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с Вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.</p> +<p>Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Вы часто будете видеть упоминание о <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C">доступности</a> в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.</p> +<p><strong>Примечание</strong>: вы часто будете видеть упоминание о <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C">доступности</a> в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.</p> <p>Ваш посетитель вполне может быть на компьютере с мышью или сенсорной панелью или на телефоне с сенсорным экраном. Либо они могут использовать программу чтения с экрана, которая считывает содержимое документа, либо им может потребоваться использовать текст значительно большего размера, либо перемещаться по сайту только с помощью клавиатуры.</p> -<p>Простой HTML-документ, как правило, доступен каждому — когда Вы начинаете оформлять этот документ, важно, чтобы Вы не сделали его менее доступным.</p> +<p>Простой HTML-документ, как правило, доступен каждому — когда вы начинаете оформлять этот документ, важно, чтобы вы не сделали его менее доступным.</p> </div> <h2 id="Сочетание_селекторов_и_комбинаторов">Сочетание селекторов и комбинаторов</h2> -<p>Стоит отметить, что Вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:</p> +<p>Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:</p> <pre class="brush: css">/* выбирает любой <span> внутри <p>, который находится внутри <article> */ article p span { ... } @@ -241,11 +241,11 @@ h1 + ul + p { ... }</pre> <p>В оригинальном HTML, который мы предоставили, единственный элемент в стиле <code><span class="special"></code>.</p> -<p>Не беспокойтесь, если это покажется сложным — Вы скоро начнёте понимать это, когда будете писать больше на CSS.</p> +<p>Не беспокойтесь, если это покажется сложным — вы скоро начнёте понимать это, когда будете писать больше на CSS.</p> <h2 id="Завершение">Завершение</h2> -<p>В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако Вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.</p> +<p>В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.</p> <p>На следующем уроке мы рассмотрим структуру CSS.</p> diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html index 3956b38eec..de6232bf67 100644 --- a/files/ru/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html @@ -188,7 +188,7 @@ h1, h2, .intro /* перечисление селекторов */ </pre> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Вы узнаете больше о селекторах в руководстве <a href="/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">CSS-селекторы</a> в следующем модуле.</p> +<p><strong>Примечание</strong>: вы узнаете больше о селекторах в руководстве <a href="/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">CSS-селекторы</a> в следующем модуле.</p> </div> <h3 id="Спецификация">Спецификация</h3> diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.html index 3dacedb68c..661ae128e0 100644 --- a/files/ru/learn/css/first_steps/how_css_works/index.html +++ b/files/ru/learn/css/first_steps/how_css_works/index.html @@ -51,7 +51,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится {{Glossary("Node/DOM","DOM node")}} в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.</p> -<p>Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве Ваши таблицы стилей и код встречаются. Когда вы начнёте работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.</p> +<p>Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве ваши таблицы стилей и код встречаются. Когда вы начнёте работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.</p> <h2 id="Как_представлено_DOM-дерево">Как представлено DOM-дерево</h2> @@ -115,11 +115,11 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <h2 id="Что_происходит_когда_браузер_не_понимает_CSS">Что происходит, когда браузер не понимает CSS?</h2> -<p><a href="/ru/docs/Learn/CSS/First_steps/Что_такое_CSS#Поддержка_браузера">В предыдущем уроке</a> я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, Вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт?</p> +<p><a href="/ru/docs/Learn/CSS/First_steps/Что_такое_CSS#Поддержка_браузера">В предыдущем уроке</a> я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт?</p> <p>— Да ничего: браузер просто пропустит это!</p> -<p>Если браузер встретит свойство, которое он не понимает, он просто-напросто проигнорирует его и двинется дальше. Он сделает так, если Вы допустите опечатку или ошибку в свойстве или значении или если он не поддерживает какое-либо свойство или значение.</p> +<p>Если браузер встретит свойство, которое он не понимает, он просто-напросто проигнорирует его и двинется дальше. Он сделает так, если вы допустите опечатку или ошибку в свойстве или значении или если он не поддерживает какое-либо свойство или значение.</p> <p>Если же браузер встретит селектор, который он не распознаёт, то он просто пропустит данное правило и двинется дальше.</p> @@ -137,9 +137,9 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> -<p>Такое поведение можно использовать, например, при добавлении новых функций CSS в качестве дополнения, причём Вы будете уверены, что ничего не сломается, если браузер не распознает элемент. Вы можете использовать два правила с одинаковыми уровнями спецификации: одно — в качестве альтернативы для случая, если браузер не поддерживает нововведение.</p> +<p>Такое поведение можно использовать, например, при добавлении новых функций CSS в качестве дополнения, причём вы будете уверены, что ничего не сломается, если браузер не распознает элемент. Вы можете использовать два правила с одинаковыми уровнями спецификации: одно — в качестве альтернативы для случая, если браузер не поддерживает нововведение.</p> -<p>Это хорошо применяется, если Вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают <code>calc()</code> как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции <code>calc()</code>, равной <code>100% - 50px</code>. Старые браузеры используют пиксельное значение, потому что не распознают <code>calc()</code>. Новые браузеры используют <code>calc()</code> так как эта строка появляется позже в каскаде.</p> +<p>Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают <code>calc()</code> как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции <code>calc()</code>, равной <code>100% - 50px</code>. Старые браузеры используют пиксельное значение, потому что не распознают <code>calc()</code>. Новые браузеры используют <code>calc()</code> так как эта строка появляется позже в каскаде.</p> <pre class="brush: css notranslate">.box { width: 500px; @@ -148,7 +148,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <h2 id="Завершение">Завершение</h2> -<p>Вы почти закончили модуль; осталось только одно. В следующей статье Вы попрактикуетесь в <a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">использовании ваших новых знаний</a>.</p> +<p>Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в <a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">использовании ваших новых знаний</a>.</p> <p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> diff --git a/files/ru/learn/css/first_steps/index.html b/files/ru/learn/css/first_steps/index.html index af481bea5e..8439130ac9 100644 --- a/files/ru/learn/css/first_steps/index.html +++ b/files/ru/learn/css/first_steps/index.html @@ -39,7 +39,7 @@ translation_of: Learn/CSS/First_steps <dt><a href="https://wiki.developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></dt> <dd>В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></dt> - <dd>Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; Вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.</dd> + <dd>Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.</dd> <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></dt> <dd>Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берёт CSS и HTML и превращает их в веб-страницу.</dd> <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></dt> diff --git a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html index 41873a7a60..a330376ca0 100644 --- a/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html +++ b/files/ru/learn/css/first_steps/using_your_new_knowledge/index.html @@ -62,7 +62,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <li>Сделайте ссылки <code>зелёными</code> при наведении.</li> </ol> -<p>У Вас должно получиться примерно как-то так:</p> +<p>У вас должно получиться примерно как-то так:</p> <p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p> @@ -74,23 +74,23 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge <h2 id="Помощь">Помощь</h2> -<p>Если Вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:</p> +<p>Если вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:</p> <ol> - <li>Загрузите Ваш код на <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a href="https://glitch.com/" rel="noopener">Glitch</a>.</li> - <li>Напишите пост с просьбой о помощи и / или оценке на <a href="https://discourse.mozilla.org/c/mdn">форуме MDN</a>. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В Вашем посте должны быть: + <li>Загрузите ваш код на <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a href="https://glitch.com/" rel="noopener">Glitch</a>.</li> + <li>Напишите пост с просьбой о помощи и / или оценке на <a href="https://discourse.mozilla.org/c/mdn">форуме MDN</a>. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В вашем посте должны быть: <ul> <li>Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".</li> - <li>Описание того, что Вам нужно, — к примеру, что Вы уже пробовали, что у Вас не получается и Вам нужна помощь.</li> + <li>Описание того, что вам нужно, — к примеру, что вы уже пробовали, что у вас не получается и вам нужна помощь.</li> <li>Ссылка на ваш код в онлайн-редакторе.</li> - <li>Ссылка на страницу о помощи, чтобы мы смогли помочь Вам с вашим вопросом.</li> + <li>Ссылка на страницу о помощи, чтобы мы смогли помочь вам с вашим вопросом.</li> </ul> </li> </ol> <h2 id="Что_дальше">Что дальше?</h2> -<p>Поздравляем Вас с завершением первого модуля! Теперь Вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, <a href="/ru/docs/Learn/CSS/Building_blocks">Как устроен CSS</a>, мы глубже разберёмся в некоторых аспектах языка.</p> +<p>Поздравляем вас с завершением первого модуля! Теперь вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, <a href="/ru/docs/Learn/CSS/Building_blocks">Как устроен CSS</a>, мы глубже разберёмся в некоторых аспектах языка.</p> <p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> diff --git a/files/ru/learn/css/first_steps/what_is_css/index.html b/files/ru/learn/css/first_steps/what_is_css/index.html index d2dc14cce2..7ce81dc6b5 100644 --- a/files/ru/learn/css/first_steps/what_is_css/index.html +++ b/files/ru/learn/css/first_steps/what_is_css/index.html @@ -32,19 +32,19 @@ original_slug: Learn/CSS/First_steps/Что_такое_CSS </tbody> </table> -<p>В модуле <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Основы HTML</a> мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчёркнуты, чтобы отличить их от остального текста. То, что Вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.</p> +<p>В модуле <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Основы HTML</a> мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчёркнуты, чтобы отличить их от остального текста. То, что вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/17072/Basic_styling__ru.png" style="border: 1px solid #cccccc; height: 678px; width: 1385px;"></p> -<p>Тем не менее, интернет был бы скучным, если бы все сайты выглядели так. Используя CSS, Вы можете до мелочей контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся Вам дизайн.</p> +<p>Тем не менее, интернет был бы скучным, если бы все сайты выглядели так. Используя CSS, вы можете до мелочей контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся вам дизайн.</p> <h2 id="Для_чего_нужен_CSS">Для чего нужен CSS?</h2> <p>Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.</p> -<p><strong>Документ</strong> обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространённый язык разметки, но Вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p> +<p><strong>Документ</strong> обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространённый язык разметки, но вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p> -<p><strong>Представление</strong> документа пользователю означает преобразование его в форму, используемую Вашей аудиторией<strong>.</strong> {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.</p> +<p><strong>Представление</strong> документа пользователю означает преобразование его в форму, используемую вашей аудиторией<strong>.</strong> {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.</p> <div class="blockIndicator note"> <p><strong>Примечание</strong>: Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.</p> @@ -54,7 +54,7 @@ original_slug: Learn/CSS/First_steps/Что_такое_CSS <h2 id="Синтаксис_CSS">Синтаксис CSS</h2> -<p>CSS — это язык на основе правил: Вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на Вашей веб-странице. Например:</p> +<p>CSS — это язык на основе правил: вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на вашей веб-странице. Например:</p> <p>«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».</p> @@ -82,19 +82,19 @@ p { color: black; }</pre> -<p>Вы обнаружите, что Вы быстро изучаете некоторые значения, тогда как другие Вам нужно искать. Страницы отдельных свойств в MDN дают Вам быстрый способ поиска свойств и их значений, когда Вы забыли или хотите узнать, что ещё Вы можете использовать в качестве значения.</p> +<p>Вы обнаружите, что вы быстро изучаете некоторые значения, тогда как другие вам нужно искать. Страницы отдельных свойств в MDN дают вам быстрый способ поиска свойств и их значений, когда вы забыли или хотите узнать, что ещё вы можете использовать в качестве значения.</p> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: Вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN <a href="/en-US/docs/Web/CSS/Reference">Руководстве по CSS</a>. Кроме того, Вы должны привыкнуть к поиску "MDN <em>css-feature-name</em>" в Вашем браузере, когда Вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!</p> +<p><strong>Примечание</strong>: вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN <a href="/en-US/docs/Web/CSS/Reference">Руководстве по CSS</a>. Кроме того, вы должны привыкнуть к поиску "MDN <em>css-feature-name</em>" в вашем браузере, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!</p> </div> <h2 id="CSS-модули">CSS-модули</h2> -<p>Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN Вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определённого модуля. Например, вы можете взглянуть на ссылку MDN в модуле <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Свойства фона и границ</a>, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).</p> +<p>Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определённого модуля. Например, вы можете взглянуть на ссылку MDN в модуле <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Свойства фона и границ</a>, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).</p> <p>На этом этапе вам не нужно слишком беспокоиться о том, как структурирован CSS, однако это может упростить поиск информации, если, например, вы знаете, что определённое свойство может быть найдено среди других похожих вещей, и поэтому, вероятно, в той же спецификации.</p> -<p>Для конкретного примера давайте вернёмся к модулю Свойства фона и границ — Вы можете подумать, что это логично для свойств <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> и <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code>, которые будут определены в этом модуле. И Вы правы.</p> +<p>Для конкретного примера давайте вернёмся к модулю Свойства фона и границ — вы можете подумать, что это логично для свойств <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> и <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code>, которые будут определены в этом модуле. И Вы правы.</p> <h3 id="Технические_характеристики_CSS">Технические характеристики CSS</h3> @@ -104,11 +104,11 @@ p { <p>Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!</p> -<p>Как новичок в CSS, вполне вероятно, что Вы найдёте CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.</p> +<p>Как новичок в CSS, вполне вероятно, что вы найдёте CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.</p> <h2 id="Поддержка_браузера">Поддержка браузера</h2> -<p>После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a><a href="/ru/docs/">.</a> Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN Вы можете видеть статус интересующего Вас свойства, чтобы Вы могли определить, сможете ли Вы использовать её на веб-сайте.</p> +<p>После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a><a href="/ru/docs/">.</a> Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN вы можете видеть статус интересующего вас свойства, чтобы вы могли определить, сможете ли вы использовать её на веб-сайте.</p> <p>Ниже приведена диаграмма данных для CSS свойства <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code>:</p> @@ -116,7 +116,7 @@ p { <h2 id="Что_дальше">Что дальше?</h2> -<p>Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдём к <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Началу работы с CSS</a>, где Вы можете начать писать CSS самостоятельно.</p> +<p>Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдём к <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Началу работы с CSS</a>, где вы можете начать писать CSS самостоятельно.</p> <p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> diff --git a/files/ru/learn/css/index.html b/files/ru/learn/css/index.html index f0ac78f21b..b88d38c409 100644 --- a/files/ru/learn/css/index.html +++ b/files/ru/learn/css/index.html @@ -18,7 +18,7 @@ translation_of: Learn/CSS <h2 id="План_обучения">План обучения </h2> -<p>Прежде чем браться за CSS, Вам стоит разобраться с основами HTML. Мы рекомендуем изучить модуль <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>. После его прохождения переходите к:</p> +<p>Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем изучить модуль <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>. После его прохождения переходите к:</p> <ul> <li>изучению CSS, начиная с модуля <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>;</li> @@ -30,7 +30,7 @@ translation_of: Learn/CSS <p>В данном разделе содержится информация, которая требует самой базовой ознакомленности с компьютером и интернетом. В статье <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Установка рабочего пространства</a> подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чём поможет статья <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>, которая включена в полное руководство для новичка <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>.</p> -<p>Перед тем как начинать данный раздел, мы рекомендуем пройти руководство <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>, хотя это вовсе не обязательно; большая часть того, что Вы найдёте в статье об основах CSS также встречается в разделе<a href="/ru/docs/Learn/CSS/First_steps"> Введение в CSS</a>, хотя и более детально.</p> +<p>Перед тем как начинать данный раздел, мы рекомендуем пройти руководство <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>, хотя это вовсе не обязательно; большая часть того, что вы найдёте в статье об основах CSS также встречается в разделе<a href="/ru/docs/Learn/CSS/First_steps"> Введение в CSS</a>, хотя и более детально.</p> <h2 id="Модули">Модули</h2> @@ -38,7 +38,7 @@ translation_of: Learn/CSS <dl> <dt><a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a></dt> - <dd>CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц, — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало Вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как Вы можете начать использовать его для добавления стилей в HTML.</dd> + <dd>CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц, — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.</dd> <dt><a href="/ru/docs/Learn/CSS/Styling_text">Дизайн текста</a></dt> <dd>Здесь мы рассмотрим основы стилизации текста, в том числе изменение шрифта, жирности, курсивного написания, межстрочного и межбуквенного интервалов, теней и других особенностей текста. Завершается модуль демонстрацией применения пользовательских шрифтов на вашей странице, оформлением списков и ссылок.</dd> <dt><a href="/ru/docs/Learn/CSS/Styling_boxes">Стилизация блоков</a></dt> @@ -53,7 +53,7 @@ translation_of: Learn/CSS <p>В разделе <strong><a href="/ru/docs/Learn/CSS/Как">Использование CSS для решения общих проблем</a></strong> даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.</p> -<p>В самом начале Вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с уверенным знанием даже основ CSS Вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что Вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если Вы ещё не уверены, как это сделать. </p> +<p>В самом начале вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с уверенным знанием даже основ CSS вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если вы ещё не уверены, как это сделать. </p> <h2 id="Смотрите_также">Смотрите также</h2> @@ -61,5 +61,5 @@ translation_of: Learn/CSS <dt><a href="/ru/docs/Web/CSS">CSS на MDN</a></dt> <dd>Основная точка входа для CSS документации на MDN с подробными ссылками на дополнительные учебники.</dd> <dt><a href="/ru/docs/Web/CSS/Reference">CSS-справочник</a></dt> - <dd><span id="result_box" lang="ru"><span>Комплексный</span> <span>справочник по</span> <span>всем многочисленным</span> <span>особенностям</span> <span>языка</span> <span>CSS,</span></span> — если Вы, к примеру, хотите знать, какие значения может иметь свойство, то Вам сюда.</dd> + <dd><span id="result_box" lang="ru"><span>Комплексный</span> <span>справочник по</span> <span>всем многочисленным</span> <span>особенностям</span> <span>языка</span> <span>CSS,</span></span> — если Вы, к примеру, хотите знать, какие значения может иметь свойство, то вам сюда.</dd> </dl> 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 710a785e66..5d66f90825 100644 --- a/files/ru/learn/css/styling_text/styling_links/index.html +++ b/files/ru/learn/css/styling_text/styling_links/index.html @@ -79,7 +79,7 @@ translation_of: Learn/CSS/Styling_text/Styling_links </ul> <div class="note"> -<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> +<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> @@ -410,7 +410,7 @@ a:active { </ul> <div class="note"> -<p><strong>Обратите внимание</strong>: Вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что <span class="tlid-translation translation" lang="ru"><span title="">это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на </span></span><a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p> +<p><strong>Обратите внимание</strong>: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что <span class="tlid-translation translation" lang="ru"><span title="">это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на </span></span><a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p> </div> <h2 id="Заключение">Заключение</h2> diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.html index 96b48d3f60..96223649fe 100644 --- a/files/ru/learn/css/styling_text/web_fonts/index.html +++ b/files/ru/learn/css/styling_text/web_fonts/index.html @@ -148,7 +148,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты </ol> <div class="note"> -<p><strong>Обратите внимание</strong>: Вы можете найти законченные версии <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, если вам необходимо сверить вашу работу с нашей (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">см. live</a>).</p> +<p><strong>Обратите внимание</strong>: вы можете найти законченные версии <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, если вам необходимо сверить вашу работу с нашей (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">см. live</a>).</p> </div> <h2 id="font-face_более_детально">@font-face более детально</h2> @@ -176,7 +176,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты </ul> <div class="note"> -<p><strong>Обратите внимание</strong>: Вы также можете указать определённые значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, <span class="tlid-translation translation" lang="ru"><span title="">который является конкретным диапазоном символов</span></span>, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> от Drew McLellan предоставляет некоторые полезные идеи того как это использовать</p> +<p><strong>Обратите внимание</strong>: вы также можете указать определённые значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, <span class="tlid-translation translation" lang="ru"><span title="">который является конкретным диапазоном символов</span></span>, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> от Drew McLellan предоставляет некоторые полезные идеи того как это использовать</p> </div> <h2 id="Переменные_шрифты">Переменные шрифты</h2> |