diff options
Diffstat (limited to 'files/ru/learn/css/css_layout')
8 files changed, 179 insertions, 179 deletions
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index 101646aea2..b675a1ec01 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -52,7 +52,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение {{cssxref ("display")}} в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы {{htmlelement ("article")}}, поэтому мы устанавливаем это значение на {{htmlelement ("section")}} (который становится flex контейнером):</p> -<pre class="brush: css notranslate">section { +<pre class="brush: css">section { display: flex; }</pre> @@ -85,7 +85,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Попробуйте добавить следующую строчку в ваш файл:</p> -<pre class="brush: css notranslate">flex-direction: column</pre> +<pre class="brush: css">flex-direction: column</pre> <p>Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.</p> @@ -101,7 +101,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:</p> -<pre class="brush: css notranslate">flex-wrap: wrap</pre> +<pre class="brush: css">flex-wrap: wrap</pre> <p>Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:</p> @@ -115,12 +115,12 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>На этом этапе нужно заметить, что существует сокращение для свойств {{cssxref("flex-direction")}} и {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Например, вы можете заменить</p> -<pre class="brush: css notranslate">flex-direction: row; +<pre class="brush: css">flex-direction: row; flex-wrap: wrap;</pre> <p>на</p> -<pre class="brush: css notranslate">flex-flow: row wrap;</pre> +<pre class="brush: css">flex-flow: row wrap;</pre> <h2 id="Гибкое_изменение_размеров_flex_элементов">Гибкое изменение размеров flex элементов</h2> @@ -128,7 +128,7 @@ flex-wrap: wrap;</pre> <p>Прежде всего, добавим следующее правило в конец вашего CSS кода:</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { flex: 1; }</pre> @@ -136,7 +136,7 @@ flex-wrap: wrap;</pre> <p>Теперь добавьте следующее правило в строку после предыдущего:</p> -<pre class="brush: css notranslate">article:nth-of-type(3) { +<pre class="brush: css">article:nth-of-type(3) { flex: 2; }</pre> @@ -144,7 +144,7 @@ flex-wrap: wrap;</pre> <p>Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { flex: 1 200px; } @@ -180,7 +180,7 @@ article:nth-of-type(3) { <p>Теперь добавьте следующую строку в низ кода CSS:</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { display: flex; align-items: center; justify-content: space-around; @@ -198,7 +198,7 @@ article:nth-of-type(3) { <p>Вы можете переопределить {{cssxref("align-items")}} поведение для отдельных flex элементов, применив свойство {{cssxref("align-self")}} к ним. Например, попробуйте добавить эти строки в код:</p> -<pre class="brush: css notranslate">button:first-child { +<pre class="brush: css">button:first-child { align-self: flex-end; }</pre> @@ -222,7 +222,7 @@ article:nth-of-type(3) { <p>Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:</p> -<pre class="brush: css notranslate">button:first-child { +<pre class="brush: css">button:first-child { order: 1; }</pre> @@ -237,7 +237,7 @@ article:nth-of-type(3) { <p>Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:</p> -<pre class="brush: css notranslate">button:last-child { +<pre class="brush: css">button:last-child { order: -1; }</pre> @@ -249,7 +249,7 @@ article:nth-of-type(3) { <p>HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.</p> -<pre class="notranslate">section - article +<pre>section - article article article - div - button div button @@ -261,13 +261,13 @@ article:nth-of-type(3) { <p>Прежде всего, мы устанавливаем дочерние элементы {{htmlelement ("section")}} в виде flex блоков.</p> -<pre class="brush: css notranslate">section { +<pre class="brush: css">section { display: flex; }</pre> <p>Затем мы устанавливаем несколько значений на самих {{htmlelement ("article")}}. Обратите внимание на второе правило: мы устанавливаем третий {{htmlelement ("article")}}, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.</p> -<pre class="brush: css notranslate">article { +<pre class="brush: css">article { flex: 1 200px; } @@ -280,7 +280,7 @@ article:nth-of-type(3) { <p>Затем мы берём первый {{htmlelement ("div")}}. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы {{htmlelement ("button")}}) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.</p> -<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { +<pre class="brush: css">article:nth-of-type(3) div:first-child { flex: 1 100px; display: flex; flex-flow: row wrap; @@ -290,7 +290,7 @@ article:nth-of-type(3) { <p>Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p> -<pre class="brush: css notranslate">button { +<pre class="brush: css">button { flex: 1; margin: 5px; font-size: 18px; diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 195ffe4374..3106fe50a2 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -38,7 +38,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:</p> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -50,7 +50,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>А теперь примените следующий CSS для вашего HTML (используя элемент {{htmlelement("style")}} или {{htmlelement("link")}} на отдельный файл <code>.css</code> — на ваше усмотрение):</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -67,7 +67,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Если вы сохраните и обновите сейчас, то <span class="tlid-translation translation" lang="ru"><span title="">вы увидите нечто похожее на то, чего ожидаете </span></span>— блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу <code>.box</code>:</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { float: left; margin-right: 15px; width: 150px; @@ -83,7 +83,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_1">Float Example 1</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -94,7 +94,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -124,7 +124,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Добавьте класс <code>special</code> к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -137,7 +137,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_2">Float Example 2</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -147,7 +147,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -183,7 +183,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Добавьте класс <code>cleared</code> ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:</p> -<pre class="brush: css notranslate">.cleared { +<pre class="brush: css">.cleared { clear: left; } </pre> @@ -192,7 +192,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_3">Float Example 3</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -203,7 +203,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -247,7 +247,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box">Float</div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> @@ -256,7 +256,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>В вашем CSS добавьте следующее правило для класса <code>.wrapper</code> и обновите страницу:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -264,7 +264,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>В добавок удалите класс <code>.cleared</code>:</p> -<pre class="brush: css notranslate" id="ct-0">.cleared { +<pre class="brush: css" id="ct-0">.cleared { clear: left; }</pre> @@ -274,7 +274,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_4">Float Example 4</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -285,7 +285,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -321,7 +321,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Добавьте следующий CSS в наш пример:</p> -<pre class="brush: css notranslate">.wrapper::after { +<pre class="brush: css">.wrapper::after { content: ""; clear: both; display: block; @@ -333,7 +333,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_5">Float Example 5</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -343,7 +343,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -383,7 +383,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обёртки. Блок снова должен быть очищен.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -394,7 +394,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_6">Float Example 6</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -404,7 +404,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -439,7 +439,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Современный способ решения этой проблемы — это использование значения <code>flow-root</code> свойства <code>display</code>. Он существует только для создания BFC без использования хака — не будет возникать <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренных </span></span>последствий, когда вы используете его. Удалите <code>overflow: auto</code> из вашего правила <code>.wrapper</code> и добавьте <code>display: flow-root</code>. <span class="tlid-translation translation" lang="ru"><span title="">Если предположить,</span></span> что у вас <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">поддерживающий браузер</a>, блок будет очищаться.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; @@ -450,7 +450,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <div class="hidden"> <h6 id="Float_Example_7">Float Example 7</h6> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="wrapper"> <div class="box">Float</div> @@ -460,7 +460,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.html index cfdfcd3c83..89129aff25 100644 --- a/files/ru/learn/css/css_layout/grids/index.html +++ b/files/ru/learn/css/css_layout/grids/index.html @@ -60,7 +60,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>Начните с создания локальной копии нашего образца <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> файла, который содержит следующую разметку в своём теле.</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> @@ -89,7 +89,7 @@ translation_of: Learn/CSS/CSS_layout/Grids <p>В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> для большего объяснения).</p> -<pre class="brush: css notranslate">* { +<pre class="brush: css">* { box-sizing: border-box; } @@ -105,7 +105,7 @@ body { <p>Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:</p> -<pre class="brush: css notranslate">.row { +<pre class="brush: css">.row { clear: both; }</pre> @@ -115,7 +115,7 @@ body { <p>Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса <code>.col</code>, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:</p> -<pre class="brush: css notranslate">.col { +<pre class="brush: css">.col { float: left; margin-left: 20px; width: 60px; @@ -132,7 +132,7 @@ body { <p>Добавьте нижеследующую часть вашего CSS:</p> -<pre class="brush: css notranslate">/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */ +<pre class="brush: css">/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */ .col.span2 { width: 140px; } / * Три ширины столбца (180 пикселей) плюс две ширины желоба (40 пикселей) * / .col.span3 { width: 220px; } @@ -155,7 +155,7 @@ body { <p>Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:</p> -<pre class="brush: css notranslate"><div class="row"> +<pre class="brush: css"><div class="row"> <div class="col span8">13</div> <div class="col span4">14</div> </div></pre> @@ -168,17 +168,17 @@ body { <p>Уравнение, которое превращает фиксированную ширину в гибкую, основанную на процентах, выглядит следующим образом.</p> -<pre class="notranslate">target / context = result</pre> +<pre>target / context = result</pre> <p>Для нашей ширины столбца наша <strong>целевая ширина</strong> составляет 60 пикселей, а наш <strong>контекст</strong> 960 пикселей. Для расчёта процента мы можем использовать следующее.</p> -<pre class="notranslate">60 / 960 = 0.0625</pre> +<pre>60 / 960 = 0.0625</pre> <p>Затем мы перемещаем десятичные точки на 2 места, давая нам процент от 6,25%. Таким образом, в нашем CSS мы можем заменить ширину столбца 60 пикселей на 6,25%.</p> <p>Мы должны сделать то же самое с нашей шириной желоба:</p> -<pre class="notranslate">20 / 960 = 0.02083333333</pre> +<pre>20 / 960 = 0.02083333333</pre> <p>Поэтому нам нужно заменить 20 пикселей {{cssxref ("margin-left")}} на наше правило <code>.col</code> 20 пикселей {{cssxref ("padding-right")}} на <code>.wrapper </code>с 2.08333333%.</p> @@ -188,7 +188,7 @@ body { <p>Обновите второе правило CSS (с помощью селектора <code>.wrapper</code>) следующим образом:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 980px; margin: 0 auto; @@ -202,7 +202,7 @@ body { <p>Затем обновите четвёртое правило CSS (с селектором <code>.col</code>) следующим образом:</p> -<pre class="brush: css notranslate">.col { +<pre class="brush: css">.col { float: left; margin-left: 2.08333333%; width: 6.25%; @@ -213,7 +213,7 @@ body { <p>Обновите нижний блок правил CSS следующим образом:</p> -<pre class="brush: css notranslate">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +<pre class="brush: css">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ .col.span2 { width: 14.58333333%; } /* Three column widths (18.75%) plus two gutter widths (4.1666666) */ .col.span3 { width: 22.91666666%; } @@ -240,13 +240,13 @@ body { <p>В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция <code>calc () </code>позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:</p> -<pre class="brush: css notranslate">.col.span4 { +<pre class="brush: css">.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }</pre> <p>Попробуйте заменить нижний блок правил следующим, а затем перезагрузите его в браузере, чтобы узнать, получаете ли вы тот же результат:</p> -<pre class="brush: css notranslate">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } @@ -272,7 +272,7 @@ body { <p>Это не единственный подход. Вместо этого вы можете выбрать свою сетку, а затем добавить информацию о размерах в правила для существующих семантических классов. Например, если у вас есть {{htmlelement ("div")}} с классом <code>content</code> в нем, который вы хотите разбить на 8 столбцов, вы можете скопировать по ширине из класса <code>span8</code>, предоставив вам следующее правило:</p> -<pre class="brush: css notranslate">.content { +<pre class="brush: css">.content { width: calc((6.25%*8) + (2.08333333%*7)); }</pre> @@ -290,23 +290,23 @@ body { <p>Давайте создадим класс в нашем CSS, который будет смещать элемент контейнера на одну ширину столбца. Добавьте нижеследующую часть вашего CSS:</p> -<pre class="brush: css notranslate">.offset-by-one { +<pre class="brush: css">.offset-by-one { margin-left: calc(6.25% + (2.08333333%*2)); }</pre> <p>Или если вы предпочитаете самостоятельно рассчитать проценты, используйте это:</p> -<pre class="brush: css notranslate">.offset-by-one { +<pre class="brush: css">.offset-by-one { margin-left: 10.41666666%; }</pre> <p>Теперь вы можете добавить этот класс в любой контейнер, в котором вы хотите оставить пустое пространство с одним столбцом в левой части окна. Например, если у вас есть это в вашем HTML:</p> -<pre class="brush: html notranslate"><div class="col span6">14</div></pre> +<pre class="brush: html"><div class="col span6">14</div></pre> <p>Попробуйте заменить его на</p> -<pre class="brush: html notranslate"><div class="col span5 offset-by-one">14</div></pre> +<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> <div class="note"> <p><strong>Примечание</strong>: Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения!</p> @@ -334,7 +334,7 @@ body { <p>Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (<code>wrapper</code>), <code>row</code> и <code>col</code> классов:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 980px; margin: 0 auto; @@ -387,7 +387,7 @@ body { <p>Включите скелет и нормализуйте CSS на странице HTML, добавив следующее в голову:</p> -<pre class="brush: html notranslate"><link href="normalize.css" rel="stylesheet"> +<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> <link href="skeleton.css" rel="stylesheet"></pre> <p>Скелет включает в себя больше, чем сетку - он также содержит CSS для типографики и других элементов страницы, которые вы можете использовать в качестве отправной точки. На данный момент мы оставим их по умолчанию, но именно эта сетка нас действительно интересует.</p> @@ -398,7 +398,7 @@ body { <p>Мы будем использовать аналогичный HTML для нашего предыдущего примера. Добавьте в свой HTML-код следующее:</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="row"> <div class="col">1</div> <div class="col">2</div> @@ -426,7 +426,7 @@ body { <p>Вы можете посмотреть в файле skeleton.css, чтобы увидеть CSS, который используется, когда мы применяем этот класс. <code><div></code> центрируется с использованием <code>auto</code> левого и правого полей, а отступы в 20 пикселей применяются слева и справа. Скелет также устанавливает свойство {{cssxref ("box-sizing")}} в <code>border-box</code>, как мы делали это раньше, поэтому дополнение и границы этого элемента будут включены в общую ширину.</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { position: relative; width: 100%; max-width: 960px; @@ -441,7 +441,7 @@ body { <p>Добавьте их сейчас, как показано в следующем фрагменте:</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="row"> <div class="one column">1</div> <div class="one column">2</div> @@ -452,7 +452,7 @@ body { <p>Затем дайте контейнеры во втором классе классов, объясняющие количество столбцов, которые они должны охватывать, например:</p> -<pre class="brush: html notranslate"><div class="row"> +<pre class="brush: html"><div class="row"> <div class="one column">13</div> <div class="six columns">14</div> <div class="three columns">15</div> @@ -467,7 +467,7 @@ body { <p>Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».</p> -<pre class="brush: css notranslate">.three.columns { width: 22%; }</pre> +<pre class="brush: css">.three.columns { width: 22%; }</pre> <p>Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.</p> @@ -491,7 +491,7 @@ body { <p>Сначала начните с создания локальной копии файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid.html">css-grid.html</a>. Он содержит следующую разметку:</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> @@ -514,7 +514,7 @@ body { <p>Теперь добавьте следующее в элемент {{htmlelement ("style")}}:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { width: 90%; max-width: 960px; margin: 0 auto; @@ -539,13 +539,13 @@ body { <p>Чтобы создать контейнеры, которые охватывают несколько треков столбцов в сетке, мы можем использовать свойство {{cssxref ("grid-column")}}. Чтобы охватить 6 столбцов, например:</p> -<pre class="brush: css notranslate">.span6 { +<pre class="brush: css">.span6 { grid-column: auto / span 6; }</pre> <p>И для span 3:</p> -<pre class="brush: css notranslate">.span3 { +<pre class="brush: css">.span3 { grid-column: auto / span 3; }</pre> @@ -553,7 +553,7 @@ body { <p>Добавьте нижеследующую часть вашего CSS:</p> -<pre class="brush: css notranslate">.span2 { grid-column: auto / span 2;} +<pre class="brush: css">.span2 { grid-column: auto / span 2;} .span3 { grid-column: auto / span 3;} .span4 { grid-column: auto / span 4;} .span5 { grid-column: auto / span 5;} @@ -571,7 +571,7 @@ body { <p>Вы можете проверить это, заменив последние 4 col <code><div></code> s следующим:</p> -<pre class="brush: css notranslate"><div class="col">13some<br>content</div> +<pre class="brush: css"><div class="col">13some<br>content</div> <div class="col span6">14this<br>is<br>more<br>content</div> <div class="col span3">15this<br>is<br>less</div> <div class="col span2">16</div></pre> @@ -590,17 +590,17 @@ body { <p>С сетками CSS нам не нужно толкать вещи вдоль полей, чтобы их компенсировать. Попробуйте внести эти изменения в свой CSS:</p> -<pre class="brush: css notranslate">.content { +<pre class="brush: css">.content { grid-column: 2 / 8; }</pre> -<pre class="brush: html notranslate"><div class="col span2 content">16</div></pre> +<pre class="brush: html"><div class="col span2 content">16</div></pre> <p>Контейнер 16 теперь будет охватывать столбцы с 2 по 8, в следующей доступной строке, где он может поместиться.</p> <p>Мы можем так же легко группировать строки так же, как и столбцы:</p> -<pre class="brush: css notranslate">.content { +<pre class="brush: css">.content { grid-column: 2 / 8; grid-row: 3 / 5; }</pre> diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.html index e8da5eafd9..2fbf873cce 100644 --- a/files/ru/learn/css/css_layout/introduction/index.html +++ b/files/ru/learn/css/css_layout/introduction/index.html @@ -41,7 +41,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <p>Нормальный поток (Normal flow) это то как ваш браузер отображает по умолчанию, когда вы не меняли расположение элементов на странице. Взглянем на пример:</p> -<pre class="brush: html notranslate"><p>I love my cat.</p> +<pre class="brush: html"><p>I love my cat.</p> <ul> <li>Buy cat food</li> @@ -95,7 +95,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Flexbox_Example_1">Flexbox Example 1</h6> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -105,12 +105,12 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -128,7 +128,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Flexbox_Example_2">Flexbox Example 2</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -138,7 +138,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; } @@ -147,7 +147,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -171,7 +171,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Grid_example_1">Grid example 1</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -181,7 +181,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -189,7 +189,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -208,7 +208,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Grid_example_2">Grid example 2</h6> -<pre class="brush: css notranslate"> * {box-sizing: border-box;} +<pre class="brush: css"> * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; @@ -218,7 +218,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -241,7 +241,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -276,7 +276,7 @@ translation_of: Learn/CSS/CSS_layout/Introduction <div class="hidden"> <h6 id="Floats_example">Floats example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 0 auto; @@ -296,7 +296,7 @@ p { </pre> </div> -<pre class="brush: html notranslate"><h1>Simple float example</h1> +<pre class="brush: html"><h1>Simple float example</h1> <div class="box">Float</div> @@ -304,7 +304,7 @@ p { </pre> -<pre class="brush: css notranslate"> +<pre class="brush: css"> .box { float: left; width: 150px; @@ -340,7 +340,7 @@ p { <p>Для ознакомления с этими методами вёрстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p> -<pre class="brush: html notranslate"><h1>Positioning</h1> +<pre class="brush: html"><h1>Positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">I am a basic block level element.</p> @@ -348,7 +348,7 @@ p { <p>Этот HTML по умолчанию будет стилизован, используя следующий CSS:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -370,7 +370,7 @@ p { <p>Относительное (Relative) позиционирование позволяет вам смещать элемент относительно положения, которое он бы имел по умолчанию в нормальном потоке. Это значит, что вы можете выполнить такую задачу как перемещение иконки немного вниз, так чтобы он был на одной линии с текстовой меткой. Чтобы сделать это, мы можем добавить следующее правило для добавления относительного позиционирования.</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: relative; top: 30px; left: 30px; @@ -384,13 +384,13 @@ p { <div class="hidden"> <h6 id="Relative_positioning_example">Relative positioning example</h6> -<pre class="brush: html notranslate"><h1>Relative positioning</h1> +<pre class="brush: html"><h1>Relative positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my relatively positioned element.</p> <p>I am a basic block level element.</p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -405,7 +405,7 @@ p { </pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: relative; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); @@ -422,7 +422,7 @@ p { <p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS-правило, чтобы реализовать абсолютное позиционирование:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: absolute; top: 30px; left: 30px; @@ -434,13 +434,13 @@ p { <div class="hidden"> <h6 id="Absolute_positioning_example">Absolute positioning example</h6> -<pre class="brush: html notranslate"><h1>Absolute positioning</h1> +<pre class="brush: html"><h1>Absolute positioning</h1> <p>I am a basic block level element.</p> <p class="positioned">This is my absolutely positioned element.</p> <p>I am a basic block level element.</p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -455,7 +455,7 @@ p { </pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: absolute; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); @@ -474,7 +474,7 @@ p { <p>Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим <code>position: fixed</code>.</p> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html"><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> @@ -487,7 +487,7 @@ p { <div class="hidden"> <h6 id="Fixed_positioning_example">Fixed positioning example</h6> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html"><h1>Fixed positioning</h1> <div class="positioned">Fixed</div> @@ -499,7 +499,7 @@ p { </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -513,7 +513,7 @@ p { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: fixed; top: 30px; left: 30px; @@ -530,7 +530,7 @@ p { <div class="hidden"> <h6 id="Sticky_positioning_example">Sticky positioning example</h6> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html"><h1>Sticky positioning</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -540,7 +540,7 @@ p { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } @@ -554,7 +554,7 @@ p { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css">.positioned { position: sticky; top: 30px; left: 30px; @@ -577,7 +577,7 @@ p { <p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей вёрстки.</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>First of all, tell us your name and age.</p> <div> <label for="fname">First name:</label> @@ -597,7 +597,7 @@ p { <p>Вы заметите, что параграфу с описанием дано <code>display: table-caption;</code> — что заставляет его вести себя как табличный {{htmlelement("caption")}} — а <code>caption-side: bottom;</code> для того чтобы указать описанию располагаться снизу таблицы в целях дизайна, не смотря на то что разметка находится до <code><input></code> элементов в источнике. Это обеспечивает гибкостью.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -647,7 +647,7 @@ form p { <p>В примере ниже мы начинаем с HTML блоком, который содержится в элементе <code><div></code> с классом <code>container</code>.</p> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Multi-column layout</h1> <p>Paragraph 1.</p> @@ -662,7 +662,7 @@ form p { <div class="hidden"> <h6 id="Multicol_example">Multicol example</h6> -<pre class="brush: html notranslate"> <div class="container"> +<pre class="brush: html"> <div class="container"> <h1>Multi-column Layout</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -673,10 +673,10 @@ form p { </div> </pre> -<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> </div> -<pre class="brush: css notranslate"> .container { +<pre class="brush: css"> .container { column-width: 200px; }</pre> </div> diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.html b/files/ru/learn/css/css_layout/multiple-column_layout/index.html index 14b11aadda..0d798584af 100644 --- a/files/ru/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.html @@ -35,7 +35,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству <code>column-count</code> столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-count: 3; } </pre> @@ -46,7 +46,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="column-count_example">column-count example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -55,7 +55,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто </pre> </div> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -71,7 +71,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто </div> </pre> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-count: 3; } </pre> @@ -81,7 +81,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>Измените ваш CSS чтобы использовать следующий <code>column-width</code>:</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 200px; } </pre> @@ -92,14 +92,14 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="column-width_example">column-width example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; }</pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -115,7 +115,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто </div></pre> </div> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 200px; } </pre> @@ -134,14 +134,14 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <p>Используя ваш пример выше, измените размер отступа добавлением свойства <code>column-gap</code>:</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 200px; column-gap: 20px; }</pre> <p>Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи <code>column-rule</code>. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, <code>column-rule</code> — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и <code>border</code>.</p> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); @@ -153,7 +153,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="Styling_the_columns">Styling the columns</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -165,7 +165,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто column-rule: 4px dotted rgb(79, 185, 227); }</pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -198,7 +198,7 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто <div class="hidden"> <h6 id="Spanning_the_columns">Spanning the columns</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -217,7 +217,7 @@ h2 { } </pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <h1>Simple multicol example</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. @@ -248,7 +248,7 @@ h2 { <div class="hidden"> <h6 id="Cards_example">Cards example</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; @@ -256,7 +256,7 @@ h2 { } </pre> </div> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="card"> <h2>I am the heading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -315,7 +315,7 @@ h2 { </div> </pre> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 250px; column-gap: 20px; } @@ -334,7 +334,7 @@ h2 { <p>В настоящее время также стоит добавлять старое свойство <code>page-break-inside: avoid</code> для лучшей поддержки старых браузеров.</p> -<pre class="brush: css notranslate">.card { +<pre class="brush: css">.card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); @@ -350,14 +350,14 @@ h2 { <div class="hidden"> <h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } </pre> -<pre class="brush: html notranslate"><div class="container"> +<pre class="brush: html"><div class="container"> <div class="card"> <h2>I am the heading</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat @@ -417,7 +417,7 @@ h2 { </pre> </div> -<pre class="brush: css notranslate">.container { +<pre class="brush: css">.container { column-width: 250px; column-gap: 20px; } diff --git a/files/ru/learn/css/css_layout/normal_flow/index.html b/files/ru/learn/css/css_layout/normal_flow/index.html index 40f9cdc675..dab4f83142 100644 --- a/files/ru/learn/css/css_layout/normal_flow/index.html +++ b/files/ru/learn/css/css_layout/normal_flow/index.html @@ -45,7 +45,7 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток <p>Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:</p> <div id="Normal_Flow"> -<pre class="brush: html notranslate"><h1>Базовый поток документа</h1> +<pre class="brush: html"><h1>Базовый поток документа</h1> <p>Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.</p> @@ -55,7 +55,7 @@ original_slug: Learn/CSS/CSS_layout/Нормальный_поток <p>Строчные элементы <span>такие как этот</span> и <span>этот</span> находятся на одной линии с другими, и смежным текстом, если есть пространство. Строчные элементы, что не влезают <span>переходят на новую строку если это возможно (как этот текст)</span>если же это невозможно, они переходят на новую строку, как это изображение: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { width: 500px; margin: 0 auto; } diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index 565bd6577a..e30c51cee9 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -38,11 +38,11 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте <code>class</code> <code>positioned</code> ко второму {{htmlelement("p")}} в HTML:</p> -<pre class="brush: html notranslate"><p class="positioned"> ... </p></pre> +<pre class="brush: html "><p class="positioned"> ... </p></pre> <p>А теперь добавьте следующее правило в конец вашего CSS:</p> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css ">.positioned { position: static; background: yellow; }</pre> @@ -57,7 +57,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p> -<pre class="brush: css notranslate">position: relative;</pre> +<pre class="brush: css ">position: relative;</pre> <p>Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} которые мы объясним в следующем разделе.</p> @@ -65,7 +65,7 @@ translation_of: Learn/CSS/CSS_layout/Positioning <p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} используются вместе с {{cssxref("position")}} чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу <code>.positioned</code> в вашем CSS:</p> -<pre class="brush: css notranslate">top: 30px; +<pre class="brush: css ">top: 30px; left: 30px;</pre> <div class="note"> @@ -75,7 +75,7 @@ left: 30px;</pre> <p>Если вы сейчас сохраните и обновите, вы получите примерно такой результат:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Relative positioning</h1> +<pre class="brush: html "><h1>Relative positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -85,7 +85,7 @@ left: 30px;</pre> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; } @@ -122,12 +122,12 @@ span { <p>Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p> -<pre class="brush: css notranslate">position: absolute;</pre> +<pre class="brush: css ">position: absolute;</pre> <p>Если вы сохраните и обновите, то вы должны увидеть нечто подобное:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Absolute positioning</h1> +<pre class="brush: html "><h1>Absolute positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -137,7 +137,7 @@ span { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; } @@ -188,12 +188,12 @@ span { <p><span class="tlid-translation translation" lang="ru"><span title="">Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на </span></span>30px от верхнего и левого края страницы. Мы можем изменить <strong>контекст </strong> <strong>позиционирования </strong>— относительно какого элемента позиционируется позиционируемый элемент. <span class="tlid-translation translation" lang="ru"><span title="">Это делается путём установки позиционирования на одном из предков элемента </span></span>— <span class="tlid-translation translation" lang="ru"><span title="">на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен).</span> <span title="">Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего </span></span><code>body</code><span class="tlid-translation translation" lang="ru"><span title="">:</span></span></p> -<pre class="brush: css notranslate">position: relative;</pre> +<pre class="brush: css ">position: relative;</pre> <p>Это должно дать следующий результат:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Positioning context</h1> +<pre class="brush: html "><h1>Positioning context</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -203,7 +203,7 @@ span { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; position: relative; @@ -243,7 +243,7 @@ span { <p>Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:</p> -<pre class="brush: css notranslate">p:nth-of-type(1) { +<pre class="brush: css ">p:nth-of-type(1) { position: absolute; background: lime; top: 10px; @@ -258,12 +258,12 @@ span { <p>Для того чтобы изменить порядок наложения, попробуйте объявить для вашего <code>p:nth-of-type(1)</code> правила:</p> -<pre class="brush: css notranslate">z-index: 1;</pre> +<pre class="brush: css ">z-index: 1;</pre> <p>Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>z-index</h1> +<pre class="brush: html "><h1>z-index</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -273,7 +273,7 @@ span { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; position: relative; @@ -324,7 +324,7 @@ p:nth-of-type(1) { <p>А теперь, обновите правило <code>body</code> удалив объявление <code>position: relative;</code> и добавьте фиксированную высоту как тут:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; height: 1400px; margin: 0 auto; @@ -332,7 +332,7 @@ p:nth-of-type(1) { <p>Теперь мы собираемся дать элементу {{htmlelement("h1")}} <code>position: fixed;</code>, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css ">h1 { position: fixed; top: 0; width: 500px; @@ -345,14 +345,14 @@ p:nth-of-type(1) { <p>Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, <span class="tlid-translation translation" lang="ru"><span title="">при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним.</span></span> Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:</p> -<pre class="brush: css notranslate">p:nth-of-type(1) { +<pre class="brush: css ">p:nth-of-type(1) { margin-top: 60px; }</pre> <p>Теперь вы должны видеть законченный пример:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Fixed positioning</h1> +<pre class="brush: html "><h1>Fixed positioning</h1> <p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> @@ -362,7 +362,7 @@ p:nth-of-type(1) { <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; height: 1400px; margin: 0 auto; @@ -407,7 +407,7 @@ p:nth-of-type(1) { <div class="hidden"> <h6 id="Sticky_positioning_example">Sticky positioning example</h6> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html "><h1>Sticky positioning</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> @@ -417,7 +417,7 @@ p:nth-of-type(1) { <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; margin: 0 auto; } @@ -431,7 +431,7 @@ p:nth-of-type(1) { }</pre> </div> -<pre class="brush: css notranslate">.positioned { +<pre class="brush: css ">.positioned { position: sticky; top: 30px; left: 30px; @@ -442,7 +442,7 @@ p:nth-of-type(1) { <p>Интересное и общее использование <code>position: sticky</code> <span class="tlid-translation translation" lang="ru"><span title="">заключается </span></span>в создании индексных страниц <span class="tlid-translation translation" lang="ru"><span title="">с прокруткой, где разные заголовки липнут к верху страницы</span></span>, когда они достигают его. Разметка такого примера может выглядеть так:</p> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html "><h1>Sticky positioning</h1> <dl> <dt>A</dt> @@ -475,7 +475,7 @@ p:nth-of-type(1) { <p>CSS может выглядеть как показано ниже. В нормальном потоке элементы {{htmlelement("dt")}} будут прокручиваться вместе с контентом. Когда мы добавляем <code>position: sticky</code> к элементу {{htmlelement("dt")}}, вместе со значением {{cssxref("top")}} 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.</p> -<pre class="brush: css notranslate">dt { +<pre class="brush: css ">dt { background-color: black; color: white; padding: 10px; @@ -488,7 +488,7 @@ p:nth-of-type(1) { <div id="Sticky_2"> <div class="hidden"> -<pre class="brush: css notranslate">body { +<pre class="brush: css ">body { width: 500px; height: 1400px; margin: 0 auto; @@ -505,7 +505,7 @@ dt { } </pre> -<pre class="brush: html notranslate"><h1>Sticky positioning</h1> +<pre class="brush: html "><h1>Sticky positioning</h1> <dl> <dt>A</dt> 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 55be5d624f..66e2244aaa 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -88,7 +88,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору <code>.container</code> только если эти две вещи истины.</p> -<pre class="brush: css notranslate"><code>@media screen and (min-width: 800px) { +<pre class="brush: css"><code>@media screen and (min-width: 800px) { .container { margin: 1em 2em; } @@ -109,12 +109,12 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. <span class="tlid-translation translation" lang="ru"><span title="">В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</span></span></p> -<pre class="notranslate"><code>target / context = result </code> +<pre><code>target / context = result </code> </pre> <p>Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.</p> -<pre class="brush: css notranslate"><code>.col { +<pre class="brush: css"><code>.col { width: 6.25%; /* 60 / 960 = 0.0625 */ } </code> </pre> @@ -145,14 +145,14 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>Самый старый из этих методов — это multicol, когда вы задаёте <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-count: 3; } </code> </pre> <p>Если вместо этого вы зададите <code>column-width</code>, то вы определите <em>минимальную </em>ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { column-width: 10em; } </code> </pre> @@ -163,7 +163,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись <code>flex: 1</code> как описано в главе <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">Flexbox: Гибкое изменение размеров flex элементов</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: flex; } @@ -180,7 +180,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе </span></span><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p> -<pre class="brush: css notranslate"><code>.container { +<pre class="brush: css"><code>.container { display: grid; grid-template-columns: 1fr 1fr 1fr; } </code> @@ -194,7 +194,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <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 { +<pre class="brush: css"><code>img { max-width: 100%; } </code> </pre> @@ -213,7 +213,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн <p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум <code>1200px</code>.</p> -<pre class="brush: css notranslate"><code>html { +<pre class="brush: css"><code>html { font-size: 1em; } @@ -252,7 +252,7 @@ h1 { <p>An interesting approach is to use the viewport unit <code>vw</code> to enable responsive typography. <code>1vw</code> is equal to one percent of the viewport width, meaning that if you set your font size using <code>vw</code>, it will always relate to the size of the viewport.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: 6vw; }</pre> @@ -260,7 +260,7 @@ h1 { <p>There is a solution, and it involves using <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. If you add the <code>vw</code> unit to a value set using a fixed size such as <code>em</code>s or <code>rem</code>s then the text will still be zoomable. Essentially, the <code>vw</code> unit adds on top of that zoomed value:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { font-size: calc(1.5rem + 3vw); }</pre> @@ -274,7 +274,7 @@ h1 { <p>If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <code><head></code> of the document.</p> -<pre class="brush: html notranslate"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> </pre> <p>This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.</p> |