aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-14 12:18:12 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-14 12:18:12 -0500
commit869dd2069c695ee7040cd3261713212155819f42 (patch)
tree320a95de75a89686a9df006b90d923aa7fa0d551 /files/ru/web/css
parenta5fcfafb665e96cae5d04dfba927db8dcdfd7f14 (diff)
downloadtranslated-content-869dd2069c695ee7040cd3261713212155819f42.tar.gz
translated-content-869dd2069c695ee7040cd3261713212155819f42.tar.bz2
translated-content-869dd2069c695ee7040cd3261713212155819f42.zip
final dump 2020-12-14
Diffstat (limited to 'files/ru/web/css')
-rw-r--r--files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html70
-rw-r--r--files/ru/web/css/vertical-align/index.html18
2 files changed, 44 insertions, 44 deletions
diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index 1278783254..e49f1183b8 100644
--- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<div id="onedtwod">
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -40,7 +40,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div&gt;One&lt;/div&gt;
&lt;div&gt;Two&lt;/div&gt;
&lt;div&gt;Three&lt;/div&gt;
@@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: flex;
flex-wrap: wrap;
}
@@ -65,13 +65,13 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<p>Общий вопрос заключается в том, как заставить наши перебежавшие элементы выравняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.</p>
-<h3 id="Те_же_яйца_вид_в_профиль_тот_же_макет_но_с_CSS_гридами">Те же яйца, вид в профиль: тот же макет, но с CSS гридами</h3>
+<h3 id="Тот_же_макет_но_с_CSS_гридами">Тот же макет, но с CSS гридами</h3>
-<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как Вы видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p>
+<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p>
<div class="Two_Dimensional_With_Grid">
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -89,7 +89,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div&gt;One&lt;/div&gt;
&lt;div&gt;Two&lt;/div&gt;
&lt;div&gt;Three&lt;/div&gt;
@@ -98,7 +98,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@@ -107,11 +107,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<p>{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}</p>
</div>
-<p>Если Вы колеблетесь, что выбрать - flexbox или грид, задайте себе простой вопрос:</p>
+<p>Если Вы колеблетесь, что выбрать - flexbox или grid, задайте себе простой вопрос:</p>
<ul>
- <li>мне нужно управлять размещением элементов в строке <u>или </u>в колонке - окей, нужен flexbox</li>
- <li>мне нужно управлять размещением элементов <u>и </u>в строке, <u>и </u>в колонке – окей, нужен грид</li>
+ <li>нужно управлять размещением элементов в строке <em><u>или</u></em> в колонке - используем flexbox</li>
+ <li>нужно управлять размещением элементов в строке <em><u>и</u></em> в колонке – используем grid</li>
</ul>
<h3 id="Что_важнее_контент_или_макет">Что важнее: контент или макет?</h3>
@@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обертки wrapper установлено свойство {{cssxref("min-height")}}, и оно задает высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code>  таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p>
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -151,14 +151,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div class="box1"&gt;One&lt;/div&gt;
&lt;div class="box2"&gt;Two&lt;/div&gt;
&lt;div class="box3"&gt;Three&lt;/div&gt;
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: flex;
align-items: flex-end;
min-height: 200px;
@@ -178,7 +178,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаем <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p>
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -196,14 +196,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div class="box1"&gt;One&lt;/div&gt;
&lt;div class="box2"&gt;Two&lt;/div&gt;
&lt;div class="box3"&gt;Three&lt;/div&gt;
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
align-items: end;
@@ -233,7 +233,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаем структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p>
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -251,14 +251,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div&gt;One&lt;/div&gt;
&lt;div&gt;Two&lt;/div&gt;
&lt;div&gt;Three&lt;/div&gt;
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}
@@ -271,7 +271,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаем автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p>
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -289,14 +289,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div&gt;One&lt;/div&gt;
&lt;div&gt;Two&lt;/div&gt;
&lt;div&gt;Three&lt;/div&gt;
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
@@ -317,7 +317,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<p>В примере ниже у нас есть блок-обертка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещен в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p>
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -335,7 +335,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div class="box1"&gt;One&lt;/div&gt;
&lt;div class="box2"&gt;Two&lt;/div&gt;
&lt;div class="box3"&gt;
@@ -346,7 +346,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 200px;
@@ -385,7 +385,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<p>Задаем <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига.  В данном случае контекстом позиционирования является грид-область.</p>
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -403,7 +403,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div class="box1"&gt;One&lt;/div&gt;
&lt;div class="box2"&gt;Two&lt;/div&gt;
&lt;div class="box3"&gt;Three
@@ -415,7 +415,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-auto-rows: 200px;
@@ -453,7 +453,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<div id="Display_Contents_Before">
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -477,7 +477,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div class="box box1"&gt;
&lt;div class="nested"&gt;a&lt;/div&gt;
&lt;div class="nested"&gt;b&lt;/div&gt;
@@ -490,7 +490,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
@@ -509,7 +509,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
<div id="Display_Contents_After">
<div class="hidden">
-<pre class="brush: css">* {box-sizing: border-box;}
+<pre class="brush: css notranslate">* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
@@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
</pre>
</div>
-<pre class="brush: html">&lt;div class="wrapper"&gt;
+<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
&lt;div class="box box1"&gt;
&lt;div class="nested"&gt;a&lt;/div&gt;
&lt;div class="nested"&gt;b&lt;/div&gt;
@@ -546,7 +546,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
&lt;/div&gt;
</pre>
-<pre class="brush: css">.wrapper {
+<pre class="brush: css notranslate">.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html
index c7e311b39a..45662b41ce 100644
--- a/files/ru/web/css/vertical-align/index.html
+++ b/files/ru/web/css/vertical-align/index.html
@@ -5,9 +5,9 @@ translation_of: Web/CSS/vertical-align
---
<div>{{CSSRef}}</div>
-<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>  <code>vertical-align</code> описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).</p>
+<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a>  <code>vertical-align</code> описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).</p>
-<pre class="brush: css no-line-numbers">/* ключевые значения */
+<pre class="brush: css no-line-numbers notranslate">/* ключевые значения */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
@@ -37,7 +37,7 @@ vertical-align: unset;
</ul>
<div id="vertical-align-inline">
-<pre class="hidden brush: html">&lt;p&gt;
+<pre class="hidden brush: html notranslate">&lt;p&gt;
top:&lt;img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
middle:&lt;img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
bottom:&lt;img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/&gt;
@@ -55,7 +55,7 @@ text-bottom:&lt;img style="vertical-align:text-bottom" src="https://mdn.mozilla
</pre>
-<pre class="hidden brush: css">#* {
+<pre class="hidden brush: css notranslate">#* {
box-sizing: border-box;
}
@@ -82,7 +82,7 @@ p {
</ul>
<div id="vertical-align-table">
-<pre class="hidden brush: html">&lt;table&gt;
+<pre class="hidden brush: html notranslate">&lt;table&gt;
&lt;tr&gt;
&lt;td style="vertical-align: baseline"&gt;baseline&lt;/td&gt;
&lt;td style="vertical-align: top"&gt;top&lt;/td&gt;
@@ -92,7 +92,7 @@ p {
&lt;p&gt;Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо нее появится нечто еще более причудливое и необъяснимое.&lt;/p&gt;
&lt;p&gt;Существует и другая теория, согласно которой это уже случилось.&lt;/p&gt;</pre>
-<pre class="hidden brush: css">table {
+<pre class="hidden brush: css notranslate">table {
margin-left: auto;
margin-right: auto;
width: 80%;
@@ -176,13 +176,13 @@ td {
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
-<pre class="syntaxbox">{{csssyntax}}</pre>
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Пример">Пример</h2>
<h3 id="HTML">HTML</h3>
-<pre class="brush: html">&lt;div&gt;Изображение &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по умолчанию.&lt;/div&gt;
+<pre class="brush: html notranslate">&lt;div&gt;Изображение &lt;img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по умолчанию.&lt;/div&gt;
&lt;div&gt;Изображение &lt;img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по верхнему краю.&lt;/div&gt;
&lt;div&gt;Изображение &lt;img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по нижнему краю.&lt;/div&gt;
&lt;div&gt;Изображение &lt;img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /&gt; с выравниванием по центру.&lt;/div&gt;
@@ -190,7 +190,7 @@ td {
<h3 id="CSS">CSS</h3>
-<pre class="brush: css">img.top { vertical-align: text-top; }
+<pre class="brush: css notranslate">img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }
</pre>