diff options
Diffstat (limited to 'files/ru/learn/css')
19 files changed, 286 insertions, 286 deletions
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html index ab427b275c..555908dac6 100644 --- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке.</span> <span title="">Если вы обнаружите сложное свойство </span></span><code>background</code><span class="tlid-translation translation" lang="ru"><span title=""> в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } </code> @@ -116,7 +116,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать такие ключевые слова, как <code>top</code> и <code>right</code> (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; @@ -125,7 +125,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p>Допустимы значения <a href="/ru/docs/Web/CSS/размер">длины</a> и <a href="/ru/docs/Web/CSS/percentage">процентные</a>:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; @@ -134,7 +134,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">Вы также можете смешивать значения ключевых слов с длинами или процентами, например:</span></span></p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; @@ -142,7 +142,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова.</span> <span title="">Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; @@ -178,7 +178,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders <p><span class="tlid-translation translation" lang="ru"><span title="">Другие свойства <code>background- *</code> также могут иметь значения, разделённые запятыми, как и <code>background-image</code>:</span></span></p> -<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;</pre> @@ -229,19 +229,19 @@ background-position: 10px 20px, top right;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border: 1px solid black; } </code></pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Или мы можем нацеливаться на один край блока, например:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-top: 1px solid black; } </code></pre> <p>Индивидуальные свойства этих сокращений будут следующими:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-width: 1px; border-style: solid; border-color: black; @@ -249,7 +249,7 @@ background-position: 10px 20px, top right;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">И более детально:</span></span></p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-top-width: 1px; border-top-style: solid; border-top-color: black; @@ -269,13 +269,13 @@ background-position: 10px 20px, top right;</pre> <p>Например, чтобы сделать все четыре угла блока радиусом 10px:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-radius: 10px; } </code></pre> <p>Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { border-top-right-radius: 1em 10%; } </code></pre> diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html index e06ed6222c..2f82593f1f 100644 --- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -29,7 +29,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p><strong>Селектор потомка</strong> — обычно представляется символом пробела (<code> </code>) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются <dfn>селекторами потомка.</dfn></p> -<pre class="brush: css notranslate">body article p</pre> +<pre class="brush: css">body article p</pre> <p>В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом<code>.box</code>.</p> @@ -39,7 +39,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p><strong>Дочерний комбинатор</strong> (<code>></code>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <code><p></code>, которые являются дочерними элементами <code><article></code>, селектор пишется так:</p> -<pre class="brush: css notranslate">article > p</pre> +<pre class="brush: css">article > p</pre> <p>Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <code><li></code>, которые являются прямыми потомками <code><ul></code>, и присвоить им верхнюю границу красного цвета.</p> @@ -51,7 +51,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p>Соседний родственный селектор (<code>+</code>) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <code><img></code> , которые идут сразу после элементов <code><p></code> :</p> -<pre class="brush: css notranslate">p + img</pre> +<pre class="brush: css">p + img</pre> <p>Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <code><h1></code>, и стилизуем его.</p> @@ -63,7 +63,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p>Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (<code>~</code>). Чтобы выбрать все элементы <code><img></code>, которые находятся в <em>любом</em> месте после элементов <code><p></code>, надо указать так:</p> -<pre class="brush: css notranslate">p ~ img</pre> +<pre class="brush: css">p ~ img</pre> <p>В приведённом ниже примере мы выбираем все элементы <code><p></code>, которые идут после <code><h1></code>, и хотя в документе есть также <code><div></code>, тем не менее <code><p></code>, который идёт после него, будет выбран.</p> @@ -73,7 +73,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators <p>Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <code><ul></code>, можно использовать следующую комбинацию:</p> -<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> +<pre class="brush: css">ul > li[class="a"] { }</pre> <p>Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.</p> diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html index 090f134d91..5bf4b0576c 100644 --- a/files/ru/learn/css/building_blocks/selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -47,7 +47,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в <em>лист селекторов</em>: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка <code>h1</code> и класса <code>.special</code>; я могу написать их так:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; } @@ -57,13 +57,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>А могу написать короче — просто отделив селекторы запятыми:</p> -<pre class="brush: css notranslate">h1, .special { +<pre class="brush: css">h1, .special { color: blue; } </pre> <p>Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:</p> -<pre class="brush: css notranslate">h1, +<pre class="brush: css">h1, .special { color: blue; } </pre> @@ -76,7 +76,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>В примере ниже правило для селектора класса не будет работать, в то время как <code>h1</code> будет стилизован.</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; } @@ -86,7 +86,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>Но если мы объединим селекторы, правило не применится ни к <code>h1</code>, ни к классу: оно считается недействительным.</p> -<pre class="brush: css notranslate">h1, ..special { +<pre class="brush: css">h1, ..special { color: blue; } </pre> @@ -98,41 +98,41 @@ original_slug: Learn/CSS/Building_blocks/Селекторы <p>К этой группе относятся селекторы HTML-элементов, таких как <code><h1></code>.</p> -<pre class="brush: css notranslate">h1 { }</pre> +<pre class="brush: css">h1 { }</pre> <p>К группе относятся и селекторы классов:</p> -<pre class="brush: css notranslate">.box { }</pre> +<pre class="brush: css">.box { }</pre> <p>или селекторы идентификаторов (ID):</p> -<pre class="brush: css notranslate">#unique { }</pre> +<pre class="brush: css">#unique { }</pre> <h3 id="Селекторы_атрибутов">Селекторы атрибутов</h3> <p>Эта группа селекторов позволяет выбирать селекторы, основываясь на <em>наличии</em> у них конкретного атрибута элемента:</p> -<pre class="brush: css notranslate">a[title] { }</pre> +<pre class="brush: css">a[title] { }</pre> <p>или основываясь на <em>значении</em> атрибута:</p> -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> +<pre class="brush: css">a[href="https://example.com"] { }</pre> <h3 id="Псевдоклассы_псевдоэлементы">Псевдоклассы, псевдоэлементы</h3> <p>К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс <code>:hover</code>, например, применяет правило, только если на элемент наведён курсор мыши</p> -<pre class="brush: css notranslate">a:hover { }</pre> +<pre class="brush: css">a:hover { }</pre> <p>К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, <code>::first-line</code> всегда выбирает первую строку внутри элемента (абзаца <code><p></code> в нашем случае), действуя, как если бы тег <code><span></code> оборачивал первую строку, а затем был стилизован.</p> -<pre class="brush: css notranslate">p::first-line { }</pre> +<pre class="brush: css">p::first-line { }</pre> <h3 id="Комбинаторы">Комбинаторы</h3> <p>И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <code><article></code> с помощью комбинатора дочерних элементов (<code>></code>):</p> -<pre class="brush: css notranslate">article > p { }</pre> +<pre class="brush: css">article > p { }</pre> <h2 id="Продолжение">Продолжение</h2> diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html index 0dca8d3f9d..dccba5ef04 100644 --- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -35,7 +35,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:</p> -<pre class="notranslate">:<em>pseudo-class-name</em></pre> +<pre>:<em>pseudo-class-name</em></pre> <h3 id="Простой_пример_псевдокласса">Простой пример псевдокласса</h3> @@ -74,7 +74,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия <code>::</code>.</p> -<pre class="notranslate"><em>::pseudo-element-name</em></pre> +<pre><em>::pseudo-element-name</em></pre> <div class="blockIndicator note"> <p><strong>Примечание</strong>: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.</p> @@ -94,7 +94,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p <p>Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы <code>:first-child</code> и <code>::first-line</code>. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <code><p>,</code> который находится внутри элемента <code><article></code>.</p> -<pre class="brush: css notranslate"><code>article p:first-child::first-line { +<pre class="brush: css"><code>article p:first-child::first-line { font-size: 120%; font-weight: bold; }</code></pre> diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html index 6494749f95..9898ab544a 100644 --- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html +++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -48,7 +48,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se <p><span class="tlid-translation translation" lang="ru"><span title="">Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают.</span></span> Например, если мы хотим выбрать элементы-потомки элемента <code><article></code>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <code><article></code>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">псевдоклассах и псевдо-элементах</a>, как селектор-потомок вместе с селектором элемента <code><article></code>: </p> -<pre class="brush: css notranslate">article :first-child { +<pre class="brush: css">article :first-child { font-weight: bold; }</pre> @@ -56,7 +56,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se <p><span class="tlid-translation translation" lang="ru"><span title="">Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс</span></span> <code>:first-child</code> <span class="tlid-translation translation" lang="ru"><span title="">, чтобы было очевидно, что делает селектор.</span> <span title="">Он выбирает <em>любой</em> элемент, который является первым дочерним элементом элемента</span></span> <code><article></code> или <span class="tlid-translation translation" lang="ru"><span title="">первым дочерним элементом любого потомка</span></span> <span class="tlid-translation translation" lang="ru"><span title="">элемента</span></span> <code><article></code>:</p> -<pre class="brush: css notranslate">article *:first-child { +<pre class="brush: css">article *:first-child { font-weight: bold; } </pre> diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html index 3fb706e69e..64aca4b04d 100644 --- a/files/ru/learn/css/building_blocks/the_box_model/index.html +++ b/files/ru/learn/css/building_blocks/the_box_model/index.html @@ -128,7 +128,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>Предположим, что в элементе есть следующий CSS определяющий <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>:</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 350px; height: 150px; margin: 10px; @@ -153,13 +153,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model <p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство <code>box-sizing: border-box</code>. С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css"><code>.box { box-sizing: border-box; } </code></pre> <p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code><html></code>, затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { box-sizing: border-box; } *, *::before, *::after { diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html index d495b04979..689292d9fc 100644 --- a/files/ru/learn/css/building_blocks/values_and_units/index.html +++ b/files/ru/learn/css/building_blocks/values_and_units/index.html @@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units <p>В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию <code>rgb()</code>:</p> -<pre class="brush: css notranslate"><code>h1 { +<pre class="brush: css"><code>h1 { color: black; background-color: rgb(197,93,161); } </code> 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> diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.html index a358eaf98b..325c5e56ae 100644 --- a/files/ru/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.html @@ -46,7 +46,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS <p>Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением <code>.css</code>, и ссылка на него из HTML-элемента <code><link></code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -61,7 +61,7 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS <p>Файл CSS может выглядеть следующим образом:</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; background-color: yellow; border: 1px solid black; @@ -75,7 +75,7 @@ p { <p>В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:</p> -<pre class="brush: html notranslate"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> +<pre class="brush: html"><!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --> <link rel="stylesheet" href="styles/style.css"> <!-- Файл — внутри под-директории <em>styles</em> внутри под-под-директории <em>general</em> и так далее --> @@ -90,7 +90,7 @@ p { <p>Таким образом, HTML будет выглядеть вот так:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -119,7 +119,7 @@ p { <p>Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте <code>style</code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -141,7 +141,7 @@ p { <p>index.html:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> @@ -157,7 +157,7 @@ p { <p>styles.css:</p> -<pre class="brush: css notranslate">/* Пишите сюда свой код */ +<pre class="brush: css">/* Пишите сюда свой код */ p { color: red; @@ -177,7 +177,7 @@ p { <p>Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:</p> -<pre class="brush: css notranslate">h1 /* это селектор тегов */ +<pre class="brush: css">h1 /* это селектор тегов */ a:link /* это селектор ссылок */ .manythings /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */ #onething /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */ @@ -195,7 +195,7 @@ h1, h2, .intro /* перечисление селекторов */ <p>Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента <code>p</code> — он будет синим; также я задал класс, который сделает элемент красным:</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: red; } @@ -205,11 +205,11 @@ p { <p>А теперь допустим, что в нашем HTML-коде у нас есть абзац <code>p</code> с классом <code>special</code>. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?</p> -<pre class="brush: html notranslate"><p class="special">Какого же я цвета?</p></pre> +<pre class="brush: html"><p class="special">Какого же я цвета?</p></pre> <p>В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются <strong>каскадами</strong>, или <strong>спецификациями</strong>. В примере ниже мы задали два правила для селектора <code>p</code>, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; } @@ -274,9 +274,9 @@ p { <p>Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию <code>calc()</code>. Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:</p> <div id="calc_example"> -<pre class="brush: html notranslate"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> +<pre class="brush: html"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> -<pre class="brush: css notranslate">.outer { +<pre class="brush: css">.outer { border: 5px solid black; } @@ -297,9 +297,9 @@ p { <p>В следующем примере будут различные значения для свойства {{cssxref("<transform>")}} <code>rotate()</code>.</p> <div id="transform_example"> -<pre class="brush: html notranslate"><div class="box"></div></pre> +<pre class="brush: html"><div class="box"></div></pre> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { margin: 30px; width: 100px; height: 100px; @@ -324,13 +324,13 @@ p { <p>До сих пор не сталкивались мы с правилами <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (произносится как <em>эт-рулс</em>, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил <code>@rules</code> простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать <code>@import</code>:</p> -<pre class="brush: css notranslate">@import 'styles2.css';</pre> +<pre class="brush: css">@import 'styles2.css';</pre> <p>Чаще других встречается <code>@rules</code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> под названием </span></font><code>@media</code>: оно позволяет вам использовать <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиавыражения</a>, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).</p> <p>Ниже у нас CSS-файл, в котором значение заднего фона элемента <code><body></code> равно <code>pink</code>. Однако после мы добавили правило <code>@media</code>, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background-color: pink; } @@ -350,7 +350,7 @@ p { <p>К примеру, это строка (комментарий не в счёт):</p> -<pre class="brush: css notranslate">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются +<pre class="brush: css">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах значения добавляются в порядке верх(низ)–право–лево. В двузначных стенограммах значения добавляются @@ -359,7 +359,7 @@ padding: 10px 15px 15px 5px;</pre> <p>делает то же самое, что и эти четыре, вместе взятые:</p> -<pre class="brush: css notranslate">padding-top: 10px; +<pre class="brush: css">padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; @@ -367,18 +367,18 @@ padding-left: 5px; <p>или эти:</p> -<pre class="brush: cpp notranslate">padding-block-start: 10px +<pre class="brush: cpp">padding-block-start: 10px padding-inline-end: 15px; padding-block-end: 15px; padding-inline-start: 5px;</pre> <p>в то время как строка:</p> -<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> +<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> <p>делает то же, что и эти строки:</p> -<pre class="brush: css notranslate">background-color: red; +<pre class="brush: css">background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; @@ -398,7 +398,7 @@ background-scroll: fixed;</pre> <p>Комментарии в CSS начинаются с <code>/*</code> и окачиваются с <code>*/</code>. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.</p> -<pre class="brush: css notranslate">/* Работаю над основными элементами */ +<pre class="brush: css">/* Работаю над основными элементами */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% Helvetica, Arial, sans-serif; @@ -435,7 +435,7 @@ div p + p { <p>Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора <code>.special</code>.</p> -<pre class="brush: css notranslate">/*.special { +<pre class="brush: css">/*.special { color: red; }*/ @@ -451,7 +451,7 @@ p { <p>В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; @@ -486,7 +486,7 @@ div p + p { <p id="Very_compact">То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:</p> -<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} @@ -500,12 +500,12 @@ div p + p {padding-top: 0;} <p>Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:</p> -<pre class="brush: css notranslate">margin: 0 auto; +<pre class="brush: css">margin: 0 auto; padding-left: 10px;</pre> <p>А такие объявления не действительны:</p> -<pre class="brush: css notranslate">margin: <strong>0auto</strong>; +<pre class="brush: css">margin: <strong>0auto</strong>; <strong>padding- left</strong>: 10px;</pre> <p>Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.</p> diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.html index b5d03c7cea..208a451be4 100644 --- a/files/ru/learn/css/first_steps/how_css_works/index.html +++ b/files/ru/learn/css/first_steps/how_css_works/index.html @@ -59,7 +59,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Возьмём следующий пример:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Let's use: <span>Cascading</span> <span>Style</span> @@ -69,7 +69,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>В DOM-дереве узел, соответствующий элементу <code><p></code>, — это родительский элемент. Его дочерние элементы — текст и три элемента <code><span></code>. Узлы <code>SPAN</code> также будут родителями — с текстом в качестве дочерних элементов:</p> -<pre class="notranslate">P +<pre>P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" @@ -84,14 +84,14 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> <div class="hidden"> -<pre class="brush: css notranslate">p {margin:0;}</pre> +<pre class="brush: css">p {margin:0;}</pre> </div> <h2 id="Добавление_CSS_в_DOM">Добавление CSS в DOM</h2> <p>Допустим, мы добавили таблицу стилей к нашему примеру:</p> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Let's use: <span>Cascading</span> <span>Style</span> @@ -100,7 +100,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>А вот CSS-код:</p> -<pre class="brush: css notranslate">span { +<pre class="brush: css">span { border: 1px solid black; background-color: lime; }</pre> @@ -126,9 +126,9 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Ниже я использовал британское написание слова <em>color</em>, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.</p> <div id="Skipping_example"> -<pre class="brush: html notranslate"><p> I want this text to be large, bold and blue.</p></pre> +<pre class="brush: html"><p> I want this text to be large, bold and blue.</p></pre> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-weight: bold; colour: blue; /* некорректное написание свойства цвета */ font-size: 200%; @@ -141,7 +141,7 @@ translation_of: Learn/CSS/First_steps/How_CSS_works <p>Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают <code>calc()</code> как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции <code>calc()</code>, равной <code>100% - 50px</code>. Старые браузеры используют пиксельное значение, потому что не распознают <code>calc()</code>. Новые браузеры используют <code>calc()</code> так как эта строка появляется позже в каскаде.</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 500px; width: calc(100% - 50px); }</pre> diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.html index 270aec1251..cc24a192c5 100644 --- a/files/ru/learn/css/styling_text/fundamentals/index.html +++ b/files/ru/learn/css/styling_text/fundamentals/index.html @@ -45,7 +45,7 @@ translation_of: Learn/CSS/Styling_text/Fundamentals <p>Давайте сразу перейдём к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -64,14 +64,14 @@ occasion such as this that he did.</p></pre> <p><code>color</code> can accept any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>, for example:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; }</pre> <p>This will cause the paragraphs to become red, rather than the standard browser default black, like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -89,7 +89,7 @@ occasion such as this that he did.</p></pre> <p>To set a different font on your text, you use the {{cssxref("font-family")}} property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser {{anch("Default fonts", "default font")}}. A simple example looks like so:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: arial; }</pre> @@ -200,7 +200,7 @@ occasion such as this that he did.</p></pre> <p>Since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font <em>could</em> fail for some reason), you can supply a <strong>font stack</strong> so that the browser has multiple fonts it can choose from. This simply involves a <code>font-family</code> value consisting of multiple font names separated by commas, e.g.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: "Trebuchet MS", Verdana, sans-serif; }</pre> @@ -216,7 +216,7 @@ occasion such as this that he did.</p></pre> <p>Let's add to our previous example, giving the paragraphs a sans-serif font:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; font-family: Helvetica, Arial, sans-serif; }</pre> @@ -224,7 +224,7 @@ occasion such as this that he did.</p></pre> <p>This gives us the following result:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -252,7 +252,7 @@ occasion such as this that he did.</p></pre> <p>Things become more tricky when you start altering the font size of nested elements. For example, if you had an {{htmlelement("article")}} element in your page, and set its <code>font-size</code> to 1.5 <code>em</code> (which would compute to 24 <code>px</code> final size), and then wanted the paragraphs inside the <code><article></code> elements to have a computed font size of 20 <code>px</code>, what <code>em</code> value would you use?</p> -<pre class="brush: html notranslate"><!-- document base font-size is 16px --> +<pre class="brush: html"><!-- document base font-size is 16px --> <article> <!-- If my font-size is 1.5em --> <p>My paragraph</p> <!-- How do I compute to 20px font-size? --> </article></pre> @@ -266,7 +266,7 @@ occasion such as this that he did.</p></pre> <p>Our new result is like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -279,7 +279,7 @@ occasion such as this that he did.</p> </pre> </div> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -338,7 +338,7 @@ p { <p>Our new result is like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -351,7 +351,7 @@ occasion such as this that he did.</p> </pre> </div> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -376,7 +376,7 @@ p { <p>You can apply drop shadows to your text using the {{cssxref("text-shadow")}} property. This takes up to four values, as shown in the example below:</p> -<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> +<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre> <p>The four properties are as follows:</p> @@ -391,7 +391,7 @@ p { <p>You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:</p> -<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red, +<pre class="brush: css">text-shadow: 1px 1px 1px red, 2px 2px 1px red;</pre> <p>If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:</p> @@ -399,7 +399,7 @@ p { <div class="hidden"> <h5 id="Hidden_example1">Hidden example1</h5> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -411,7 +411,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -457,7 +457,7 @@ p { <p>If we applied <code>text-align: center;</code> to the {{htmlelement("h1")}} in our example, we'd end up with this:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -469,7 +469,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -498,14 +498,14 @@ p { <p>The {{cssxref("line-height")}} property sets the height of each line of text — this can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the <code>line-height</code>. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this:</p> -<pre class="brush: css notranslate">line-height: 1.6;</pre> +<pre class="brush: css">line-height: 1.6;</pre> <p>Applying this to the {{htmlelement("p")}} elements in our example would give us this result:</p> <div class="hidden"> <h5 id="Hidden_example2">Hidden example2</h5> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -517,7 +517,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -549,7 +549,7 @@ p { <p>So as an example, we could apply some word- and letter-spacing to the first line of each {{htmlelement("p")}} element in our example:</p> -<pre class="brush: css notranslate">p::first-line { +<pre class="brush: css">p::first-line { letter-spacing: 4px; word-spacing: 4px; }</pre> @@ -557,7 +557,7 @@ p { <p>Let's add some to our example, like so:</p> <div class="hidden"> -<pre class="brush: html notranslate"><h1>Tommy the cat</h1> +<pre class="brush: html"><h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago...</p> @@ -569,7 +569,7 @@ predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did.</p> </pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-size: 10px; } @@ -650,7 +650,7 @@ p { <p>A full example would look like this:</p> -<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> +<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> <h2 id="Active_learning_Playing_with_styling_text">Active learning: Playing with styling text</h2> @@ -661,7 +661,7 @@ p { <div class="hidden"> <h6 id="Playable_code">Playable code</h6> -<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>HTML Input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>Some sample text for your delight</p> @@ -682,7 +682,7 @@ p { </div> </pre> -<pre class="brush: js notranslate">const htmlInput = document.querySelector(".html-input"); +<pre class="brush: js">const htmlInput = document.querySelector(".html-input"); const cssInput = document.querySelector(".css-input"); const reset = document.getElementById("reset"); let htmlCode = htmlInput.value; diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.html index 96223649fe..ff9882f958 100644 --- a/files/ru/learn/css/styling_text/web_fonts/index.html +++ b/files/ru/learn/css/styling_text/web_fonts/index.html @@ -29,7 +29,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты применённые к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; }</pre> @@ -41,14 +41,14 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:</p> -<pre class="brush: css notranslate">@font-face { +<pre class="brush: css">@font-face { font-family: "myFont"; src: url("myFont.woff"); }</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:</span></span></p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: "myFont", "Bitstream Vera Serif", serif; }</pre> @@ -122,7 +122,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <li>Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:</li> </ol> -<pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> +<pre class="brush: css">font-family: 'zantrokeregular', serif;</pre> <p><span class="tlid-translation translation" lang="ru"><span title="">Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.</span></span></p> @@ -155,7 +155,7 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты <p>Давайте исследуем тот <code>@font-face</code> синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:</p> -<pre class="brush: css notranslate">@font-face { +<pre class="brush: css">@font-face { font-family: 'ciclefina'; src: url('fonts/cicle_fina-webfont.eot'); src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), |