diff options
Diffstat (limited to 'files/ru/learn/css/css_layout')
6 files changed, 11 insertions, 11 deletions
diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 9fc55d47cf..b48c895084 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -26,7 +26,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Свойство {{cssxref("float")}} вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.</p> -<p>Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p> +<p>Но разработчики быстро осознали, что можно обтекать всё что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p> <p>Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшей техникой</a>.</p> @@ -36,7 +36,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый <code>index.html</code> файл на вашем компьютере, заполнив его <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простым шаблоном HTML</a>, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.</p> -<p>Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:</p> +<p>Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:</p> <pre class="brush: html notranslate"><h1>Simple float example</h1> diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index 931f326250..084dc2f654 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -367,13 +367,13 @@ body { <p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> -<p>Чтобы исправить это, нам все равно нужно включить наши классы <code>span</code>, чтобы обеспечить ширину, которая заменит значение, используемое <code>flex-basis</code> для этого элемента.</p> +<p>Чтобы исправить это, нам всё равно нужно включить наши классы <code>span</code>, чтобы обеспечить ширину, которая заменит значение, используемое <code>flex-basis</code> для этого элемента.</p> <p>Они также не уважают сетку, используемую выше, потому что они ничего не знают об этом.</p> -<p>Flexbox является <strong>одномерным</strong> по дизайну. Он имеет дело с одним измерением - со строкой или столбцом. Мы не можем создать строгую сетку для столбцов и строк, что означает, что если мы будем использовать flexbox для нашей сетки, нам все равно нужно рассчитать проценты, как для плавающего макета.</p> +<p>Flexbox является <strong>одномерным</strong> по дизайну. Он имеет дело с одним измерением - со строкой или столбцом. Мы не можем создать строгую сетку для столбцов и строк, что означает, что если мы будем использовать flexbox для нашей сетки, нам всё равно нужно рассчитать проценты, как для плавающего макета.</p> -<p>В вашем проекте вы все равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все ещё используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.</p> +<p>В вашем проекте вы всё равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все ещё используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.</p> <h2 id="Системы_сторонних_сетей">Системы сторонних сетей</h2> diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index 218e2a5c19..4f48b6d402 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -255,7 +255,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p><strong>Примечание</strong>: Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>.</p> </div> -<p>Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но все равно могут помочь вам в достижении определённых задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.</p> +<p>Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но всё равно могут помочь вам в достижении определённых задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.</p> <h2 id="Floats">Floats</h2> @@ -329,7 +329,7 @@ p { <p>Существует пять типов позиционирования о которых вам следует знать:</p> <ul> - <li><strong>Static positioning (статическое позиционирование)</strong> — умолчание, которое получают все элементы — это все лишь значит "поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть".</li> + <li><strong>Static positioning (статическое позиционирование)</strong> — умолчание, которое получают все элементы — это всё лишь значит "поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть".</li> <li><strong>Relative positioning (относительное позиционирование) </strong>позволяет вам менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке — в том числе заставляя его перекрывать другие элементы на странице.</li> <li><strong>Absolute positioning (абсолютное позиционирование) </strong>полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краёв <code><html></code> элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, <span class="tlid-translation translation" lang="ru"><span title=""> в которых различные панели содержимого располагаются друг над другом</span></span> и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.</li> <li><strong>Fixed positioning (фиксированное позиционирование) </strong>очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.</li> @@ -575,7 +575,7 @@ p { <p>Пример ниже показывает одно такое использование; использование CSS таблиц для вёрстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.</p> -<p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей верстки.</p> +<p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей вёрстки.</p> <pre class="brush: html notranslate"><form> <p>First of all, tell us your name and age.</p> diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index da8a00b79d..e99182f446 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -552,7 +552,7 @@ dt { <h2 id="Заключение">Заключение</h2> -<p>Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, все же как вы видите, существует много задач, подходящих для него.</p> +<p>Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, всё же как вы видите, существует много задач, подходящих для него.</p> <p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html index 0e526bfc31..7d7b2eaa85 100644 --- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html +++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.html @@ -116,7 +116,7 @@ body { <p><strong>Заметка</strong>: Мы используем селектор-потомки с полем <code>.info-box</code> в начале цепочки в этом примере - это значит, что мы можем вставить эту функцию на страницу с другим содержимым, уже на ней, не опасаясь вмешиваться в стили, применяемые к другим частям страницы.</p> </div> -<p>Затем мы нарисуем горизонтальные вкладки - все элементы списка будут перемещены влево, чтобы заставить их сидеть в одной строке вместе, их {{cssxref ("list-style-type")}} имеет значение <code>none</code>, чтобы избавиться от пули и их {{cssxref ("width")}} установлены на <code>150px</code>, чтобы они удобно располагались в информационном окне. Элементы {{htmlelement ("a")}} имеют {{cssxref ("display")}} встроенный блок, поэтому они будут сидеть в строке, но все же быть стильными и соответствующим образом оформлены для кнопок вкладок, используя множество других свойств.</p> +<p>Затем мы нарисуем горизонтальные вкладки - все элементы списка будут перемещены влево, чтобы заставить их сидеть в одной строке вместе, их {{cssxref ("list-style-type")}} имеет значение <code>none</code>, чтобы избавиться от пули и их {{cssxref ("width")}} установлены на <code>150px</code>, чтобы они удобно располагались в информационном окне. Элементы {{htmlelement ("a")}} имеют {{cssxref ("display")}} встроенный блок, поэтому они будут сидеть в строке, но всё же быть стильными и соответствующим образом оформлены для кнопок вкладок, используя множество других свойств.</p> <p>Добавьте следующий CSS:</p> 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 6178dfa90b..8552c0c8ee 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -192,7 +192,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <h2 id="Отзывчивые_изображения">Отзывчивые изображения</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берете изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Самый простой подход к отзывчивым изображениям был описан</span></span> в ранних статьях Маркотта по отзывчивому дизайну. <span class="tlid-translation translation" lang="ru"><span title="">По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его.</span></span> Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:</p> <pre class="brush: css notranslate"><code>img { max-width: 100%; |