diff options
| author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
| commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
| tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/web/css | |
| parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
| download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip | |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/web/css')
194 files changed, 595 insertions, 595 deletions
diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.html b/files/ru/web/css/@counter-style/additive-symbols/index.html index c8781e4d40..4ea2a2dc87 100644 --- a/files/ru/web/css/@counter-style/additive-symbols/index.html +++ b/files/ru/web/css/@counter-style/additive-symbols/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/@counter-style/additive-symbols --- <h2 id="Описание">Описание</h2> -<p>Дескриптор аддитивных символов аналогичен дескриптору <span class="seoSummary"> {{cssxref('symbols')}} </span>и позволяет пользователю указывать символы которые будут использоваться для представлений счетчика, когда значение дескриптора<span class="seoSummary"> {{cssxref('system')}} <em>аддитивное</em>. Дескриптор <code>additive-symbols</code> </span>определяет так называемые аддитивные кортежи<span class="seoSummary">, </span>каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес<span class="seoSummary">.</span> Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.</p> +<p>Дескриптор аддитивных символов аналогичен дескриптору <span class="seoSummary"> {{cssxref('symbols')}} </span>и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора<span class="seoSummary"> {{cssxref('system')}} <em>аддитивное</em>. Дескриптор <code>additive-symbols</code> </span>определяет так называемые аддитивные кортежи<span class="seoSummary">, </span>каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес<span class="seoSummary">.</span> Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.</p> <p>Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор <code>symbols</code> используется вместо аддитивных символов для указания символов счетчика.</p> diff --git a/files/ru/web/css/@font-face/font-display/index.html b/files/ru/web/css/@font-face/font-display/index.html index 603b7a8a66..e1466f1b1a 100644 --- a/files/ru/web/css/@font-face/font-display/index.html +++ b/files/ru/web/css/@font-face/font-display/index.html @@ -7,11 +7,11 @@ translation_of: Web/CSS/@font-face/font-display <h2 id="Описание">Описание</h2> -<p>Дескриптор <code>font-display</code> определяет то, как шрифт, подключенный через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.</p> +<p>Дескриптор <code>font-display</code> определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.</p> <h3 id="Временная_шкала_отображения_шрифтов">Временная шкала отображения шрифтов</h3> -<p>Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта. Эта временная шкала разделена на три отрезка, приведенных ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.</p> +<p>Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта. Эта временная шкала разделена на три отрезка, приведённых ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.</p> <dl> <dt>Период блокировки шрифта (Font block period)</dt> @@ -39,13 +39,13 @@ font-display: optional;</pre> <dt>auto</dt> <dd>Стратегию загрузки шрифта определяет пользовательский агент.</dd> <dt>block</dt> - <dd>Для шрифта задается короткий период блокировки и бесконечный период подмены.</dd> + <dd>Для шрифта задаётся короткий период блокировки и бесконечный период подмены.</dd> <dt>swap</dt> - <dd>Для шрифта не задается период блокировки и задается бесконечный период подмены.</dd> + <dd>Для шрифта не задаётся период блокировки и задаётся бесконечный период подмены.</dd> <dt>fallback</dt> - <dd>Для шрифта задается очень короткий период блокировки и короткий период подмены.</dd> + <dd>Для шрифта задаётся очень короткий период блокировки и короткий период подмены.</dd> <dt>optional</dt> - <dd>Для шрифта задается очень короткий период блокировки и не задается период подмены.</dd> + <dd>Для шрифта задаётся очень короткий период блокировки и не задаётся период подмены.</dd> </dl> <h3 id="Официальный_синтаксис">Официальный синтаксис</h3> diff --git a/files/ru/web/css/@font-face/index.html b/files/ru/web/css/@font-face/index.html index 6382b864b4..b638ecc425 100644 --- a/files/ru/web/css/@font-face/index.html +++ b/files/ru/web/css/@font-face/index.html @@ -11,7 +11,7 @@ tags: - типографика translation_of: Web/CSS/@font-face --- -<div><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> <font>позволяет указать </font><font>шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция </font><code>local()</code>, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции <code>url()</code>.</div> +<div><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> <font>позволяет указать </font><font>шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удалённого сервера, либо с компьютера пользователя. Если в правиле была объявлена функция </font><code>local()</code>, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции <code>url()</code>.</div> <div> </div> @@ -19,7 +19,7 @@ translation_of: Web/CSS/@font-face <div> </div> -<div>Распространенным случаем является одновременное использование <code>url()</code> и <code>local()</code>, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.</div> +<div>Распространённым случаем является одновременное использование <code>url()</code> и <code>local()</code>, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.</div> <div> </div> @@ -56,7 +56,7 @@ translation_of: Web/CSS/@font-face <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt> <dd>Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.</dd> <dt>{{cssxref("@font-face/src", "src")}}</dt> - <dd><font>Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.<br> + <dd><font>Задаёт ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удалённого файла шрифта или имя шрифта на компьютере пользователя.<br> <br> Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции <code>format()</code>:</font><br> diff --git a/files/ru/web/css/@font-feature-values/index.html b/files/ru/web/css/@font-feature-values/index.html index d04e91a2d0..7a122d3ad6 100644 --- a/files/ru/web/css/@font-feature-values/index.html +++ b/files/ru/web/css/@font-feature-values/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/@font-feature-values } </pre> -<p>Правило <code>@font-feature-values</code> может использоваться как на вернем уровне вашего CSS так и внутри любого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">условного CSS правила</a>.</p> +<p>Правило <code>@font-feature-values</code> может использоваться как на вернём уровне вашего CSS так и внутри любого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">условного CSS правила</a>.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -84,5 +84,5 @@ translation_of: Web/CSS/@font-feature-values <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определенные этим правилом.</li> + <li>Свойство {{cssxref("font-variant-alternates")}} которое использует значения, определённые этим правилом.</li> </ul> diff --git a/files/ru/web/css/@media/inverted-colors/index.html b/files/ru/web/css/@media/inverted-colors/index.html index f56c90108b..123d6d7eeb 100644 --- a/files/ru/web/css/@media/inverted-colors/index.html +++ b/files/ru/web/css/@media/inverted-colors/index.html @@ -30,7 +30,7 @@ translation_of: Web/CSS/@media/inverted-colors <h3 id="HTML">HTML</h3> -<pre class="brush: html"><p>Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия желтого по черному). Если нет, он должен быть красным на светло-сером.</p> +<pre class="brush: html"><p>Если вы используете инвертированные цвета, этот текст должен быть синим по белому (инверсия жёлтого по чёрному). Если нет, он должен быть красным на светло-сером.</p> <p>Если текст серого цвета, ваш браузер не поддерживает медиа-функцию `inverted-colors`.</p></pre> <h3 id="CSS">CSS</h3> diff --git a/files/ru/web/css/@media/orientation/index.html b/files/ru/web/css/@media/orientation/index.html index 723c964b8f..055dffc88d 100644 --- a/files/ru/web/css/@media/orientation/index.html +++ b/files/ru/web/css/@media/orientation/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/@media/orientation <p><a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">медиа-функции</a> <strong><code>orientation</code></strong> может использоваться для проверки ориентации области {{glossary("просмотра")}} (или поля страницы для <a href="/en-US/docs/Web/CSS/Paged_media">медийных страниц</a>).</p> <div class="note"> -<p><strong>Примечание:</strong> Эта функция не соответствует ориентации <em>устройства</em>. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведет к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.</p> +<p><strong>Примечание:</strong> Эта функция не соответствует ориентации <em>устройства</em>. Открытие программной клавиатуры на многих устройствах в книжной ориентации приведёт к тому, что область просмотра станет шире, чем высокая, в результате чего браузер будет использовать альбомные стили вместо портретного.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/@page/index.html b/files/ru/web/css/@page/index.html index d61e6d2ca3..04daa7d53e 100644 --- a/files/ru/web/css/@page/index.html +++ b/files/ru/web/css/@page/index.html @@ -2,7 +2,7 @@ title: '@page' slug: Web/CSS/@page tags: - - Верстка + - Вёрстка - печать - страница translation_of: Web/CSS/@page @@ -99,5 +99,5 @@ translation_of: Web/CSS/@page <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Смотрите тикет <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> в Bugzilla для отслеживания прогресса по теме (базовый страничный счетчик, и т.д.)</li> + <li>Смотрите тикет <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=286443">[META] CSS Paged Media Module Level 3</a> в Bugzilla для отслеживания прогресса по теме (базовый страничный счётчик, и т.д.)</li> </ul> diff --git a/files/ru/web/css/@viewport/index.html b/files/ru/web/css/@viewport/index.html index 56ee461658..cbbaf38b69 100644 --- a/files/ru/web/css/@viewport/index.html +++ b/files/ru/web/css/@viewport/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/@viewport <h2 id="Кратко">Кратко</h2> -<p><strong><code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> содержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.</p> +<p><strong><code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> содержит набор вложенных дескрипторов в блоке CSS, который разделён фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -32,13 +32,13 @@ translation_of: Web/CSS/@viewport <dt><a href="/en-US/docs/Web/CSS/@viewport/max-width"><code>max-width</code></a></dt> <dd>Используется при определении ширины видового экрана при первом отображении документа.</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/width"><code>width</code></a></dt> - <dd>Сокращенный дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).</dd> + <dd>Сокращённый дескриптор для установки как минимальной ширины(min-width), так и максимальной ширины(max-width).</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/min-height"><code>min-height</code></a></dt> <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/max-height"><code>max-height</code></a></dt> <dd>Используется при определении высоты видового экрана при первом отображении документа.</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/height"><code>height</code></a></dt> - <dd>Сокращенный дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).</dd> + <dd>Сокращённый дескриптор для установки как минимальной высоты(min-height), так и максимальной высоты(max-height).</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code></a></dt> <dd>Устанавливает начальный коэффициент масштабирования.</dd> <dt><a href="/en-US/docs/Web/CSS/@viewport/min-zoom"><code>min-zoom</code></a></dt> diff --git a/files/ru/web/css/_colon_-moz-focusring/index.html b/files/ru/web/css/_colon_-moz-focusring/index.html index 872ef81e58..c194469e7a 100644 --- a/files/ru/web/css/_colon_-moz-focusring/index.html +++ b/files/ru/web/css/_colon_-moz-focusring/index.html @@ -33,7 +33,7 @@ translation_of: 'Web/CSS/:-moz-focusring' <h2 id="Спецификации">Спецификации</h2> -<p>Этот псевдокласс пока еще не определен ни в одной спецификации, хотя и прошел этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.</p> +<p>Этот псевдокласс пока ещё не определён ни в одной спецификации, хотя и прошёл этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.</p> <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> diff --git a/files/ru/web/css/_colon_-moz-only-whitespace/index.html b/files/ru/web/css/_colon_-moz-only-whitespace/index.html index 48c095accb..83a7a93462 100644 --- a/files/ru/web/css/_colon_-moz-only-whitespace/index.html +++ b/files/ru/web/css/_colon_-moz-only-whitespace/index.html @@ -72,7 +72,7 @@ div { <tr> <td>{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}</td> <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Определен впервые</td> + <td>Определён впервые</td> </tr> </tbody> </table> diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html index 95ede05087..839d8323c6 100644 --- a/files/ru/web/css/_colon_any-link/index.html +++ b/files/ru/web/css/_colon_any-link/index.html @@ -5,7 +5,7 @@ tags: - ':any-link' - CSS - Web - - Верстка + - Вёрстка - Гиперссылки - Справка - Ссылки diff --git a/files/ru/web/css/_colon_default/index.html b/files/ru/web/css/_colon_default/index.html index 45ac8c1819..e13201061e 100644 --- a/files/ru/web/css/_colon_default/index.html +++ b/files/ru/web/css/_colon_default/index.html @@ -14,7 +14,7 @@ input:default { background-color: lime; }</pre> -<p>Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс <code>:default</code> найдет <em>все</em> эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.</p> +<p>Сгруппированные элементы, поддерживающие множественный выбор, также могут иметь несколько элементов, выбранных по умолчанию. В этом случае псевдокласс <code>:default</code> найдёт <em>все</em> эти элементы. Например, можно стилизовать чекбоксы по умолчанию в группе чекбоксов.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_colon_dir/index.html b/files/ru/web/css/_colon_dir/index.html index 09422f6f13..4cf0bccb4b 100644 --- a/files/ru/web/css/_colon_dir/index.html +++ b/files/ru/web/css/_colon_dir/index.html @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:dir' </div> <div class="note"> -<p><strong>Примечание:</strong> В HTML, направление задается атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.</p> +<p><strong>Примечание:</strong> В HTML, направление задаётся атрибутом {{htmlattrxref("dir")}}. В других форматах могут использоваться иные методы.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_colon_disabled/index.html b/files/ru/web/css/_colon_disabled/index.html index 86a34bd10a..0c5812445b 100644 --- a/files/ru/web/css/_colon_disabled/index.html +++ b/files/ru/web/css/_colon_disabled/index.html @@ -9,7 +9,7 @@ translation_of: 'Web/CSS/:disabled' <h2 id="Описание">Описание</h2> -<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:disabled</code> находит любой отключенный элемент. Элемент отключен, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включенное состояние, когда его можно активировать или сфокусировать.</p> +<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:disabled</code> находит любой отключённый элемент. Элемент отключён, если не может быть активирован (например, его нельзя выбрать, нажать на него или ввести текст) или получить фокус. У элемента также есть включённое состояние, когда его можно активировать или сфокусировать.</p> <h2 id="Примеры">Примеры</h2> @@ -17,9 +17,9 @@ translation_of: 'Web/CSS/:disabled' <dl> <dt>input:disabled</dt> - <dd>Выберет все отключенные поля ввода</dd> + <dd>Выберет все отключённые поля ввода</dd> <dt>select.country:disabled</dt> - <dd>Найдёт все отключенные <code>select</code> элементы с классом <code>country</code></dd> + <dd>Найдёт все отключённые <code>select</code> элементы с классом <code>country</code></dd> </dl> <h3 id="Пример_использования">Пример использования</h3> diff --git a/files/ru/web/css/_colon_enabled/index.html b/files/ru/web/css/_colon_enabled/index.html index 7e83a52a5d..99e4402da0 100644 --- a/files/ru/web/css/_colon_enabled/index.html +++ b/files/ru/web/css/_colon_enabled/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:enabled' <h2 id="Описание">Описание</h2> -<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:enabled</code> находит любой включенный элемент. Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.</p> +<p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:enabled</code> находит любой включённый элемент. Элемент включён, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключённое состояние, когда его нельзя активировать или сфокусировать.</p> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/css/_colon_first-child/index.html b/files/ru/web/css/_colon_first-child/index.html index d31fc8acd2..927a3a5098 100644 --- a/files/ru/web/css/_colon_first-child/index.html +++ b/files/ru/web/css/_colon_first-child/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:first-child' <pre class="brush: css no-line-numbers">> /* Выбирает любой <p>, который является первым элементом - среди своих братьев и сестер */ + среди своих братьев и сестёр */ p:first-child { color: lime; }</pre> diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html index 3156d5c66e..a509c175d3 100644 --- a/files/ru/web/css/_colon_focus-visible/index.html +++ b/files/ru/web/css/_colon_focus-visible/index.html @@ -17,7 +17,7 @@ translation_of: 'Web/CSS/:focus-visible' <h3 id="Базовый_пример">Базовый пример</h3> -<p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щелкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p> +<p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p> <pre class="brush: html notranslate"><input value="Default styles"><br> <button>Default styles</button><br> diff --git a/files/ru/web/css/_colon_focus/index.html b/files/ru/web/css/_colon_focus/index.html index 206b74a0e9..af809f7761 100644 --- a/files/ru/web/css/_colon_focus/index.html +++ b/files/ru/web/css/_colon_focus/index.html @@ -102,7 +102,7 @@ input:focus { <h2 id="Поддержка_браузерами">Поддержка браузерами</h2> <div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div> <p>{{Compat("css.selectors.focus")}}</p> </div> diff --git a/files/ru/web/css/_colon_fullscreen/index.html b/files/ru/web/css/_colon_fullscreen/index.html index 5dc0c1afec..c527af137f 100644 --- a/files/ru/web/css/_colon_fullscreen/index.html +++ b/files/ru/web/css/_colon_fullscreen/index.html @@ -2,7 +2,7 @@ title: ':fullscreen' slug: 'Web/CSS/:fullscreen' tags: - - Верстка + - Вёрстка - полноэкранный режим - псевдокласс - экран @@ -36,7 +36,7 @@ translation_of: 'Web/CSS/:fullscreen' <button id="fs-toggle">Toggle Fullscreen</button></pre> -<p>{{HTMLElement("button")}} с ID <code>"fs-toggle"</code> будет изменятся между бледно-красный и бледно-зеленый в зависимости от того, находится ли документ в полноэкранном режиме.</p> +<p>{{HTMLElement("button")}} с ID <code>"fs-toggle"</code> будет изменятся между бледно-красный и бледно-зелёный в зависимости от того, находится ли документ в полноэкранном режиме.</p> <h3 id="CSS">CSS</h3> diff --git a/files/ru/web/css/_colon_indeterminate/index.html b/files/ru/web/css/_colon_indeterminate/index.html index d4cf598129..e601e36af1 100644 --- a/files/ru/web/css/_colon_indeterminate/index.html +++ b/files/ru/web/css/_colon_indeterminate/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:indeterminate' <p><a href="/ru/docs/Web/CSS">CSS</a><a href="/ru/docs/Web/CSS/Псевдо-классы"> псевдокласс</a> <strong><code>:indeterminate</code></strong> находит элементы в неопределённом состоянии.</p> -<pre class="brush: css no-line-numbers">/* Выбирает все элементы <input>, которые находятся в неопределенном состоянии */ +<pre class="brush: css no-line-numbers">/* Выбирает все элементы <input>, которые находятся в неопределённом состоянии */ input:indeterminate { background: lime; }</pre> @@ -32,7 +32,7 @@ input:indeterminate { <h3 id="Чекбокс_и_радио_переключатели">Чекбокс и радио переключатели</h3> -<p>В этом примере специальные стили применяются к меткам, которые привязаны к неопределенным полям формы.</p> +<p>В этом примере специальные стили применяются к меткам, которые привязаны к неопределённым полям формы.</p> <h4 id="HTML">HTML</h4> diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html index cd8f1848d1..d365dfa795 100644 --- a/files/ru/web/css/_colon_is/index.html +++ b/files/ru/web/css/_colon_is/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:is' <p><strong><code>:is()</code></strong> это функция <a href="/ru/docs/Web/CSS">псевдокласс CSS</a> принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.</p> -<p>Заметьте, что в данный момент браузеры поддерживают ее функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдокласс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p> +<p>Заметьте, что в данный момент браузеры поддерживают её функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдокласс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p> <pre class="brush: css no-line-numbers notranslate">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */ :is(header, main, footer) p:hover { @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:is' cursor: pointer; } -/* Пример приведенный выше эквивалентен следующему */ +/* Пример приведённый выше эквивалентен следующему */ header p:hover, main p:hover, footer p:hover { diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html index 88f406851d..8a9fcbb9b2 100644 --- a/files/ru/web/css/_colon_left/index.html +++ b/files/ru/web/css/_colon_left/index.html @@ -2,7 +2,7 @@ title: ':left' slug: 'Web/CSS/:left' tags: - - Верстка + - Вёрстка - Псевдоклассы translation_of: 'Web/CSS/:left' --- diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html index 46d0f88746..d3f5c5a0ef 100644 --- a/files/ru/web/css/_colon_target/index.html +++ b/files/ru/web/css/_colon_target/index.html @@ -2,7 +2,7 @@ title: ':target' slug: 'Web/CSS/:target' tags: - - Верстка + - Вёрстка - Псевдоклассы translation_of: 'Web/CSS/:target' --- @@ -153,7 +153,7 @@ p:target i { cursor: pointer; } -/* Обертка lightbox */ +/* Обёртка lightbox */ .lightbox .close::before { left: 0; top: 0; diff --git a/files/ru/web/css/_colon_visited/index.html b/files/ru/web/css/_colon_visited/index.html index f4288a183b..c1b516e912 100644 --- a/files/ru/web/css/_colon_visited/index.html +++ b/files/ru/web/css/_colon_visited/index.html @@ -12,9 +12,9 @@ translation_of: 'Web/CSS/:visited' <p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:visited</code> позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило <code>:visited</code> до правила <code>:link</code>, но после других, определённых <em>LVHA-порядком</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> <div class="note style-wrap"> -<p><strong>Замечание: </strong>Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> и <code>stroke</code>. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосвященных ссылок вместо него (но если прозрачность - <code>0</code>, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосвященных ссылок).</p> +<p><strong>Замечание: </strong>Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> и <code>stroke</code>. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосвящённых ссылок вместо него (но если прозрачность - <code>0</code>, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосвящённых ссылок).</p> -<p>Несмотря на то, что цвет может меняться, метод <code>getComputedStyle</code> наврёт и всегда будет давать значение цвета непосвященных ссылок.</p> +<p>Несмотря на то, что цвет может меняться, метод <code>getComputedStyle</code> наврёт и всегда будет давать значение цвета непосвящённых ссылок.</p> <p>Для дополнительной информации об ограничениях и их причин, смотрите <a href="/ru/docs/CSS/Privacy_and_the_:visited_selector" title="/ru/docs/CSS/Privacy_and_the_:visited_selector">Приватность и селектор :visited</a>.</p> </div> diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html index 3eb34a7c0e..5a7b922577 100644 --- a/files/ru/web/css/_colon_where/index.html +++ b/files/ru/web/css/_colon_where/index.html @@ -14,13 +14,13 @@ translation_of: 'Web/CSS/:where' <div></div> <pre class="brush: css notranslate"><code>/* Выбирает любой параграф внутри header, main - или footer на который наведен курсор мыши */ + или footer на который наведён курсор мыши */ :where(header, main, footer) p:hover { color: red; cursor: pointer; } -/* Пример приведенный выше эквивалентен следующему */ +/* Пример приведённый выше эквивалентен следующему */ header p:hover, main p:hover, footer p:hover { @@ -54,7 +54,7 @@ footer p:hover { <p>В этом примере показывается как работает <code>:where()</code>, а так же демонстрируется разница между <code>:where()</code> и <code>:is()</code>.</p> -<p>Возьмем следующий HTML-код:</p> +<p>Возьмём следующий HTML-код:</p> <pre class="brush: html notranslate"><article> <h2>:is()-styled links</h2> @@ -109,7 +109,7 @@ footer p:hover { color: blue; }</pre> -<p>Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри <code>:is()</code> выше, чем специфичность селектора вышеприведенного кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.</p> +<p>Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри <code>:is()</code> выше, чем специфичность селектора вышеприведённого кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.</p> <p>В то время как, селекторы перечисленные внутри <code>:where()</code> имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.</p> diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html index 635676abae..a23502ee59 100644 --- a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html +++ b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html @@ -18,7 +18,7 @@ translation_of: 'Web/CSS/::-moz-progress-bar' <h3 id="HTML">HTML</h3> <pre class="brush:html;"><progress value="30" max="100">30%</progress> -<progress max="100">Неопределенный бар прогресса</progress></pre> +<progress max="100">Неопределённый бар прогресса</progress></pre> <h3 id="CSS">CSS</h3> @@ -26,7 +26,7 @@ translation_of: 'Web/CSS/::-moz-progress-bar' background-color: red; } -/* Задает неопределенным барам нулевую ширину */ +/* Задаёт неопределённым барам нулевую ширину */ :indeterminate::-moz-progress-bar { width: 0; }</pre> diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html index d0663700f2..34e36b8578 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.html +++ b/files/ru/web/css/_doublecolon_slotted/index.html @@ -5,16 +5,16 @@ translation_of: 'Web/CSS/::slotted' --- <div>{{ CSSRef }}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::slotted()</code></strong> представляет собой любой элемент, помещенный в слот внутри HTML-шаблона (дополнительная информация в <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>).</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдо-элемент</a> <strong><code>::slotted()</code></strong> представляет собой любой элемент, помещённый в слот внутри HTML-шаблона (дополнительная информация в <a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a>).</p> -<p>Это работает только при использовании внутри CSS, помещенного в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещенный в слот; он нацелен только на фактические элементы.</p> +<p>Это работает только при использовании внутри CSS, помещённого в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает любой элемент, помещенный в слот */ +<pre class="brush: css no-line-numbers notranslate">/* Выбирает любой элемент, помещённый в слот */ ::slotted(*) { font-weight: bold; } -/* Выбирает только <span>, помещенный в слот */ +/* Выбирает только <span>, помещённый в слот */ ::slotted(span) { font-weight: bold; } @@ -64,7 +64,7 @@ translation_of: 'Web/CSS/::slotted' } })</pre> -<p>Вы увидите, что при заполнении элемента <code>style</code> содержимым мы выбираем все slotted-элементы (<code>::slotted(*)</code>) и задаем им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые еще не были успешно заполнены.</p> +<p>Вы увидите, что при заполнении элемента <code>style</code> содержимым мы выбираем все slotted-элементы (<code>::slotted(*)</code>) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены.</p> <p>Элемент выглядит следующим образом при вставке на страницу:</p> diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.html b/files/ru/web/css/adjacent_sibling_combinator/index.html index 42893ac5e3..d5762bba46 100644 --- a/files/ru/web/css/adjacent_sibling_combinator/index.html +++ b/files/ru/web/css/adjacent_sibling_combinator/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/Adjacent_sibling_combinator --- <p>{{CSSRef("Selectors")}}</p> -<p>Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.</p> +<p>Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определённым в первой части элементом.</p> <h2 id="Синтакс">Синтакс</h2> @@ -29,7 +29,7 @@ translation_of: Web/CSS/Adjacent_sibling_combinator <p>{{EmbedLiveSample('Example_1', 200, 100)}}</p> -<p>Так же может использоваться для задания стиля определенного класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:</p> +<p>Так же может использоваться для задания стиля определённого класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:</p> <pre class="brush: css">img + span.caption { font-style: italic; diff --git a/files/ru/web/css/align-items/index.html b/files/ru/web/css/align-items/index.html index 9d5a7f5843..705ea1dea0 100644 --- a/files/ru/web/css/align-items/index.html +++ b/files/ru/web/css/align-items/index.html @@ -42,10 +42,10 @@ align-items: unset; <dt><code>normal</code></dt> <dd>Эффект этого ключевого слова зависит от режима макета, в котором мы находимся:: <ul> - <li>В абсолютно позиционированных макетах ключевое слово ведет себя как <code>start</code> в <em>замененных</em> абсолютно позиционированных блоках, и как <code>stretch</code> во <em>всех других</em> абсолютно позиционированных блоках.</li> - <li>В статическом положении абсолютно позиционированных макетов ключевое слово ведет себя как <code>stretch</code>.</li> - <li>Для гибких элементов ключевое слово ведет себя как <code>stretch</code>.</li> - <li>Для элементов сетки это ключевое слово ведет к поведению, аналогичному <code>stretch</code>, за исключением полей с соотношением сторон или внутренних размеров, где оно ведет себя как <code>start</code>.</li> + <li>В абсолютно позиционированных макетах ключевое слово ведёт себя как <code>start</code> в <em>заменённых</em> абсолютно позиционированных блоках, и как <code>stretch</code> во <em>всех других</em> абсолютно позиционированных блоках.</li> + <li>В статическом положении абсолютно позиционированных макетов ключевое слово ведёт себя как <code>stretch</code>.</li> + <li>Для гибких элементов ключевое слово ведёт себя как <code>stretch</code>.</li> + <li>Для элементов сетки это ключевое слово ведёт к поведению, аналогичному <code>stretch</code>, за исключением полей с соотношением сторон или внутренних размеров, где оно ведёт себя как <code>start</code>.</li> <li>Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.</li> </ul> </dd> diff --git a/files/ru/web/css/all/index.html b/files/ru/web/css/all/index.html index 632ac959d2..1510ac6c3b 100644 --- a/files/ru/web/css/all/index.html +++ b/files/ru/web/css/all/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/all <h2 id="Описание">Описание</h2> -<p>Сокращенное свойство CSS<em> </em><code><strong>all</strong></code> сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.</p> +<p>Сокращённое свойство CSS<em> </em><code><strong>all</strong></code> сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.</p> <p>{{cssinfo}}</p> @@ -78,7 +78,7 @@ blockquote { blockquote { background-color: skyblue; color: red; }</pre> {{EmbedLiveSample("ex0", "200", "125")}} -<p>{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определенным фоном и цветом текста. Он также ведет себя как <em>block </em>элемент<em> </em>: текст, который следует за ним, находится под ним.</p> +<p>{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определённым фоном и цветом текста. Он также ведёт себя как <em>block </em>элемент<em> </em>: текст, который следует за ним, находится под ним.</p> </div> <div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;"> diff --git a/files/ru/web/css/angle/index.html b/files/ru/web/css/angle/index.html index 782c6c4fe5..c4a228aca3 100644 --- a/files/ru/web/css/angle/index.html +++ b/files/ru/web/css/angle/index.html @@ -46,7 +46,7 @@ translation_of: Web/CSS/angle </tr> <tr> <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td> - <td>Развернутый угол: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td> + <td>Развёрнутый угол: <code>180deg = 200grad = 0.5turn</code><code> </code><code style="white-space: nowrap;">≈</code><code> 3.1416rad</code></td> </tr> <tr> <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td> diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html index 55e5c537eb..48c0109f18 100644 --- a/files/ru/web/css/animation-delay/index.html +++ b/files/ru/web/css/animation-delay/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/animation-delay <p>Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.</p> -<p>При указании отрицательного значения, анимация также начнется непременно, но ее воспроизведение начнется не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.</p> +<p>При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/animation-direction/index.html b/files/ru/web/css/animation-direction/index.html index 52d0de3720..f07376ed79 100644 --- a/files/ru/web/css/animation-direction/index.html +++ b/files/ru/web/css/animation-direction/index.html @@ -7,9 +7,9 @@ translation_of: Web/CSS/animation-direction <h2 id="Описание">Описание</h2> -<p>CSS-свойство <strong><code>animation-direction</code></strong> определяет, должна ли анимация воспроизводиться вперед, назад или переменно вперед и назад.<br> +<p>CSS-свойство <strong><code>animation-direction</code></strong> определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.<br> <br> - <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Также удобно использовать сокращенное свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.</span></p> + <span style="font-size: 1rem; letter-spacing: -0.00278rem;">Также удобно использовать сокращённое свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.</span></p> <p>{{cssinfo}}</p> @@ -35,7 +35,7 @@ animation-direction: unset; <dl> <dt><code>normal</code></dt> - <dd>Анимация проигрывается вперед каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в <em>начальное </em>положение и снова проигрывается. Это значение по умолчанию.</dd> + <dd>Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в <em>начальное </em>положение и снова проигрывается. Это значение по умолчанию.</dd> <dt><code>reverse</code></dt> <dd>Анимация проигрывается наоборот, с <em>последнего </em>положения до первого и потом снова сбрасывается в <em>конечное </em>положение и снова проигрывается.</dd> <dt><code>alternate</code></dt> diff --git a/files/ru/web/css/animation-duration/index.html b/files/ru/web/css/animation-duration/index.html index 7ca194463f..65e47aea2b 100644 --- a/files/ru/web/css/animation-duration/index.html +++ b/files/ru/web/css/animation-duration/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/animation-duration <p>Значение по умолчанию <strong><code>0s</code> </strong>определяет, что анимация не должна выполняться.</p> -<p>Удобно использовать сокращенное свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.</p> +<p>Удобно использовать сокращённое свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html index 2549e3ac2d..855d8dad42 100644 --- a/files/ru/web/css/animation-fill-mode/index.html +++ b/files/ru/web/css/animation-fill-mode/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/animation-fill-mode <h2 id="Описание">Описание</h2> -<p><a href="/en/CSS" title="CSS">CSS</a> свойство <strong><code>animation-fill-mode</code></strong> определяет, как нужно применять стили к объекту анимации до и после ее выполнения.</p> +<p><a href="/en/CSS" title="CSS">CSS</a> свойство <strong><code>animation-fill-mode</code></strong> определяет, как нужно применять стили к объекту анимации до и после её выполнения.</p> <p>{{cssinfo}}</p> @@ -32,7 +32,7 @@ animation-fill-mode: both, forwards, none; <dl> <dt><code>none</code></dt> - <dd>Стили анимации не будут применены к элементу до и после ее выполнения.</dd> + <dd>Стили анимации не будут применены к элементу до и после её выполнения.</dd> <dt><code>forwards</code></dt> <dd>По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}: <table class="standard-table"> @@ -56,22 +56,22 @@ animation-fill-mode: both, forwards, none; </tr> <tr> <td><code>alternate</code></td> - <td>четное</td> + <td>чётное</td> <td><code>0%</code> или <code>from</code></td> </tr> <tr> <td><code>alternate</code></td> - <td>нечетное</td> + <td>нечётное</td> <td><code>100%</code> или <code>to</code></td> </tr> <tr> <td><code>alternate-reverse</code></td> - <td>четное</td> + <td>чётное</td> <td><code>100%</code> или <code>to</code></td> </tr> <tr> <td><code>alternate-reverse</code></td> - <td>нечетное</td> + <td>нечётное</td> <td><code>0%</code> или <code>from</code></td> </tr> </tbody> @@ -114,8 +114,8 @@ animation-fill-mode: both, forwards, none; <pre class="brush: html"><p>Наведите курсор мыши на серый блок</p> <div class="demo"> - <div class="grows">Этот просто растет</div> - <div class="growsandstays">Этот растет и остается большим</div> + <div class="grows">Этот просто растёт</div> + <div class="growsandstays">Этот растёт и остаётся большим</div> </div></pre> <h3 id="CSS">CSS</h3> diff --git a/files/ru/web/css/animation-iteration-count/index.html b/files/ru/web/css/animation-iteration-count/index.html index 653e843e65..9039dcfedb 100644 --- a/files/ru/web/css/animation-iteration-count/index.html +++ b/files/ru/web/css/animation-iteration-count/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/animation-iteration-count <p><a href="/ru/CSS" title="CSS">CSS</a><code><font face="Open Sans, Arial, sans-serif"> свойство </font><strong>animation-iteration-count</strong></code> определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.</p> -<p>Наиболее удобно использовать это свойство в сокращенном варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.</p> +<p>Наиболее удобно использовать это свойство в сокращённом варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.</p> <p>{{cssinfo}}</p> @@ -36,7 +36,7 @@ animation-iteration-count: 2, 0, infinite; <dt><code>infinite</code></dt> <dd>Анимация повторяется бесконечно.</dd> <dt><code><number></code></dt> - <dd>Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).</dd> + <dd>Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведёт половину анимационного цикла).</dd> </dl> <h3 id="Правила_синтаксиса">Правила синтаксиса</h3> diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html index 2e6ff16b28..a81e2e82d6 100644 --- a/files/ru/web/css/animation-name/index.html +++ b/files/ru/web/css/animation-name/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/animation-name -<p>Часто удобно использовать сокращенное свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.</p> +<p>Часто удобно использовать сокращённое свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -40,7 +40,7 @@ animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a> <dt><code>none</code></dt> <dd>Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.</dd> <dt>{{cssxref("custom-ident","<custom-ident>")}}</dt> - <dd>Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учета регистра от <code>a</code> до <code>z</code>, цифр от <code>0</code> до <code>9</code>, подчеркивания (<code>_</code>), и/или черты (<code>-</code>). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть <code>none</code>, <code>unset</code>, <code>initial</code>, или <code>inherit</code> в любой комбинации случаев.</dd> + <dd>Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учёта регистра от <code>a</code> до <code>z</code>, цифр от <code>0</code> до <code>9</code>, подчёркивания (<code>_</code>), и/или черты (<code>-</code>). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть <code>none</code>, <code>unset</code>, <code>initial</code>, или <code>inherit</code> в любой комбинации случаев.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/animation-play-state/index.html b/files/ru/web/css/animation-play-state/index.html index 293765d1e9..fc92ee5605 100644 --- a/files/ru/web/css/animation-play-state/index.html +++ b/files/ru/web/css/animation-play-state/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/animation-play-state <p>Свойство <strong><code>animation-play-state</code></strong> определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.</p> -<p>Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнется с начала.</p> +<p>Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнётся с начала.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html index 5b4d0660b6..5e0e2e857d 100644 --- a/files/ru/web/css/animation-timing-function/index.html +++ b/files/ru/web/css/animation-timing-function/index.html @@ -50,7 +50,7 @@ translation_of: Web/CSS/animation-timing-function <dl> <dt><code><timingfunction></code></dt> - <dd>Каждый {{cssxref("<timing-function>")}} представляет функцию расчета времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.</dd> + <dd>Каждый {{cssxref("<timing-function>")}} представляет функцию расчёта времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html index 3ae986fbd9..b84ac013b4 100644 --- a/files/ru/web/css/appearance/index.html +++ b/files/ru/web/css/appearance/index.html @@ -2624,7 +2624,7 @@ div{ color: black; <h2 id="Примеры">Примеры</h2> -<p>Нижеприведенный пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:</p> +<p>Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:</p> <pre class="brush: css">.exampleone { -moz-appearance: toolbarbutton; diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html index 38cf88c874..f318aebe28 100644 --- a/files/ru/web/css/at-rule/index.html +++ b/files/ru/web/css/at-rule/index.html @@ -18,17 +18,17 @@ translation_of: Web/CSS/At-rule <ul> <li>{{cssxref("@charset")}} — Определяет кодировку символов, используемый таблицей стилей.</li> <li>{{cssxref("@import")}} — Сообщает движку CSS включить внешнюю таблицу стилей.</li> - <li>{{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.</li> + <li>{{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имён XML.</li> <li><strong><em>Вложенные at-правила</em></strong> — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы. <ul> - <li>{{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенного с помощью медиавыражения.</li> + <li>{{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определённого с помощью медиавыражения.</li> <li>{{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.</li> <li>{{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.</li> - <li>{{cssxref("@page")}} — Описывает аспект изменений макета, который будет применен при печати документа.</li> + <li>{{cssxref("@page")}} — Описывает аспект изменений макета, который будет применён при печати документа.</li> <li>{{cssxref("@font-face")}} — Описывает аспект внешнего шрифта для загрузки.</li> <li>{{cssxref("@keyframes")}} — Описывает аспект промежуточных шагов в последовательности анимации CSS.</li> <li>{{cssxref("@viewport")}} {{experimental_inline}} — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)</li> - <li>{{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределенного набора стилей.</li> + <li>{{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределённого набора стилей.</li> <li>{{cssxref("@font-feature-values")}} (плюс <code>@swash</code>, <code>@ornaments</code>, <code>@annotation</code>, <code>@stylistic</code>, <code>@styleset</code> и <code>@character-variant</code>)<br> — Определите общие имена в {{cssxref("font-option-alternates")}} для функции, которая по-разному активируется в OpenType <em>(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)</em></li> </ul> @@ -45,7 +45,7 @@ translation_of: Web/CSS/At-rule <li>{{cssxref("@document")}}. <em>(deferred to Level 4 of CSS Spec) </em></li> </ul> -<p>Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределенное количество вложений.</p> +<p>Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределённое количество вложений.</p> <h2 id="Характеристики">Характеристики</h2> diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html index 2b8ac3861c..f2affc9d98 100644 --- a/files/ru/web/css/attribute_selectors/index.html +++ b/files/ru/web/css/attribute_selectors/index.html @@ -15,15 +15,15 @@ translation_of: Web/CSS/Attribute_selectors <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> <dd>Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.</dd> <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> - <dd>Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value</dd> + <dd>Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value</dd> <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> <dd>Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.</dd> <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> <dd>Обозначает элемент с именем атрибута attr значение которого начинается с "value"</dd> <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> - <dd>Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"</dd> + <dd>Обозначает элемент с именем атрибута attr чьё значение заканчивается на "value"</dd> <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> - <dd>Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.</dd> + <dd>Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки "value" как подстроки.</dd> </dl> <h2 id="Example" name="Example">Пример</h2> @@ -31,13 +31,13 @@ translation_of: Web/CSS/Attribute_selectors <pre class="brush: css">/* Все span с атрибутом "lang" будут жирными */ span[lang] {font-weight:bold;} -/* Все span в Португалии будут зелеными */ +/* Все span в Португалии будут зелёными */ span[lang="pt"] {color:green;} /* Все span с американским английским будут синими */ span[lang~="en-us"] {color: blue;} -/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */ +/* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) */ span[lang|="zh"] {color: red;} /* Все внутренние ссылки будут иметь золотой фон */ diff --git a/files/ru/web/css/backdrop-filter/index.html b/files/ru/web/css/backdrop-filter/index.html index b971c15abd..48b9e9cc09 100644 --- a/files/ru/web/css/backdrop-filter/index.html +++ b/files/ru/web/css/backdrop-filter/index.html @@ -41,9 +41,9 @@ translation_of: Web/CSS/backdrop-filter <dl> <dt><code>none</code></dt> - <dd>Фильтр отключен для фона</dd> + <dd>Фильтр отключён для фона</dd> <dt><code><filter-function-list></code></dt> - <dd>Перечень фильтров, разделенных пробелами функций {{cssxref("<filter-function>")}} или <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">SVG фильтра</a>, которые применены для фона.</dd> + <dd>Перечень фильтров, разделённых пробелами функций {{cssxref("<filter-function>")}} или <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">SVG фильтра</a>, которые применены для фона.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/backface-visibility/index.html b/files/ru/web/css/backface-visibility/index.html index f6bf261e3b..870c9de709 100644 --- a/files/ru/web/css/backface-visibility/index.html +++ b/files/ru/web/css/backface-visibility/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/backface-visibility --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p>Свойство <strong><code>backface-visibility</code></strong> определяет, видно ли заднюю грань элемента, когда он повернут к пользователю.</p> +<p>Свойство <strong><code>backface-visibility</code></strong> определяет, видно ли заднюю грань элемента, когда он повёрнут к пользователю.</p> <div>{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}</div> @@ -30,9 +30,9 @@ backface-visibility: unset;</pre> <dl> <dt><code>visible</code></dt> - <dd>Задняя сторона видна, когда повернута к пользователю.</dd> + <dd>Задняя сторона видна, когда повёрнута к пользователю.</dd> <dt><code>hidden</code></dt> - <dd>Задняя поверхность скрыта, что делает элемент невидимым, когда он повернутый от пользователя.</dd> + <dd>Задняя поверхность скрыта, что делает элемент невидимым, когда он повёрнутый от пользователя.</dd> </dl> <h3 id="Официальный_синтаксис">Официальный синтаксис</h3> diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html index c88a2fc71d..d16e4fe743 100644 --- a/files/ru/web/css/background-attachment/index.html +++ b/files/ru/web/css/background-attachment/index.html @@ -28,7 +28,7 @@ background-attachment: inherit; background-attachment: initial; background-attachment: unset;</pre> -<p>Значение свойства <code>background-attachment</code> задается одним из ключевых значений из списка ниже.</p> +<p>Значение свойства <code>background-attachment</code> задаётся одним из ключевых значений из списка ниже.</p> <h3 id="Значения">Значения</h3> @@ -38,7 +38,7 @@ background-attachment: unset;</pre> <dt><code>local</code></dt> <dd>Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.</dd> <dt><code>scroll</code></dt> - <dd>Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплен к границе элемента.)</dd> + <dd>Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -72,7 +72,7 @@ background-attachment: unset;</pre> <h3 id="Поддержка_нескольких_фоновых_изображений">Поддержка нескольких фоновых изображений</h3> -<p>Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <code><attachment></code> для каждого фона, разделенных запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.</p> +<p>Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <code><attachment></code> для каждого фона, разделённых запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.</p> <h4 id="HTML_2">HTML</h4> @@ -118,7 +118,7 @@ background-attachment: unset;</pre> <tr> <td>{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}</td> <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Сокращенное свойство было расширено для поддержки нескольких фонов и значения <code>local</code>.</td> + <td>Сокращённое свойство было расширено для поддержки нескольких фонов и значения <code>local</code>.</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}</td> diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html index e55a99aa83..405a76ed14 100644 --- a/files/ru/web/css/background-blend-mode/index.html +++ b/files/ru/web/css/background-blend-mode/index.html @@ -29,7 +29,7 @@ background-blend-mode: unset; <dl> <dt><code><blend-mode></code></dt> - <dd>{{cssxref("<blend-mode>")}} обозначающий режим наложения, который применен. Может быть несколько значений, разделенных запятыми.</dd> + <dd>{{cssxref("<blend-mode>")}} обозначающий режим наложения, который применён. Может быть несколько значений, разделённых запятыми.</dd> </dl> <h2 id="Examples" name="Examples">Пример</h2> diff --git a/files/ru/web/css/background-clip/index.html b/files/ru/web/css/background-clip/index.html index ddc05598eb..7c7f5bc3dc 100644 --- a/files/ru/web/css/background-clip/index.html +++ b/files/ru/web/css/background-clip/index.html @@ -112,7 +112,7 @@ background-clip: unset;</code></pre> <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Свойство {{cssxref("clip-path")}} создает область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.</li> + <li>Свойство {{cssxref("clip-path")}} создаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.</li> <li>Свойства фона: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model">Введение в блочную модель CSS</a></li> </ul> diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html index 095ff8ee1e..cdcf7b8c79 100644 --- a/files/ru/web/css/background-image/index.html +++ b/files/ru/web/css/background-image/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/background-image <p>Свойство <a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a> <strong><code>background-image</code></strong> устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.</p> -<p><a href="/ru/CSS/border" title="border">Границы</a> {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и ее границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.</p> +<p><a href="/ru/CSS/border" title="border">Границы</a> {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.</p> -<p>Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением <code>none</code>.</p> +<p>Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением <code>none</code>.</p> <div class="note"><strong>Обратите внимание:</strong> Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.</div> @@ -36,7 +36,7 @@ background-image: inherit; <dt><code>none</code></dt> <dd>Это ключевое слово обозначает отсутствие изображений.</dd> <dt><code><image></code></dt> - <dd>{{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается<a href="/ru/docs/CSS/Multiple_backgrounds" title="Multiple backgrounds"> несколько фонов</a>.</dd> + <dd>{{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживается<a href="/ru/docs/CSS/Multiple_backgrounds" title="Multiple backgrounds"> несколько фонов</a>.</dd> </dl> <h3 id="Официальный_синтаксис">Официальный синтаксис</h3> diff --git a/files/ru/web/css/background-position-x/index.html b/files/ru/web/css/background-position-x/index.html index 3aaa1af51e..ffebd13721 100644 --- a/files/ru/web/css/background-position-x/index.html +++ b/files/ru/web/css/background-position-x/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/background-position-x -<p>Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} примененными после его объявления.</p> +<p>Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применёнными после его объявления.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> @@ -41,7 +41,7 @@ background-position-x: initial; background-position-x: unset; </pre> -<p>Свойство <code>background-position-x</code> принимает одно или несколько значений, разделенных запятыми.</p> +<p>Свойство <code>background-position-x</code> принимает одно или несколько значений, разделённых запятыми.</p> <h3 id="Значения">Значения</h3> diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html index dcd216c010..97620ff7d2 100644 --- a/files/ru/web/css/background-position/index.html +++ b/files/ru/web/css/background-position/index.html @@ -43,7 +43,7 @@ background-position: initial; background-position: unset; </pre> -<p>Свойство <code>background-position</code> указывается в виде одного или нескольких значений <code><a href="#<position>"><position></a></code>, разделенных запятыми.</p> +<p>Свойство <code>background-position</code> указывается в виде одного или нескольких значений <code><a href="#<position>"><position></a></code>, разделённых запятыми.</p> <h3 id="Values" name="Values">Значения</h3> @@ -83,7 +83,7 @@ background-position: unset; <h2 id="Examples" name="Examples">Примеры</h2> -<p>Каждый из этих примеров использует свойство {{cssxref("background")}} для создания желтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.</p> +<p>Каждый из этих примеров использует свойство {{cssxref("background")}} для создания жёлтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.</p> <h3 id="HTML">HTML</h3> @@ -102,7 +102,7 @@ div { margin-bottom: 12px; } -/* В этих примерах используется сокращенное свойство 'background' */ +/* В этих примерах используется сокращённое свойство 'background' */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat; } diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html index 76eb8e36a1..ad4d0bffd0 100644 --- a/files/ru/web/css/background-repeat/index.html +++ b/files/ru/web/css/background-repeat/index.html @@ -177,7 +177,7 @@ div { <tr> <td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td> <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов <code>space</code> и <code>round</code>, а также для фона на элементе на уровне строки путем точного определения области рисования фона.</td> + <td>Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов <code>space</code> и <code>round</code>, а также для фона на элементе на уровне строки путём точного определения области рисования фона.</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td> diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html index f93b74acd7..71c948b9e4 100644 --- a/files/ru/web/css/background-size/index.html +++ b/files/ru/web/css/background-size/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/background-size <p>Значение <strong><code>background-size</code></strong> в <a href="/en-US/docs/CSS" title="CSS">CSS</a> позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.</p> -<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращенном свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращенного свойства.</div> +<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.</div> <p>{{cssinfo}}</p> @@ -68,7 +68,7 @@ background-size: unset; <p>Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.</p> -<div class="note"><strong>Предупреждение:</strong> Это не определенное в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.</div> +<div class="note"><strong>Предупреждение:</strong> Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.</div> <p>Визуализированный размер фонового изображения затем вычисляется следующим способом:</p> @@ -76,14 +76,14 @@ background-size: unset; <dt><font face="Open Sans, Arial, sans-serif">Если оба атрибута в </font><code>background-size</code> заданы и различны от <code>auto</code>:</dt> <dd>Фоновое изображение отображается в указанном размере.</dd> <dt>Если <code>background-size</code> содержит <code>contain</code> или <code>cover</code>:</dt> - <dd>Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает ее. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.</dd> + <dd>Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.</dd> <dt>Если <code>background-size</code> установлен как <code>auto</code> или <code>auto auto</code>:</dt> - <dd>Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан <code>contain</code>. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определенным этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.</dd> + <dd>Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан <code>contain</code>. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.</dd> <dt>Если background-size содержит один атрибут <code>auto</code> и один не-<code>auto</code>:</dt> <dd>Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.</dd> </dl> -<p>Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, еще не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.</p> +<p>Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.</p> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -95,7 +95,7 @@ background-size: unset; <h2 id="Замечания">Замечания</h2> -<p>Если вы указываете градиент в качестве фона и указали <code>background-size</code>, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задается с использованием только значения ширины (для примера, <code>background-size: 50%</code>). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 спецификацией <code>background-size</code> </a>и с <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 спецификацией градиента значений изображения</a>.</p> +<p>Если вы указываете градиент в качестве фона и указали <code>background-size</code>, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, <code>background-size: 50%</code>). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 спецификацией <code>background-size</code> </a>и с <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 спецификацией градиента значений изображения</a>.</p> <pre class="brush: css">.bar { width: 50px; height: 100px; diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html index 7b39d9589c..fafdb12cc3 100644 --- a/files/ru/web/css/background/index.html +++ b/files/ru/web/css/background/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/background --- <div>{{CSSRef("CSS Background")}}</div> -<div>Сокращенное <a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background</code></strong> устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.</div> +<div>Сокращённое <a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background</code></strong> устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.</div> <div></div> @@ -15,7 +15,7 @@ translation_of: Web/CSS/background <p>Свойство является <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращением,</a> которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.</p> -<p>Как и во всех сокращенных свойствах, любые пропущенные вложенные значения будут установлены в свои <a href="/en-US/docs/Web/CSS/initial_value">изначальные значения</a>.</p> +<p>Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои <a href="/en-US/docs/Web/CSS/initial_value">изначальные значения</a>.</p> @@ -54,7 +54,7 @@ background: no-repeat center/80% url("../img/image.png"); <dt><code><repeat-style></code></dt> <dd>Смотри {{cssxref("background-repeat")}}</dd> <dt><code><bg-size></code></dt> - <dd>Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <strong><position></strong>, разделенного символом '/'.</dd> + <dd>Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <strong><position></strong>, разделённого символом '/'.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/block-size/index.html b/files/ru/web/css/block-size/index.html index 413705bb6d..c7d9f6ada4 100644 --- a/files/ru/web/css/block-size/index.html +++ b/files/ru/web/css/block-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/block-size --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p>Свойство <strong><code>block-size</code></strong> <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> задает горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.</p> +<p>Свойство <strong><code>block-size</code></strong> <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.</p> <pre class="brush:css no-line-numbers">/* <length> values */ block-size: 300px; @@ -37,7 +37,7 @@ block-size: initial; block-size: unset; </pre> -<p>Если режим записи (writing mode) ориентирован по вертикали, то значение <code> block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задает другое измерение элемента.</code></p> +<p>Если режим записи (writing mode) ориентирован по вертикали, то значение <code> block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задаёт другое измерение элемента.</code></p> <p><code>{{cssinfo}}</code></p> @@ -92,7 +92,7 @@ block-size: unset; <h2 id="Совместимость_с_браузерами"><code>Совместимость с браузерами</code></h2> -<div class="hidden"><code>Таблица совместимости на этой странице создается на основе структурированных данных. Если вы хотите внести свой вклад в разработку, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам соответствующий запрос.</code></div> +<div class="hidden"><code>Таблица совместимости на этой странице создаётся на основе структурированных данных. Если вы хотите внести свой вклад в разработку, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам соответствующий запрос.</code></div> <p><code>{{Compat("css.properties.block-size")}}</code></p> diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html index 9841ac6e97..4a7890a181 100644 --- a/files/ru/web/css/border-image-slice/index.html +++ b/files/ru/web/css/border-image-slice/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-image-slice <h2 id="Описание">Описание</h2> -<p>CSS свойство <strong><code>border-image-slice</code></strong> делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путем указания 4 внутренних смещений.</p> +<p>CSS свойство <strong><code>border-image-slice</code></strong> делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.</p> <p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.</p> diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html index 3a597a4b3b..d08dd0e681 100644 --- a/files/ru/web/css/border-radius/index.html +++ b/files/ru/web/css/border-radius/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-radius --- <div>{{CSSRef}}</div> -<p><strong><code>border-radius</code></strong> — это <a href="/ru/docs/Web/CSS">CSS</a>-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закругленность каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.</p> +<p><strong><code>border-radius</code></strong> — это <a href="/ru/docs/Web/CSS">CSS</a>-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.</p> <div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div> @@ -22,7 +22,7 @@ translation_of: Web/CSS/border-radius <p>Свойство <code>border-radius</code> не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение <code>collapse</code>.</p> -<div class="note"><strong>Замечание:</strong> Как и с любым другим сокращенным свойством, отдельные подсвойства не могут наследоваться. Например, как в <code>border-radius:0 0 inherit inherit</code>, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.</div> +<div class="note"><strong>Замечание:</strong> Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в <code>border-radius:0 0 inherit inherit</code>, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.</div> <h2 id="Синтаксис">Синтаксис</h2> @@ -39,7 +39,7 @@ border-radius: 2px 4px 2px; /* <em>top-left</em> | <em>top-right</em> | <em>bottom-right</em> | <em>bottom-left</em> */ border-radius: 1px 0 3px 4px; -<strong>/* Синтаксис из двух радиусов также может применяться ко всем четырем углам */</strong> +<strong>/* Синтаксис из двух радиусов также может применяться ко всем четырём углам */</strong> /* (первые значения радиуса) /<em>радиус</em> */ border-radius: 10px 5% / 20px; diff --git a/files/ru/web/css/border-width/index.html b/files/ru/web/css/border-width/index.html index 05b2360748..19fe6770ab 100644 --- a/files/ru/web/css/border-width/index.html +++ b/files/ru/web/css/border-width/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-width <h2 id="Summary">Summary</h2> -<p>CSS свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p> +<p>CSS свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html index 6ae7e6460b..93ce8b8020 100644 --- a/files/ru/web/css/border/index.html +++ b/files/ru/web/css/border/index.html @@ -25,7 +25,7 @@ border: medium dashed green; <p> </p> <div class="note style-wrap"> -<p><strong>Замечание:</strong> Рекомендуется использовать <code>border</code>, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}} принимают до четырех значений, позволяя установить различные значения для каждого ребра, <code>border</code> принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.</p> +<p><strong>Замечание:</strong> Рекомендуется использовать <code>border</code>, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}} принимают до четырёх значений, позволяя установить различные значения для каждого ребра, <code>border</code> принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.</p> </div> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html index c0190058df..5ecde8ca47 100644 --- a/files/ru/web/css/bottom/index.html +++ b/files/ru/web/css/bottom/index.html @@ -150,7 +150,7 @@ div { <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> <div> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("css.properties.bottom")}}</p> </div> diff --git a/files/ru/web/css/box-shadow/index.html b/files/ru/web/css/box-shadow/index.html index b50dded28d..3366118622 100644 --- a/files/ru/web/css/box-shadow/index.html +++ b/files/ru/web/css/box-shadow/index.html @@ -53,7 +53,7 @@ box-shadow: unset; <ul> <li>Если задано только два значения, они интерпретируется как <code><a href="#<offset-x> <offset-y>"><offset-x><offset-y></a></code> values.</li> <li>Если задано третье значение, оно понимается как <code><a href="#<blur-radius>"><blur-radius></a></code>.</li> - <li>Если задано четвертое значение, оно интерпретируется <code><a href="#<spread-radius>"><spread-radius></a></code>.</li> + <li>Если задано четвёртое значение, оно интерпретируется <code><a href="#<spread-radius>"><spread-radius></a></code>.</li> </ul> </li> <li>Дополнительно, можно задать ключевое слово <code><a href="#inset">inset</a></code>.</li> diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html index f0d5760e9e..72dda8d87a 100644 --- a/files/ru/web/css/box-sizing/index.html +++ b/files/ru/web/css/box-sizing/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/box-sizing <dl> <dt><code>content-box</code></dt> - <dd>Это значение по умолчанию, определенное в CSS стандарте. Свойства <a href="/ru/docs/Web/CSS/width">width</a> и <a href="/ru/docs/Web/CSS/height">height</a> включают исключительно контент, и не включают <a href="/ru/docs/Web/CSS/padding">padding</a> и <a href="/ru/docs/Web/CSS/border">border</a>. Например <code>.box {width: 350px; border: 10px solid black;}</code> будет иметь ширину 370 пикселей.</dd> + <dd>Это значение по умолчанию, определённое в CSS стандарте. Свойства <a href="/ru/docs/Web/CSS/width">width</a> и <a href="/ru/docs/Web/CSS/height">height</a> включают исключительно контент, и не включают <a href="/ru/docs/Web/CSS/padding">padding</a> и <a href="/ru/docs/Web/CSS/border">border</a>. Например <code>.box {width: 350px; border: 10px solid black;}</code> будет иметь ширину 370 пикселей.</dd> <dd>Размеры элемента рассчитываются следующим образом: <em>width = ширина контента</em>, и <em>height = высота контента</em>. (Границы и внутренние отступы не включаются в вычисление.)</dd> </dl> diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html index 5dd08d22f0..550760de0a 100644 --- a/files/ru/web/css/calc()/index.html +++ b/files/ru/web/css/calc()/index.html @@ -44,7 +44,7 @@ translation_of: Web/CSS/calc() <h3 id="Позиционирование_объекта_в_окне_с_помощью_отступа">Позиционирование объекта в окне с помощью отступа</h3> -<p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создается баннер занимающий в ширину все окно с отступами по краям в 40px. </p> +<p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. </p> <pre class="brush: css notranslate">.banner { position: absolute; diff --git a/files/ru/web/css/class_selectors/index.html b/files/ru/web/css/class_selectors/index.html index 714ac4588e..99c15c63d6 100644 --- a/files/ru/web/css/class_selectors/index.html +++ b/files/ru/web/css/class_selectors/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Class_selectors <h2 id="Summary" name="Summary">Краткое описание</h2> -<p>В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделенный пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведенному в селекторе.</p> +<p>В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/css/clear/index.html b/files/ru/web/css/clear/index.html index 241ee74c7a..146132dfe3 100644 --- a/files/ru/web/css/clear/index.html +++ b/files/ru/web/css/clear/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/clear <p>Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">контексте форматирования блоков</a>. </p> <div class="note"> -<p><strong>Заметка:</strong> Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется <strong>clearfix,</strong> и один из способов сделать это - это заменит <code>clear</code> замененный {{cssxref("::after")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> на нем.</p> +<p><strong>Заметка:</strong> Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется <strong>clearfix,</strong> и один из способов сделать это - это заменит <code>clear</code> заменённый {{cssxref("::after")}} <a href="/en-US/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> на нем.</p> <pre class="brush: css">#container::after { content: ""; @@ -224,7 +224,7 @@ p { <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("css.properties.clear")}}</p> diff --git a/files/ru/web/css/clip-path/index.html b/files/ru/web/css/clip-path/index.html index 69fe7f99ed..55a8b1259a 100644 --- a/files/ru/web/css/clip-path/index.html +++ b/files/ru/web/css/clip-path/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/clip-path --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>clip-path</strong></code> создает ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (<code><a href="https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle">circle()</a></code>).</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code><strong>clip-path</strong></code> создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг (<code><a href="https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle">circle()</a></code>).</p> <div class="note"> <p><strong>Историческая справка:</strong> Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .</p> @@ -456,14 +456,14 @@ svg text.em { <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt> <dd>Функция {{cssxref("<basic-shape>")}}. Размер и положение области определяется значением <code><geometry-box></code>. Если геометрия не определена,<code>border-box</code> будет использоваться в качестве блока.</dd> <dt><code><geometry-box></code></dt> - <dd>Если определен в комбинации с <code><basic-shape></code>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений: + <dd>Если определён в комбинации с <code><basic-shape></code>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений: <dl> <dt><code>fill-box</code></dt> <dd>Использует границы объекта в качестве базовой области.</dd> <dt><code>stroke-box</code></dt> <dd>Использует stroke bounding box в качестве базовой области.</dd> <dt><code>view-box</code></dt> - <dd>Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.</dd> + <dd>Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определён для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.</dd> <dt><code>margin-box</code></dt> <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> в качестве базового блока.</dd> <dt><code>border-box</code></dt> diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html index 08edbe380a..9af9b77755 100644 --- a/files/ru/web/css/color_value/index.html +++ b/files/ru/web/css/color_value/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/color_value <p>В <code><color></code> может быть определена любым из следующих способов can.</p> <ul> - <li>Использование или подключенного свойства веденного в параметр (например, <code>blue</code> или <code>transparent</code>)</li> + <li>Использование или подключённого свойства ведённого в параметр (например, <code>blue</code> или <code>transparent</code>)</li> <li>Использование <a href="https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">кубической системы координат RGB</a> (via the #-hexadecimal or the <code>rgb()</code> and <code>rgba()</code> functional notations)<img alt="Цветовая модель представлена виде куба" src="https://en.wikipedia.org/wiki/RGB_color_model#/media/File:RGB_color_solid_cube.png" style="height: 200px; width: 200px;"></li> <li>Использование <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">цилиндрической системы координат HSL</a> (через функциональные обозначения <code>hsl()</code> и <code>hsla()</code>) </li> </ul> @@ -21,7 +21,7 @@ translation_of: Web/CSS/color_value <h2 id="Синтаксис">Синтаксис </h2> -<p>Для типа данных задается <code><color></code> с помощью одного из следующих параметров.</p> +<p>Для типа данных задаётся <code><color></code> с помощью одного из следующих параметров.</p> <div class="note"> <p><strong>Заметка:</strong> значения <code><color></code> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили <a href="https://en.wikipedia.org/wiki/ICC_profile">устройств вывода</a>.</p> @@ -29,12 +29,12 @@ translation_of: Web/CSS/color_value <h3 id="Ключевые_цвета">Ключевые цвета</h3> -<p>Ключевые слова для цвета - это идентификаторы без учета регистра, представляющие определенный цвет, например <code>red</code>, <code>blue</code>, <code>black</code> или <code>lightseagreen</code>. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. </p> +<p>Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например <code>red</code>, <code>blue</code>, <code>black</code> или <code>lightseagreen</code>. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имен. </p> <p>Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:</p> <ul> - <li><a href="/en-US/docs/Web/HTML">HTML</a> распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определенный алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и <a href="/en-US/docs/Web/SVG">SVG</a>.</li> + <li><a href="/en-US/docs/Web/HTML">HTML</a> распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и <a href="/en-US/docs/Web/SVG">SVG</a>.</li> <li>В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.</li> <li>Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.</li> <li>Несколько ключевых слов являются псевдонимами друг для друга: @@ -977,11 +977,11 @@ translation_of: Web/CSS/color_value <p>Ключевое слово <code>transparent</code> представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически <code>transparent </code>- это ярлык для <code>rgba (0,0,0,0)</code>.</p> <div class="note"> -<p><strong>Примечание по совместимости:</strong> чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что <code>transparent</code> должен быть вычислен в <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">Альфа-предварительно умноженном цветовом пространстве</a>. Однако имейте в виду, что старые браузеры могут рассматривать его как черный с Альфа-значением <code>0</code>.</p> +<p><strong>Примечание по совместимости:</strong> чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что <code>transparent</code> должен быть вычислен в <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax">Альфа-предварительно умноженном цветовом пространстве</a>. Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением <code>0</code>.</p> </div> <div class="note"> -<p><strong>Историческая запись:</strong> <code>transparent</code> не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <code><color></code> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, <code>transparent </code>был переопределен как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <code><color></code>.</p> +<p><strong>Историческая запись:</strong> <code>transparent</code> не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <code><color></code> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, <code>transparent </code>был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <code><color></code>.</p> </div> <h3 id="currentColor_ключевое_слово"><code><a id="currentColor" name="currentColor">currentColor</a></code> ключевое слово</h3> @@ -1002,7 +1002,7 @@ translation_of: Web/CSS/color_value <h3 id="RGB_цвет">RGB цвет</h3> -<p>Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелеными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.</p> +<p>Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.</p> <h4 id="Синтаксис">Синтаксис</h4> @@ -1014,13 +1014,13 @@ translation_of: Web/CSS/color_value <dl> <dt>Шестнадцатеричное представление: <code>#RRGGBB[AA]</code></dt> - <dd><code>R</code> (red), <code>G</code> (green), <code>B</code> (blue), and <code>A</code> (alpha) are hexadecimal characters (0-9, A-F). <code>A</code> is optional. For example, <code>#ff0000</code> is equivalent to <code>#ff0000ff</code>. <code>R</code> (красный), G (зеленый), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, <code>#ff0000</code> эквивалентно<code> #ff0000ff</code>.</dd> + <dd><code>R</code> (red), <code>G</code> (green), <code>B</code> (blue), and <code>A</code> (alpha) are hexadecimal characters (0-9, A-F). <code>A</code> is optional. For example, <code>#ff0000</code> is equivalent to <code>#ff0000ff</code>. <code>R</code> (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, <code>#ff0000</code> эквивалентно<code> #ff0000ff</code>.</dd> <dt>Шестнадцатеричное представление: <code>#RGB[A]</code></dt> - <dd><code>R</code> (красный), <code>G</code> (зеленый), <code>B</code> (синий) и <code>A</code> (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трехзначная нотация (<code>#RGB</code>) является более короткой версией шестизначной формы (<code>#RRGGBB</code>). Например, <code>#f09</code> имеет тот же цвет, что и <code>#ff0099</code>. Кроме того, четырехзначная нотация RGB (<code>#RGB</code>) является более короткой версией восьмизначной формы (<code>#RRGGBBAA</code>). Например, #0f38 имеет тот же цвет, что и <code>#00ff3388</code>.</dd> + <dd><code>R</code> (красный), <code>G</code> (зелёный), <code>B</code> (синий) и <code>A</code> (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация (<code>#RGB</code>) является более короткой версией шестизначной формы (<code>#RRGGBB</code>). Например, <code>#f09</code> имеет тот же цвет, что и <code>#ff0099</code>. Кроме того, четырёхзначная нотация RGB (<code>#RGB</code>) является более короткой версией восьмизначной формы (<code>#RRGGBBAA</code>). Например, #0f38 имеет тот же цвет, что и <code>#00ff3388</code>.</dd> <dt>Функциональная нотация: <code>rgb(R, G, B[, A])</code> или <code>rgba(R, G, B, A)</code></dt> - <dd><code>R</code> (красный), <code>G </code>(зеленый) и <code>B</code> (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число <code>255 </code>соответствует <code>100%</code>. А (Альфа) может быть {{cssxref("<number>")}} между <code>0</code> и <code>1</code> или {{cssxref("<percentage>")}}, где число 1 соответствует <code>100%</code> (полная непрозрачность).</dd> + <dd><code>R</code> (красный), <code>G </code>(зелёный) и <code>B</code> (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число <code>255 </code>соответствует <code>100%</code>. А (Альфа) может быть {{cssxref("<number>")}} между <code>0</code> и <code>1</code> или {{cssxref("<percentage>")}}, где число 1 соответствует <code>100%</code> (полная непрозрачность).</dd> <dt>Функциональная нотация: <code>rgb(R G B[ A])</code> or <code>rgba(R G B A)</code></dt> - <dd>CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.</dd> + <dd>CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.</dd> </dl> <h4 id="Пример">Пример</h4> @@ -1068,20 +1068,20 @@ rgb(1e2, .5e1, .5e0, +.25e2%) <h5 id="RGB_вариации_прозрачности">RGB вариации прозрачности</h5> <pre class="notranslate">/* Шестнадцатеричный синтаксис */ -#3a30 <span style="background: #3a30;"> /* 0% непрозрачный зеленый цвет */ </span> -#3A3F <span style="background: #3A3F;"> /* полный непрозрачный зеленый цвет */ </span> -#33aa3300 <span style="background: #33aa3300;"> /* 0% непрозрачный зеленый цвет */ </span> -#33AA3380 <span style="background: #33AA3380;"> /* 50% непрозрачный зеленый цвет */ </span> +#3a30 <span style="background: #3a30;"> /* 0% непрозрачный зелёный цвет */ </span> +#3A3F <span style="background: #3A3F;"> /* полный непрозрачный зелёный цвет */ </span> +#33aa3300 <span style="background: #33aa3300;"> /* 0% непрозрачный зелёный цвет */ </span> +#33AA3380 <span style="background: #33AA3380;"> /* 50% непрозрачный зелёный цвет */ </span> /* Функциональный синтаксис */ -rgba(51, 170, 51, .1) <span style="background: rgba(51, 170, 51, .1);"> /* непрозрачный зеленый цвет на 10% */ </span> -rgba(51, 170, 51, .4) <span style="background: rgba(51, 170, 51, .4);"> /* непрозрачный зеленый цвет на */ </span> -rgba(51, 170, 51, .7) <span style="background: rgba(51, 170, 51, .7);"> /* непрозрачный зеленый цвет на 70% */ </span> -rgba(51, 170, 51, 1) <span style="background: rgba(51, 170, 51, 1);"> /* полный непрозрачный зеленый цвет */ </span> +rgba(51, 170, 51, .1) <span style="background: rgba(51, 170, 51, .1);"> /* непрозрачный зелёный цвет на 10% */ </span> +rgba(51, 170, 51, .4) <span style="background: rgba(51, 170, 51, .4);"> /* непрозрачный зелёный цвет на */ </span> +rgba(51, 170, 51, .7) <span style="background: rgba(51, 170, 51, .7);"> /* непрозрачный зелёный цвет на 70% */ </span> +rgba(51, 170, 51, 1) <span style="background: rgba(51, 170, 51, 1);"> /* полный непрозрачный зелёный цвет */ </span> /* Синтаксис пробелов */ -rgba(51 170 51 / 0.4) <span> /* непрозрачный зеленый цвет на 40%*/ </span> -rgba(51 170 51 / 40%) <span> /* непрозрачный зеленый цвет на 40% */ +rgba(51 170 51 / 0.4) <span> /* непрозрачный зелёный цвет на 40%*/ </span> +rgba(51 170 51 / 40%) <span> /* непрозрачный зелёный цвет на 40% */ </span>/* Функциональный синтаксис со значением floats */ rgba(255, 0, 153.6, 1) @@ -1092,7 +1092,7 @@ rgba(1e2, .5e1, .5e0, +.25e2%) <p>Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.</p> -<p>Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и легкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).</p> +<p>Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и лёгкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).</p> <h4 id="Синтаксис_2">Синтаксис</h4> @@ -1104,14 +1104,14 @@ rgba(1e2, .5e1, .5e0, +.25e2%) <dl> <dt>Функциональная нотация: <code>hsl(H, S, L[, A])</code> или<code>hsla(H, S, L, A)</code></dt> - <dd><code>H</code> (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в <code>deg</code>S, <code>rad</code>s, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=<code>0</code> deg=<code>360</code> град, с другими цветами, распространенными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обертывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.</dd> - <dd><code>S</code> (<code>насыщенность</code>) и <code>L</code> (<code>легкость</code>) являются процентами. <code>100%</code> насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). <code>100%</code> легкость белый, <code>0%</code> легкость черный, и <code>50%</code> легкость “<code>нормально</code>.”</dd> + <dd><code>H</code> (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в <code>deg</code>S, <code>rad</code>s, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=<code>0</code> deg=<code>360</code> град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.</dd> + <dd><code>S</code> (<code>насыщенность</code>) и <code>L</code> (<code>лёгкость</code>) являются процентами. <code>100%</code> насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). <code>100%</code> лёгкость белый, <code>0%</code> лёгкость чёрный, и <code>50%</code> лёгкость “<code>нормально</code>.”</dd> <dd><code>A</code> (alpha) can be a {{cssxref("<number>")}} between <code>0</code> and <code>1</code>, or a {{cssxref("<percentage>")}}, where the number <code>1</code> corresponds to <code>100%</code> (full opacity). <code>A</code> (Альфа) может быть {{cssxref("<number>")}} между <code>0</code> и <code>1</code> или {{cssxref("<percentage>")}}, где число <code>1</code> соответствует <code>100%</code> (полная непрозрачность).</dd> </dl> <dl> <dt>Функциональная нотация: <code>hsl(H S L[ A])</code> or <code>hsla(H S L A)</code></dt> - <dd>CSS Colors Level 4 добавляет поддержку разделенных пробелами значений в функциональной нотации.</dd> + <dd>CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.</dd> </dl> <h4 id="Examples">Examples</h4> @@ -1212,7 +1212,7 @@ hsl(270 60% 50% / 15%) </tbody> </table> -<h5 id="Более_светлая_и_более_темная_зелень">Более светлая и более темная зелень</h5> +<h5 id="Более_светлая_и_более_тёмная_зелень">Более светлая и более тёмная зелень</h5> <table class="standard-table"> <thead> @@ -1328,17 +1328,17 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>Background</dt> <dd>Фон рабочего стола.</dd> <dt>ButtonFace</dt> - <dd>Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом <code>ButtonText</code> цвет переднего плана.</dd> + <dd>Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом <code>ButtonText</code> цвет переднего плана.</dd> <dt>ButtonHighlight</dt> - <dd>Цвет границы, обращенной к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.</dd> + <dd>Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.</dd> <dt>ButtonShadow</dt> - <dd>Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трехмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.</dd> + <dd>Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.</dd> <dt>ButtonText</dt> <dd>Следует использовать с <code>ButtonFace</code> или <code>ThreeDFace</code> цвет фона.</dd> <dt>CaptionText</dt> <dd>Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона <code>ActiveCaption</code>.</dd> <dt>GrayText</dt> - <dd>Серый (отключен) текст.</dd> + <dd>Серый (отключён) текст.</dd> <dt>Highlight</dt> <dd>Элемент(ы), выбранный в элементе управления. Следует использовать с <code>HighlightText</code> текста цветом переднего плана.</dd> <dt>HighlightText</dt> @@ -1360,15 +1360,15 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>Scrollbar</dt> <dd>Цвет фона полос прокрутки.</dd> <dt>ThreeDDarkShadow</dt> - <dd>Цвет более темной (как правило, внешней) из двух границ от источника света для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd> + <dd>Цвет более тёмной (как правило, внешней) из двух границ от источника света для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.</dd> <dt>ThreeDFace</dt> - <dd>Should be used with the <code>ButtonText</code> foreground color. Цвет фона лица для трехмерных элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.</dd> + <dd>Should be used with the <code>ButtonText</code> foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.</dd> <dt>ThreeDHighlight</dt> - <dd>Цвет более светлого (обычно внешнего) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd> + <dd>Цвет более светлого (обычно внешнего) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.</dd> <dt>ThreeDLightShadow</dt> - <dd>Цвет более темной (обычно внутренней) из двух границ, обращенных к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd> + <dd>Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.</dd> <dt>ThreeDShadow</dt> - <dd>Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоев окружающей границы.</dd> + <dd>Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.</dd> <dt>Window</dt> <dd>Фон окна. Следует использовать с <code>WindowText</code> цвет переднего плана.</dd> <dt>WindowFrame</dt> @@ -1383,9 +1383,9 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>-moz-ButtonDefault</dt> <dd>Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.</dd> <dt>-moz-ButtonHoverFace</dt> - <dd>Цвет фона кнопки, на которую наведен указатель мыши (который будет Трехлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.</dd> + <dd>Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.</dd> <dt>-moz-ButtonHoverText</dt> - <dd>Цвет текста кнопки, на которую наведен указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с-<code>-moz-ButtonHoverFace background</code> color.</dd> + <dd>Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с-<code>-moz-ButtonHoverFace background</code> color.</dd> <dt>-moz-CellHighlight</dt> <dd>Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана <code>-moz-CellHighlightText</code>. См. также<code>-moz-html-CellHighlight</code>.</dd> <dt>-moz-CellHighlightText</dt> @@ -1400,7 +1400,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dd>Цвет текста для диалоговых окон. Должен использоваться с цветом фона <code>-moz-Dialog</code>.</dd> <dt>-moz-dragtargetzone</dt> <dt>-moz-EvenTreeRow</dt> - <dd>{{gecko_minversion_inline("1.9")}} цвет фона для четных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте-moz-поле. См. также <code>-moz-OddTreeRow</code>.</dd> + <dd>{{gecko_minversion_inline("1.9")}} цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте-moz-поле. См. также <code>-moz-OddTreeRow</code>.</dd> <dt>-moz-Field</dt> <dd>Text field background color. Should be used with the <code>-moz-FieldText</code> foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана<code>-moz-FieldText</code>.</dd> <dt>-moz-FieldText</dt> @@ -1435,7 +1435,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>-moz-nativehyperlinktext</dt> <dd>{{Gecko_minversion_inline ("1.9.1")}} цвет гиперссылки платформы по умолчанию.</dd> <dt>-moz-OddTreeRow</dt> - <dd>{{gecko_minversion_inline("1.9")}} цвет фона для нечетных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте <code>-moz-Field</code>. Смотрите также <code>-moz-EvenTreeRow</code>.</dd> + <dd>{{gecko_minversion_inline("1.9")}} цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана <code>-moz-FieldText</code>. В версиях Gecko до 1.9, используйте <code>-moz-Field</code>. Смотрите также <code>-moz-EvenTreeRow</code>.</dd> <dt>-moz-win-communicationstext</dt> <dd>{{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с <code>{{cssxref ("- moz-appearance")}}:- moz-win-communications-toolbox;</code>.</dd> <dt>-moz-win-mediatext</dt> @@ -1445,7 +1445,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> Используется для доступа к пользовательскому цвету акцента Windows 10, который можно установить в меню Пуск, панели задач, заголовках и т. д.</dd> <dt>-moz-win-accentcolortext</dt> <dd>{{gecko_minversion_inline ("56")}}<br> - Используется для доступа к цвету текста, размещенного над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.</dd> + Используется для доступа к цвету текста, размещённого над цветом пользовательского акцента Windows 10 в меню Пуск, панели задач, заголовках и т. д.</dd> </dl> <h3 id="Расширения_Цветовых_Предпочтений_Mozilla">Расширения Цветовых Предпочтений Mozilla</h3> @@ -1460,16 +1460,16 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dt>-moz-hyperlinktext</dt> <dd>Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd> <dt>-moz-visitedhyperlinktext</dt> - <dd>Предпочтения пользователя для цвета текста посещенных ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd> + <dd>Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.</dd> </dl> <h2 id="Интерполяция">Интерполяция</h2> -<p>В анимации и <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">градиентах </a>значения <code><color></code> интерполируются на каждый из их <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">красных, зеленых и синих компонентов</a>. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется <a href="/en-US/docs/Web/CSS/single-transition-timing-function">функцией времени</a>.</p> +<p>В анимации и <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">градиентах </a>значения <code><color></code> интерполируются на каждый из их <a href="https://www.gimp.org/docs/plug-in/appendix-alpha.html">красных, зелёных и синих компонентов</a>. Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется <a href="/en-US/docs/Web/CSS/single-transition-timing-function">функцией времени</a>.</p> <h2 id="Соображения_доступности">Соображения доступности</h2> -<p>Некоторые люди с трудом различают цвета. Рекомендация <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определенного сообщения, действия или результата. Дополнительную информацию см. В <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">разделе цвет и цветовой контраст</a>.</p> +<p>Некоторые люди с трудом различают цвета. Рекомендация <a href="https://www.w3.org/TR/WCAG/#visual-audio-contrast">WCAG 2.0</a> настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">разделе цвет и цветовой контраст</a>.</p> <h2 id="Технические_характеристики">Технические характеристики</h2> @@ -1485,7 +1485,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <tr> <td>{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}</td> <td>{{Spec2('CSS4 Colors')}}</td> - <td>Добавляет <code>rebeccapurple</code>, четырехзначные (<code>#RGBA</code>) и восьмизначные (<code>#RRGGBBAA</code>) шестнадцатеричные обозначения, <code>rgba() </code>и <code>hsla()</code> в качестве псевдонимов <code>rgb ()</code> и <code>hsl () </code>(оба с одинаковым синтаксисом параметров), разделенные пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах <code>hsl ()</code>.</td> + <td>Добавляет <code>rebeccapurple</code>, четырёхзначные (<code>#RGBA</code>) и восьмизначные (<code>#RRGGBBAA</code>) шестнадцатеричные обозначения, <code>rgba() </code>и <code>hsla()</code> в качестве псевдонимов <code>rgb ()</code> и <code>hsl () </code>(оба с одинаковым синтаксисом параметров), разделённые пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах <code>hsl ()</code>.</td> </tr> <tr> <td>{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}</td> @@ -1507,7 +1507,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <h2 id="Совместимость_браузера">Совместимость браузера</h2> -<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> +<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос.</div> <p>{{Compat("css.properties.color")}}</p> diff --git a/files/ru/web/css/column-count/index.html b/files/ru/web/css/column-count/index.html index b0f17d4069..633d6a186b 100644 --- a/files/ru/web/css/column-count/index.html +++ b/files/ru/web/css/column-count/index.html @@ -3,7 +3,7 @@ title: column-count slug: Web/CSS/column-count tags: - Свойство - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-count --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/column-rule-color/index.html b/files/ru/web/css/column-rule-color/index.html index b0b7cb3ade..3019c7e417 100644 --- a/files/ru/web/css/column-rule-color/index.html +++ b/files/ru/web/css/column-rule-color/index.html @@ -2,7 +2,7 @@ title: column-rule-color slug: Web/CSS/column-rule-color tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule-color --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/column-rule-style/index.html b/files/ru/web/css/column-rule-style/index.html index 70816fe051..a012d070de 100644 --- a/files/ru/web/css/column-rule-style/index.html +++ b/files/ru/web/css/column-rule-style/index.html @@ -2,7 +2,7 @@ title: column-rule-style slug: Web/CSS/column-rule-style tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule-style --- <div>{{ CSSRef}}</div> diff --git a/files/ru/web/css/column-rule/index.html b/files/ru/web/css/column-rule/index.html index d590860976..d48f043c0d 100644 --- a/files/ru/web/css/column-rule/index.html +++ b/files/ru/web/css/column-rule/index.html @@ -2,7 +2,7 @@ title: column-rule slug: Web/CSS/column-rule tags: - - мультиколоночная верстка + - мультиколоночная вёрстка translation_of: Web/CSS/column-rule --- <div>{{CSSRef}}</div> @@ -13,7 +13,7 @@ translation_of: Web/CSS/column-rule -<p>Эта краткая форма записи задает индивидуальные <code>column-rule-*</code> свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.</p> +<p>Эта краткая форма записи задаёт индивидуальные <code>column-rule-*</code> свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.</p> <div class="note"> <p><strong>Примечание:</strong> Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).</p> @@ -32,13 +32,13 @@ column-rule: initial; column-rule: unset; </pre> -<p>Свойство <code>column-rule</code> указывается в виде одного, двух или трех значений, перечисленных ниже, в любом порядке.</p> +<p>Свойство <code>column-rule</code> указывается в виде одного, двух или трёх значений, перечисленных ниже, в любом порядке.</p> <h3 id="Значения">Значения</h3> <dl> <dt><code><'column-rule-width'></code></dt> - <dd>{{cssxref("<length>")}} или одно из трех ключевых свойств, <code>thin</code>, <code>medium</code>, или <code>thick</code>. См. подробно - {{cssxref("border-width")}}.</dd> + <dd>{{cssxref("<length>")}} или одно из трёх ключевых свойств, <code>thin</code>, <code>medium</code>, или <code>thick</code>. См. подробно - {{cssxref("border-width")}}.</dd> <dt><code><'column-rule-style'></code></dt> <dd>См. подробно {{cssxref("border-style")}} .</dd> <dt><code><'column-rule-color'></code></dt> diff --git a/files/ru/web/css/column_combinator/index.html b/files/ru/web/css/column_combinator/index.html index 9fad1a33a2..171d4fd7bc 100644 --- a/files/ru/web/css/column_combinator/index.html +++ b/files/ru/web/css/column_combinator/index.html @@ -2,7 +2,7 @@ title: Комбинатор столбцов slug: Web/CSS/Column_combinator tags: - - Верстка + - Вёрстка - Селекторы translation_of: Web/CSS/Column_combinator --- diff --git a/files/ru/web/css/containing_block/index.html b/files/ru/web/css/containing_block/index.html index fe3fdd2254..644b4d4d54 100644 --- a/files/ru/web/css/containing_block/index.html +++ b/files/ru/web/css/containing_block/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Containing_block <p class="summary" dir="ltr">На размер и позицию элемента часто влияет его <strong>содержащий блок</strong> (containing block). Чаще всего содержащим блоком является content область (<a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a>) ближайшего блочного (<a href="/en-US/docs/Web/HTML/Block-level_elements">block-level</a>) предка, но это не всегда так. <span class="seoSummary">В этой статье мы рассмотрим факторы, которые</span> определяют <span class="seoSummary">содержащий блок элемента.</span></p> -<p class="summary" dir="ltr">Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создает бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:</p> +<p class="summary" dir="ltr">Когда пользовательский агент (такой как ваш браузер) делает разметку документа, он создаёт бокс (box) для каждого элемента. Каждый бокс разделяется на следующие области:</p> <ol dir="ltr" start="1"> <li>Content область или область контента (content area).</li> @@ -33,15 +33,15 @@ translation_of: Web/CSS/Containing_block <p dir="ltr">Определение содержащего блока элемента полностью зависит от значения свойства {{cssxref("position")}}:</p> <ol dir="ltr" start="1"> - <li>Если свойство <code>position</code> имеет значение <code><strong>static</strong></code>,<strong> </strong><code><strong>relative</strong></code>, или <strong><code>sticky</code></strong>, то содержащий блок задается краем <em>content бокса</em> ближайшего предка, который: + <li>Если свойство <code>position</code> имеет значение <code><strong>static</strong></code>,<strong> </strong><code><strong>relative</strong></code>, или <strong><code>sticky</code></strong>, то содержащий блок задаётся краем <em>content бокса</em> ближайшего предка, который: <ul> <li>либо является <strong>блочным контейнером</strong> (block container), например, если его свойство display имеет значение inline-block, block или list-item.</li> <li>либо <strong>устанавливает контекст форматирования</strong> (formatting context), например, контейнер таблицы (table container), flex-контейнер (flex container), grid-контейнер (grid container) или блочный контейнер (block container).</li> </ul> </li> - <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code>, то содержащий блок задается краем <em>padding бокса</em> ближайшего предка, у которого свойство <code>position</code><strong> </strong>имеет значение отличное от <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> или <code>sticky</code>).</li> - <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>fixed</strong></code>, то содержащий блок задается: + <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>absolute</strong></code>, то содержащий блок задаётся краем <em>padding бокса</em> ближайшего предка, у которого свойство <code>position</code><strong> </strong>имеет значение отличное от <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code> или <code>sticky</code>).</li> + <li>Если свойство <code>position</code><strong> </strong>имеет значение <code><strong>fixed</strong></code>, то содержащий блок задаётся: <ul> <li>в случае непрерывного медиа (continuous media) областью просмотра (вьюпорт - {{glossary("viewport")}});</li> <li>в случае страничного медиа (paged media) областью страницы.</li> diff --git a/files/ru/web/css/content/index.html b/files/ru/web/css/content/index.html index 180c415cef..6d71c72e8e 100644 --- a/files/ru/web/css/content/index.html +++ b/files/ru/web/css/content/index.html @@ -60,18 +60,18 @@ content: unset; <dt>{{cssxref("<string>")}}</dt> <dd>Любое количество текстовых символов. Нелатинские символы должны быть закодированы с использованием их escape-последовательности Unicode: например, <code>\000A9</code> представляет собой символ авторского права.</dd> <dt>{{cssxref("<url>")}}</dt> - <dd>URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображен, он игнорируется или отображается значение по умолчанию.</dd> + <dd>URL-адрес, указывающий на внешний ресурс (к примеру, изображение). Если ресурс не может быть отображён, он игнорируется или отображается значение по умолчанию.</dd> <dt>{{cssxref("<image>")}}</dt> <dd>{{cssxref("<image>")}}, указанный типом данных {{cssxref("<url>")}} или {{cssxref("<gradient>")}}, или частью веб-страницы, определяемой функцией {{cssxref("element", "element()")}}, указывающей содержимое для обозначения.</dd> <dt>{{cssxref("<counter>")}}</dt> - <dd>Значение <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счетчика</a>, как правило число. Его можно отобразить с помощью функций {{cssxref("counter()")}} или{{cssxref("counters()")}}.</dd> + <dd>Значение <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчика</a>, как правило число. Его можно отобразить с помощью функций {{cssxref("counter()")}} или{{cssxref("counters()")}}.</dd> <dd> - <p>Функция <code>counter()</code> имеет две формы записи: 'counter(<var>имя</var>)' или 'counter(<var>имя</var>, <var>стиль</var>)'. Сгенерированный текст - это значение самого вложенного счетчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию <code>decimal</code>).</p> + <p>Функция <code>counter()</code> имеет две формы записи: 'counter(<var>имя</var>)' или 'counter(<var>имя</var>, <var>стиль</var>)'. Сгенерированный текст - это значение самого вложенного счётчика с заданным именем в области видимости данного элемента. Он отформатирован в указанном стиле (по умолчанию <code>decimal</code>).</p> - <p>Функция <code>counters()</code> также имеет две формы записи: 'counters(<var>name</var>, <var>string</var>)' или 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. Сгенерированный текст - это значение всех счетчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделенных указанной строкой. Счетчики отображаются в указанном стиле (по умолчанию <code>decimal</code>).</p> + <p>Функция <code>counters()</code> также имеет две формы записи: 'counters(<var>name</var>, <var>string</var>)' или 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. Сгенерированный текст - это значение всех счётчиков с заданным именем в области видимости данного элемента, от крайнего к вложенному. разделённых указанной строкой. Счётчики отображаются в указанном стиле (по умолчанию <code>decimal</code>).</p> </dd> <dt><code>attr(x)</code></dt> - <dd>Значение атрибута <code>x</code> элемента в виде строки. Если атрибут <code>x</code> отсутствует, вернется пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.</dd> + <dd>Значение атрибута <code>x</code> элемента в виде строки. Если атрибут <code>x</code> отсутствует, вернётся пустая строка. Чувствительность к регистру в названии атрибута зависит от языка документа.</dd> <dt><code>open-quote</code> | <code>close-quote</code></dt> <dd>Эти значения заменяются соответствующей строкой из свойства {{cssxref("quotes")}}.</dd> <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt> @@ -123,7 +123,7 @@ q::after { } h1::before { - content: "Chapter "; /* Пробел в конце создает разделение + content: "Chapter "; /* Пробел в конце создаёт разделение между добавленным контентом и остальным контентом*/ }</pre> @@ -169,7 +169,7 @@ h1::before { <h4 id="CSS_3">CSS</h4> <pre class="brush: css">.new-entry::after { - content: " New!"; /* Начальный пробел создает разделение + content: " New!"; /* Начальный пробел создаёт разделение между добавленным контентом и остальным контентом */ color: red; @@ -245,7 +245,7 @@ li { <h2 id="Проблемы_доступности">Проблемы доступности</h2> -<p>Сгенерированный CSS контент не включен в <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Из-за этого он не будет представлен в <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить ее в основной документ.</p> +<p>Сгенерированный CSS контент не включён в <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM</a>. Из-за этого он не будет представлен в <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить её в основной документ.</p> <ul> <li><a href="https://tink.uk/accessibility-support-for-css-generated-content/">Accessibility support for CSS generated content – Tink</a></li> diff --git a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html index 785f85c87c..51b1c40887 100644 --- a/files/ru/web/css/css_animations/detecting_css_animation_support/index.html +++ b/files/ru/web/css/css_animations/detecting_css_animation_support/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support --- <div>{{CSSRef}}</div> -<p>CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придется решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.</p> +<p>CSS-анимации позволяют создавать креативные анимации контента, используя только CSS. Однако, скорее всего, будут случаи, когда эта функция недоступна, и вам придётся решать эти задачи с помощью кода JavaScript, чтобы получить аналогичный эффект. Эта статья, основанная на посте в блоге Криса Хайльмана, демонстрирует такую технику.</p> <h2 id="Тестирование_поддержки_анимации_CSS">Тестирование поддержки анимации CSS</h2> @@ -33,7 +33,7 @@ if( animation === false ) { } </pre> -<p>Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для <code>animationstring</code> - <code>animation</code> , которая является свойством, которое мы хотим установить позже. Мы создаем массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.</p> +<p>Для начала мы определим несколько переменных. Мы предполагаем, что анимация не поддерживается установкой значения animation в false. Мы устанавливаем строке для <code>animationstring</code> - <code>animation</code> , которая является свойством, которое мы хотим установить позже. Мы создаём массив префиксов браузера для циклического перебора и устанавливаем pfx в пустую строку.</p> <p>Затем мы проверяем, установлено ли свойство CSS {{cssxref("animation-name")}} в коллекции стилей для элемента, заданного переменной elem. Это означает, что браузер поддерживает CSS-анимацию без какого-либо префикса, чего на сегодняшний день никто из них не делает..</p> @@ -80,7 +80,7 @@ if( animation === false ) { <p>Следующая задача-фактически добавить ключевые кадры в CSS страницы. Первое, что нужно сделать, это посмотреть, есть ли уже таблица стилей в документе; если да, то мы просто вставляем описание ключевого кадра в эту таблицу стилей; это делается в строках 13-15.</p> -<p>Если таблицы стилей еще нет, то создается новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.</p> +<p>Если таблицы стилей ещё нет, то создаётся новый элемент {{HTMLElement("style")}}, а его содержимое устанавливается в значение keyframes. Затем новый элемент {{HTMLElement("style")}} вставляется в документ {{HTMLElement("head")}}, тем самым добавляя новую таблицу стилей в документ.</p> <p><a href="https://jsfiddle.net/codepo8/ATS2S/8/embedded/result">View on JSFiddle</a></p> diff --git a/files/ru/web/css/css_animations/tips/index.html b/files/ru/web/css/css_animations/tips/index.html index 495c3a3063..15929f6220 100644 --- a/files/ru/web/css/css_animations/tips/index.html +++ b/files/ru/web/css/css_animations/tips/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Animations/Tips <p>Спецификация <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> не предлагает способа запустить анимацию снова. Нет никакого волшебного метода resetAnimation () для элементов, и вы даже не можете просто установить элемент {{cssxref ("animation-play-state")}} в" running " снова. Вместо этого вы должны использовать хитрые трюки, чтобы запустить остановленную анимацию для воспроизведения.</p> -<p>Предлагаем вам один из способов, который мы считаем достаточно надежным и стабильным.</p> +<p>Предлагаем вам один из способов, который мы считаем достаточно надёжным и стабильным.</p> <h3 id="HTML_содержимое">HTML содержимое</h3> @@ -80,8 +80,8 @@ translation_of: Web/CSS/CSS_Animations/Tips <ol> <li>Список классов CSS в элементе сбрасывается до простого "box". Это приводит к удалению всех других классов, которые в настоящее время применяются к элементу, включая класс <code>"changing"</code> , который обрабатывает анимацию. Другими словами, мы удаляем анимационный эффект из элемента. Однако изменения в списке классов не вступают в силу до тех пор, пока не будет завершен перерасчет стиля и не произойдет обновление, отражающее это изменение.</li> - <li>Чтобы убедиться, что стили пересчитаны, мы используем {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчет стиля еще не произошел! </li> - <li>Наш колбэк ловко вызывает <code>requestAnimationFrame()</code> второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчет стиля. Этот колбэк добавляет класс <code>"changing"</code> обратно в элемент, так что перерисовка снова запустит анимацию.</li> + <li>Чтобы убедиться, что стили пересчитаны, мы используем {{domxref("window.requestAnimationFrame()")}} с колбэком. Наш колбэк выполняется непосредственно перед следующей перерисовкой документа. Проблема заключается в том,что, поскольку это происходит до перерисовки, перерасчёт стиля ещё не произошёл! </li> + <li>Наш колбэк ловко вызывает <code>requestAnimationFrame()</code> второй раз! На этот раз колбэк выполняется до следующей перерисовки, то есть после того, как произошла перерасчёт стиля. Этот колбэк добавляет класс <code>"changing"</code> обратно в элемент, так что перерисовка снова запустит анимацию.</li> </ol> <p>Конечно, нам также нужно добавить обработчик событий к нашей кнопке "выполнить", чтобы она действительно что-то делала:</p> @@ -94,7 +94,7 @@ translation_of: Web/CSS/CSS_Animations/Tips <h2 id="Остановка_анимации">Остановка анимации</h2> -<p>Простое удаление {{cssxref("animation-name")}} примененного к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:</p> +<p>Простое удаление {{cssxref("animation-name")}} применённого к элементу, заставит его исчезнуть или перейти в следующее состояние. Если вместо этого вы хотите, чтобы анимация закончилась, а затем остановилась, вам нужно попробовать другой подход. Главные хитрости заключаются в следующем:</p> <ol> <li>Сделайте свою анимацию настолько самодостаточной, насколько это возможно. Это означает, что вы не должны полагаться на <code>animation-direction: alternate</code>. Вместо этого вы должны явно написать анимацию ключевого кадра, которая проходит через полную анимацию в одном прямом повторении.</li> diff --git a/files/ru/web/css/css_animations/using_css_animations/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html index 2f25d7922e..14ccbe0a77 100644 --- a/files/ru/web/css/css_animations/using_css_animations/index.html +++ b/files/ru/web/css/css_animations/using_css_animations/index.html @@ -41,7 +41,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy <dt>{{ cssxref("animation-iteration-count") }}</dt> <dd>Определяет количество повторений анимации; Вы можете использовать значение <code>infinite</code> для бесконечного повторения анимации.</dd> <dt>{{ cssxref("animation-direction") }}</dt> - <dd>Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd> + <dd>Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.</dd> <dt>{{ cssxref("animation-fill-mode") }}</dt> <dd>Настраивает значения, используемые анимацией, до и после исполнения.</dd> <dt>{{ cssxref("animation-play-state") }}</dt> @@ -52,13 +52,13 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy <p><span id="result_box" lang="ru"><span class="hps">После того, как</span> <span class="hps">вы настроили</span> <span class="hps">временные свойства (продолжительность, ускорение)</span> <span class="hps">анимации</span><span>, вы</span> <span class="hps">должны определить</span> <span class="hps">внешний вид</span> <span class="hps">анимации</span></span>. Это делается с помощью двух и более ключевых кадров после {{ cssxref("@keyframes") }}. Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.</p> -<p>В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: <code>from</code> и <code>to</code>.</p> +<p>В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют {{ cssxref("percentage") }}, чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% её конец. Так как эти значения очень важны, то для них придумали специальные слова: <code>from</code> и <code>to</code>.</p> <p>Вы также можете добавить ключевые кадры, характеризующие промежуточное состояние анимации.</p> <h2 id="Примеры">Примеры</h2> -<div class="note"><strong>Внимание:</strong> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своем браузере, также содержат префиксы -webkit-.</div> +<div class="note"><strong>Внимание:</strong> Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.</div> <h3 id="Скольжение_текста">Скольжение текста</h3> @@ -88,7 +88,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy <p>В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.</p> -<p>Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p> +<p>Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаём элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p> <p>Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.</p> @@ -97,7 +97,7 @@ at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> </pre> -<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p> +<p>(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)</p> <p>{{EmbedLiveSample("Скольжение_текста","100%","250")}}</p> @@ -143,7 +143,7 @@ her in a languid, sleepy voice.</p> <p>Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.</p> -<p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p> +<p>(Обновите страницу, чтобы увидеть анимацию, или щёлкните по кнопке CodePen, чтобы воспроизвести её в окне CodePen)</p> <p>{{ EmbedLiveSample('Добавление_других_ключевых_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p> @@ -233,9 +233,9 @@ her in a languid, sleepy voice.</p> <h3 id="Установка_нескольких_значений_свойствам_анимации">Установка нескольких значений свойствам анимации </h3> -<p>CSS свойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p> +<p>CSS свойство анимации может иметь несколько значений, разделённых запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p> -<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:</p> +<p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трёх анимаций одинаковая продолжительность и число повторений:</p> <pre><code>animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 3s; @@ -261,7 +261,7 @@ animation-iteration-count: 2, 1;</code></pre> <h4 id="Добавление_CSS">Добавление CSS</h4> -<p>Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">animation-direction</span></font> установлено <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">alternate</span></font>. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.</p> +<p>Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">animation-direction</span></font> установлено <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">alternate</span></font>. В ключевых кадрах {{ cssxref("@keyframes") }} установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.</p> <pre class="brush: css">.slidein { -moz-animation-duration: 3s; @@ -316,7 +316,7 @@ animation-iteration-count: 2, 1;</code></pre> <h4 id="Добавление_обработчика_события_анимации">Добавление обработчика события анимации</h4> -<p>Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p> +<p>Будем использовать JavaScript для отслеживания всех трёх возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.</p> <pre class="brush: js">var e = document.getElementById("watchme"); e.addEventListener("animationstart", listener, false); @@ -366,7 +366,7 @@ e.className = "slidein"; <h4 id="HTML">HTML</h4> -<p>Ради полноты картины приведем код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p> +<p>Ради полноты картины приведём код разметки HTML. В разметке имеется тег <em>ul,</em> в который и выводится вся информация:</p> <pre class="brush: html"><body> <h1 id="watchme">Watch me move</h1> diff --git a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index dc2ba0d32f..a17cf60839 100644 --- a/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html +++ b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -18,7 +18,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Множественные_ф } </pre> -<p>Вы можете сделать это сокращенным {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p> +<p>Вы можете сделать это сокращённым {{ cssxref("background") }} свойством и отдельными свойствами кроме {{ cssxref("background-color") }}. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p> <h2 id="Пример">Пример</h2> @@ -45,7 +45,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Множественные_ф <p>{{EmbedLiveSample('Example','100%','400')}}</p> -<p>Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идет градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.</p> +<p>Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идёт градиент и в самом низу фон с пузырями. Каждое последующее под-свойство ({{ cssxref("background-repeat") }} и {{ cssxref("background-position") }}) применяется к соответствующим фонам. Например первое значение свойства {{ cssxref("background-repeat") }} применяется к первому фону, и т.д.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 3cd0e684d6..1969398293 100644 --- a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -20,7 +20,7 @@ original_slug: >- <pre class="syntaxbox">cursor: [<url>,]* ключевое_слово</pre> -<p>Это означает, что устанавливать можно любое количество URL-адресов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определенными спецификацией CSS, таких как <code>auto</code> или <code>pointer</code>.</p> +<p>Это означает, что устанавливать можно любое количество URL-адресов (отделённых запятой), которые должны сопровождаться одним из ключевых слов, определёнными спецификацией CSS, таких как <code>auto</code> или <code>pointer</code>.</p> <p>Например, такая последовательность значений допустима:</p> diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index 3fe63cc24c..b59b71c446 100644 --- a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox --- <div>{{CSSRef}}</div> -<p><span class="tlid-translation translation" lang="ru"><span title="">Спецификация <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание Блоков</a> подробно описывает, как выравнивание работает при использовании различных способов разметки.</span> <span title="">На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox.</span> <span title="">Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, ее следует читать вместе с основной страницей <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">выравнивания блоков</a>, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Спецификация <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание Блоков</a> подробно описывает, как выравнивание работает при использовании различных способов разметки.</span> <span title="">На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox.</span> <span title="">Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, её следует читать вместе с основной страницей <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">выравнивания блоков</a>, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.</span></span></p> <h2 id="Основной_пример">Основной пример</h2> @@ -25,7 +25,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <ul> <li>Главная ось = направление согласно атрибуту <code>flex-direction</code> = выравнивание через атрибут <code>justify-content</code></li> - <li>Поперечная ось = проходит поперек главной оси = выравнивание через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li> + <li>Поперечная ось = проходит поперёк главной оси = выравнивание через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li> </ul> <h3 id="Выравнивание_по_Главной_Оси">Выравнивание по Главной Оси</h3> @@ -48,13 +48,13 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <p><span class="tlid-translation translation" lang="ru"><span title="">Это означает, что атрибут <code>justify-self</code> нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Использовать атрибут <code>align-self</code> имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещен и в начало, и в конец.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Использовать атрибут <code>align-self</code> имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.</span></span></p> <h2 id="Выравнивание_и_свойство_margin_auto">Выравнивание и свойство margin: auto</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значением <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своем измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значением <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своём измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Установив значение атрибута{{cssxref ("margin")}} в <code>auto</code> для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделенную навигацию.</span> <span title="">Это хорошо работает с разметкой flexbox и свойствами выравнивания.</span> <span title="">Как только для элемента со свойством <code>margin: auto</code> не остается свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Установив значение атрибута{{cssxref ("margin")}} в <code>auto</code> для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию.</span> <span title="">Это хорошо работает с разметкой flexbox и свойствами выравнивания.</span> <span title="">Как только для элемента со свойством <code>margin: auto</code> не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.</span></span></p> <p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p> @@ -70,7 +70,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <p><span class="tlid-translation translation" lang="ru"><span title="">На главной оси атрибут <code>column-gap</code> будет создавать разрывы фиксированного размера между соседними элементами.</span><br> <br> - <span title="">На поперечной оси атрибут <code>row-gap</code> создает разрыв между соседними flex линиями, поэтому необходимо также установить атрибут <code>flex-wrap</code> в значение <code>wrap</code>, чтобы применить эффект.</span></span></p> + <span title="">На поперечной оси атрибут <code>row-gap</code> создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут <code>flex-wrap</code> в значение <code>wrap</code>, чтобы применить эффект.</span></span></p> <div class="note"> <p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.</span></span></p> diff --git a/files/ru/web/css/css_box_alignment/index.html b/files/ru/web/css/css_box_alignment/index.html index af449e8cff..e094c861ea 100644 --- a/files/ru/web/css/css_box_alignment/index.html +++ b/files/ru/web/css/css_box_alignment/index.html @@ -23,7 +23,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <h3 id="Пример_выравнивания_раскладки_сетки_CSS">Пример выравнивания раскладки сетки CSS</h3> -<p>В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки {{cssxref("align-self")}} в центр.</p> +<p>В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установки {{cssxref("align-self")}} в центр.</p> <p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p> @@ -73,7 +73,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p><strong>Контейнер выравнивания</strong> - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.</p> -<p>На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.</p> +<p>На приведённом ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p> @@ -88,7 +88,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <ul> <li><strong>Positional alignment</strong> (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.</li> <li><strong>Baseline alignment</strong> (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.</li> - <li><strong>Distributed alignment</strong> (распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.</li> + <li><strong>Distributed alignment</strong> (распределённое выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.</li> </ul> <h3 id="Значения_ключевых_слов_позиционирования">Значения ключевых слов позиционирования</h3> @@ -109,7 +109,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Помимо физических значений <code>left</code> и <code>right</code>, которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.</p> -<p>Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение <code>justify-content</code> <code>start</code>, это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение <code>start</code> приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.</p> +<p>Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение <code>justify-content</code> <code>start</code>, это приведёт к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение <code>start</code> приведёт к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.</p> <p>Оба этих примера имеют <code>justify-content: start</code>, однако местоположение начала изменяется в соответствии с режимом записи.</p> @@ -127,11 +127,11 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Исходное выравнивание содержимого - указание значения выравнивания базовой линии для <code>justify-content</code> или <code>align-content</code> - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.</p> -<p>Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование <code>justify-self</code> или <code>align-self</code> или при настройке этих значений в виде группы с <code>justify-items</code> и <code>align-items</code>.</p> +<p>Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путём добавления поля за пределами полей. Self alignment - это использование <code>justify-self</code> или <code>align-self</code> или при настройке этих значений в виде группы с <code>justify-items</code> и <code>align-items</code>.</p> <h3 id="Distributed_alignment">Distributed alignment</h3> -<p><strong>Ключевые слова распределенного выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p> +<p><strong>Ключевые слова распределённого выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p> <ul> <li><code>stretch</code></li> @@ -154,7 +154,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p><code>safe</code> и <code>unsafe</code> ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово <code>safe</code> будет выравниваться для <code>start</code> в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.</p> -<p>Если вы укажете <code>unsafe</code>, выравнивание будет выполнено, даже если это приведет к такой потере данных.</p> +<p>Если вы укажете <code>unsafe</code>, выравнивание будет выполнено, даже если это приведёт к такой потере данных.</p> <h2 id="Пробелы_между_boxes">Пробелы между boxes</h2> @@ -168,7 +168,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <li>{{cssxref("gap")}}</li> </ul> -<p>В приведенном ниже примере макет сетки использует сокращенную <code>gap</code>, чтобы установить разрыв <code>10px</code> между дорожками строк и <code>2em</code> разрыв между дорожками столбцов.</p> +<p>В приведённом ниже примере макет сетки использует сокращённую <code>gap</code>, чтобы установить разрыв <code>10px</code> между дорожками строк и <code>2em</code> разрыв между дорожками столбцов.</p> <p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p> diff --git a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html index 1ad4642062..cb2b41fbb1 100644 --- a/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html +++ b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -16,19 +16,19 @@ original_slug: Web/CSS/box_model <p><img alt="CSS Box model" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p> -<p><a name="content"><strong>Внутренняя область</strong> элемента (<strong>content area</strong>) содержит текст и другие элементы, расположенные внутри (<em>контент</em> или <em>содержимое</em>). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри <em>content edge</em>; её размеры называются <em>ширина контента</em> (<em>content width</em> или <em>content-box width)</em>, и <em>высота контента</em> (<em>content height</em> или content-box height). Иногда еще говорят «внутренняя ширина/высота элемента»</a></p> +<p><a name="content"><strong>Внутренняя область</strong> элемента (<strong>content area</strong>) содержит текст и другие элементы, расположенные внутри (<em>контент</em> или <em>содержимое</em>). У неё часто бывает фон, цвет или изображение (в таком порядке: фоновый цвет скрывается под непрозрачным изображением), и она находится внутри <em>content edge</em>; её размеры называются <em>ширина контента</em> (<em>content width</em> или <em>content-box width)</em>, и <em>высота контента</em> (<em>content height</em> или content-box height). Иногда ещё говорят «внутренняя ширина/высота элемента»</a></p> -<p>По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задается свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.</p> +<p>По умолчанию, если CSS-свойство {{ cssxref("box-sizing") }} не задано, размер внутренней области с содержимым задаётся свойствами {{ cssxref("width") }}, {{ cssxref("min-width") }}, {{ cssxref("max-width") }}, {{ cssxref("height") }}, {{ cssxref("min-height") }} and {{ cssxref("max-height") }}. Если же свойство {{ cssxref("box-sizing") }} задано, то оно определяет, для какой области указаны размеры.</p> <p><a name="padding">Поля элемента (<strong>padding area)</strong> — это пустая область, окружающая контент. Она может быть залита каким-то цветом, покрыта фоновый картинкой, а её границы называются края полей (<em>padding edge)</em>.</a></p> <p>Размеры полей задаются по отдельности с разных сторон свойствами {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }} или общим свойством {{ cssxref("padding") }}.</p> -<p><a name="border">Область рамки (<strong>border area)</strong> окружает поля элемента, а ее граница называется края рамки (<em>border edge).</em> Ширина рамки задается отдельным свойством {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учетом полей и рамки иногда называют внешней шириной/высотой элемента.</a></p> +<p><a name="border">Область рамки (<strong>border area)</strong> окружает поля элемента, а её граница называется края рамки (<em>border edge).</em> Ширина рамки задаётся отдельным свойством {{ cssxref("border-width") }} или в составе свойства {{ cssxref("border") }}. Размеры элемента с учётом полей и рамки иногда называют внешней шириной/высотой элемента.</a></p> <p><a name="margin">Отступы (<strong>margin area)</strong> добавляют пустое пространство вокруг элемента и определяют расстояние до соседних элементов.</a></p> -<p>Величина отступов задается по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.</p> +<p>Величина отступов задаётся по отдельности в разных направлениях свойствами {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }} или общим свойством {{ cssxref("margin") }}.</p> <p>Отступы двух соседних элементов, расположенных друг над другом или вложенных друг в друга, могут накладываться. Это называется схлопывание границ (<a href="/ru/docs/Web/CSS/margin_collapsing" title="ru/CSS/margin_collapsing">margin collapsing</a>). Схлопываются только вертикальные отступы.</p> diff --git a/files/ru/web/css/css_colors/color_picker_tool/index.html b/files/ru/web/css/css_colors/color_picker_tool/index.html index 499aa260fd..a148b4e9af 100644 --- a/files/ru/web/css/css_colors/color_picker_tool/index.html +++ b/files/ru/web/css/css_colors/color_picker_tool/index.html @@ -3212,7 +3212,7 @@ var ColorPickerTool = (function ColorPickerTool() { <p>{{CSSRef}}</p> -<p>Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зеленый / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).</p> +<p>Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зелёный / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).</p> <p>Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой "пипетка" можно переключаться между HSL или HSV форматами.</p> diff --git a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html index 7bab55db18..af886ff78f 100644 --- a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html @@ -6,7 +6,7 @@ original_slug: Web/Guide/CSS/Using_multi-column_layouts --- <p>{{CSSRef("CSS Multi-columns")}}</p> -<p><span class="seoSummary"><strong>CSS разметка для многих колонок</strong> расширяет <em>способ блочной разметки, </em>чтобы позволить легкое описание нескольких колонок текста.</span> Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.</p> +<p><span class="seoSummary"><strong>CSS разметка для многих колонок</strong> расширяет <em>способ блочной разметки, </em>чтобы позволить лёгкое описание нескольких колонок текста.</span> Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.</p> <p>К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS свойств, чтобы расширить традиционный блочный способ разметки.</p> diff --git a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 3340d6cfae..61c6b3da9f 100644 --- a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -121,7 +121,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем <p>Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — <code>justify-content</code>. Это обусловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство <code>justify-content</code>, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.</p> -<p>В нашем первом примере с использованием свойства <code>display: flex</code>, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство <code>justify-content</code> имеет начальное значение <code>flex-start</code>. Все свободное место располагается в конце контейнера.</p> +<p>В нашем первом примере с использованием свойства <code>display: flex</code>, применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство <code>justify-content</code> имеет начальное значение <code>flex-start</code>. Все свободное место располагается в конце контейнера.</p> <p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> @@ -203,7 +203,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем <p>Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как <code>column-gap</code> and <code>row-gap</code>, как показано в макете <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать <code>column-gap</code> и <code>row-gap</code> во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.</p> -<p>Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, а также рассмотреть как выравнивание работает в этих спецификациях в статье <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p> +<p>Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, а также рассмотреть как выравнивание работает в этих спецификациях в статье <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p> <p>Смотрите Также</p> diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index 9c407f61fa..25b5be5ea0 100644 --- a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -11,13 +11,13 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb <p>Как и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.</p> -<p>Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы все равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p> +<p>Flexbox был реализован экспериментальным путём в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счёте префиксы все равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p> <p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">В 2009</a> спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать <code>display: box</code> и несколько <code>box-*</code> свойств, которые делали то, что сегодня вы понимаете под flexbox.</p> <p>Очередное <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">обновление</a> спецификации поменяло синтаксис на <code>display: flexbox</code> — и опять с вендорными префиксами.</p> -<p>В конечном счете спецификация была обновлена, чтобы определить <code>display: flex</code> как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновленной версии спецификации отличная.</p> +<p>В конечном счёте спецификация была обновлена, чтобы определить <code>display: flex</code> как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновлённой версии спецификации отличная.</p> <p>Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде <code>display: box</code> или <code>display: flexbox</code>, то это уже устаревшая информация.</p> @@ -27,7 +27,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb <ul> <li>Internet Explorer 10, который внедрил <code>display: flexbox</code> версию спецификации с префиксом <code>-ms-</code>.</li> - <li>UC Browser, который все еще поддерживает спецификацию версии 2009 год с <code>display: box</code> и префиксом <code>-webkit-</code>.</li> + <li>UC Browser, который все ещё поддерживает спецификацию версии 2009 год с <code>display: box</code> и префиксом <code>-webkit-</code>.</li> </ul> <p>Также возьмите на заметку, что Explorer 11 поддерживает современный <code>display: flex,</code> однако не без багов.</p> diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 23f034fb6f..874e9a5982 100644 --- a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox --- <div>{{CSSRef}}</div> -<p class="summary"><strong>CSS модуль раскладки Flexible Box</strong>, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье дается краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.</p> +<p class="summary"><strong>CSS модуль раскладки Flexible Box</strong>, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье даётся краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.</p> <p>Когда мы описываем flexbox как одномерно-направленный, мы имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.</p> @@ -46,7 +46,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <h2 id="Начало_и_конец_строки">Начало и конец строки</h2> -<p>Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы верстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.</p> +<p>Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы вёрстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.</p> <p>Вы можете прочитать больше о взаимосвязи между flexbox и спецификацией Writing Modes в следующей статье, однако следующее описание должно помочь объяснить, почему мы не говорим о левом, правом, верхнем и нижнем направлениях наших flex-элементов.</p> @@ -64,7 +64,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <h2 id="Flex_контейнер">Flex контейнер</h2> -<p>Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаем значение <code>flex</code> или <code>inline-flex</code> для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.</p> +<p>Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаём значение <code>flex</code> или <code>inline-flex</code> для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.</p> <ul> <li>Элементы отображаются в ряд (свойство <code>flex-direction</code> по умолчанию имеет значение <code>row</code>).</li> @@ -75,7 +75,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <li>Свойству {{cssxref("flex-wrap")}} задано значение <code>nowrap</code>.</li> </ul> -<p>Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обернуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.</p> +<p>Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обёрнуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.</p> <p>Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.</p> @@ -87,7 +87,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <p>Если изменить значение свойства <code>flex-direction</code> на <code>column</code>, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра <code>column-reverse</code>, начало и конец столбца поменяются местами.</p> -<p>В приведенном ниже примере значение свойства <code>flex-direction</code> установлено как <code>row-reverse</code>. Попробуйте другие значения — <code>row</code>, <code>column</code> и<code>column-reverse</code>, чтобы посмотреть как изменятся элементы контейнера.</p> +<p>В приведённом ниже примере значение свойства <code>flex-direction</code> установлено как <code>row-reverse</code>. Попробуйте другие значения — <code>row</code>, <code>column</code> и<code>column-reverse</code>, чтобы посмотреть как изменятся элементы контейнера.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> @@ -105,7 +105,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <p>Вы можете указать два свойства <code>flex-direction</code> и <code>flex-wrap</code> в одном {{cssxref("flex-flow")}}. Первое значение свойства определяет <code>flex-direction</code>, второе <code>flex-wrap</code>.</p> -<p>В приведенном ниже примере вы можете изменить первое значение на одно из доступных для <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, а второе на <code>wrap</code> или <code>nowrap</code>, чтобы посмотреть как изменятся элементы контейнера.</p> +<p>В приведённом ниже примере вы можете изменить первое значение на одно из доступных для <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, а второе на <code>wrap</code> или <code>nowrap</code>, чтобы посмотреть как изменятся элементы контейнера.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> @@ -123,7 +123,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <p>Чтобы понять как работают эти свойства, прежде нам необходимо разобраться с концепцией <strong>доступного пространства</strong>. Изменяя значения этих флекс свойств, мы влияем на то, как доступное пространство распределяется между нашими элементами. Эта концепция так же важна для выравнивания элементов.</p> -<p>Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остается 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.</p> +<p>Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остаётся 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.</p> <p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> @@ -131,7 +131,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <h3 id="Свойство_flex-basis">Свойство <code>flex-basis</code></h3> -<p>Свойство <code>flex-basis</code> определяет размер доступного пространства элемента. Начальное значение этого свойства - <code>auto </code>- в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100px, и этот размер читается браузером как <code>flex-basis</code>.<br> +<p>Свойство <code>flex-basis</code> определяет размер доступного пространства элемента. Начальное значение этого свойства - <code>auto </code>- в этом случае браузер проверяет, имеют ли элементы размер. В приведённом выше примере все элементы имеют ширину 100px, и этот размер читается браузером как <code>flex-basis</code>.<br> Если элементы не имеют размера, то для размера <code>flex-basis</code> используется размер контента. Вот почему, когда мы просто объявляем <code>display: flex</code> на родительском элементе для создания flex-элементов, все элементы перемещаются в ряд и занимают столько места, сколько им нужно для отображения их содержимого.</p> <h3 id="Свойство_flex-grow">Свойство <code>flex-grow</code></h3> diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index 6a31a4a6ea..92c797bcf4 100644 --- a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -72,24 +72,24 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items <p>В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра <code>visibility: collapse</code> на элементе. Смотрим документацию MDN для параметра {{cssxref("visibility")}}. Спецификация описывает поведение так:</p> <blockquote> -<p>“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы. Однако процесс обертывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Сворачивание элементов</a></p> +<p>“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы. Однако процесс обёртывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Сворачивание элементов</a></p> </blockquote> <p>Понимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.</p> -<p>В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр <code>visibility: collapse</code>. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите <code>visibility: collapse</code> из CSS или измените значение на <code>visible</code>, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свернутыми элементами; высота флекс-контейнера при этом не изменится.</p> +<p>В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр <code>visibility: collapse</code>. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите <code>visibility: collapse</code> из CSS или измените значение на <code>visible</code>, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.</p> <div class="note"> -<p>Примечание. Используйте Firefox для двух приведенных ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.</p> +<p>Примечание. Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.</p> </div> <p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p> -<p>Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит <em>после</em> сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свернутым элементом в главной оси.</p> +<p>Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит <em>после</em> сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свёрнутым элементом в главной оси.</p> <p>Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.</p> -<p>Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свернутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.</p> +<p>Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свёрнутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p> @@ -97,4 +97,4 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items <h3 id="Разница_между_visibility_hidden_и_display_none">Разница между <code>visibility: hidden</code> и <code>display: none</code></h3> -<p>Когда Вы устанавливаете элементу <code>display: none</code> чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счетчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование <code>visibility: hidden</code> сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведет себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.</p> +<p>Когда Вы устанавливаете элементу <code>display: none</code> чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счётчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование <code>visibility: hidden</code> сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведёт себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.</p> diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html index 80fddc9dab..3863c2862e 100644 --- a/files/ru/web/css/css_flow_layout/index.html +++ b/files/ru/web/css/css_flow_layout/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Flow_Layout --- <div>{{CSSRef}}</div> -<p class="summary"><em>Нормальный поток (normal flow) </em>или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в нее могут быть внесены изменения, например, относительное позиционирование.</p> +<p class="summary"><em>Нормальный поток (normal flow) </em>или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в неё могут быть внесены изменения, например, относительное позиционирование.</p> <p class="summary">По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность <em>вынимается из потока (out of flow)</em>, то она работает независимо.</p> @@ -21,9 +21,9 @@ translation_of: Web/CSS/CSS_Flow_Layout <p>Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.</p> -<p>Два элемента параграфа с зеленой границей создают боксы уровня блока, отображающиеся один под другим.</p> +<p>Два элемента параграфа с зелёной границей создают боксы уровня блока, отображающиеся один под другим.</p> -<p>Первое предложение также содержит элемент span с голубым фоном. Он создает бокс уровня строки и, следовательно, размещается внутри предложения.</p> +<p>Первое предложение также содержит элемент span с голубым фоном. Он создаёт бокс уровня строки и, следовательно, размещается внутри предложения.</p> <p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p> diff --git a/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index aed2f568ec..13069eaa00 100644 --- a/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html +++ b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -8,7 +8,7 @@ original_slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_ф <p class="summary"><span class="seoSummary">В этой статье представлена концепция контекстов форматирования (formatting context). Существует несколько типов контекстов форматирования, например, блочный контекст форматирования (block formatting context, BFC), строчный контекст форматирования (inline formatting context), флексовый контекст форматирования (flex formatting context). В статье даны основы того, как они себя ведут, и как вы можете использовать это поведение.</span></p> -<p>Всё на странице является частью <strong>контекста форматирования</strong> (formatting context), который представляет собой область, в которой происходит раскладка контента по определенным правилам. <strong>Блочный контекст форматирования</strong> (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, <strong>флексовый контекст форматирования</strong> (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.</p> +<p>Всё на странице является частью <strong>контекста форматирования</strong> (formatting context), который представляет собой область, в которой происходит раскладка контента по определённым правилам. <strong>Блочный контекст форматирования</strong> (block formatting context, BFC) делает раскладку своих дочерних элементов в соответствии с правилами блочной раскладки, <strong>флексовый контекст форматирования</strong> (flex formatting context) раскладывает свои дочерние элементы как {{Glossary("flex item", "флекс-элементы")}} и т.д. Каждый контекст форматирования использует свои правила раскладки.</p> <h2 id="Блочные_контексты_форматирования">Блочные контексты форматирования</h2> @@ -16,9 +16,9 @@ original_slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_ф <h3 id="Создание_нового_блочного_контекста_форматирования">Создание нового блочного контекста форматирования</h3> -<p>Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создает блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создает новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.</p> +<p>Элемент {{HTMLElement("html")}} не единственный, кто может создавать блочный контекст форматирования. Любой элемент, который по умолчанию представляет собой блок, также создаёт блочный контекст форматирования для своих потомков. Кроме того, существуют свойства CSS, которые могут заставить элемент создавать БКФ, даже если он не делает этого по умолчанию. Это может быть полезным поскольку новый БКФ будет вести себя во многом как внешний документа, в том смысле, что он создаёт новую мини-раскладку в основной раскладке. БКФ содержит все внутри себя, {{cssxref("float")}} and {{cssxref("clear")}} применяются только к элементам, которые находится в том же контексте форматирования, также как и поля (margings) схлопываются только между элементами одного и того же контекста форматирования.</p> -<p>Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создается в следующих случаях:</p> +<p>Кроме корневого элемента ({{HTMLElement("html")}}) новый БКФ создаётся в следующих случаях:</p> <ul> <li>плавающие элементы ({{cssxref("float", "float: left", "#left")}} или {{cssxref("float", "float: right", "#right")}});</li> diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index a616e84382..964f414675 100644 --- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h3 id="Расположение_элемента">Расположение элемента</h3> -<p>Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путем привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.</p> +<p>Вы можете размещать элементы в заданном месте Grid, используя номера строк, имена или путём привязки к области Grid. Grid также содержит алгоритм управления размещением элементов, не имеющих явной позиции в Grid.</p> <h3 id="Создание_дополнительных_полос_для_хранения_контента">Создание дополнительных полос для хранения контента</h3> @@ -33,7 +33,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Grid_контейнер">Grid контейнер</h2> -<p>Мы создаем<em> grid контейнер</em>, объявляя<strong> display: grid </strong>или <strong>display: inline-grid </strong>на элементе. Как только мы это сделаем, <em>все прямые дети</em> этого элемента станут <em>элементами сетки</em>.</p> +<p>Мы создаём<em> grid контейнер</em>, объявляя<strong> display: grid </strong>или <strong>display: inline-grid </strong>на элементе. Как только мы это сделаем, <em>все прямые дети</em> этого элемента станут <em>элементами сетки</em>.</p> <p>В этом примере есть div, содержащий класс wrapper с пятью потомками</p> @@ -184,7 +184,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}</p> </div> -<p>В следующем примере мы создаем грид с треком в <code>2fr</code> и двумя треками по <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p> +<p>В следующем примере мы создаём грид с треком в <code>2fr</code> и двумя треками по <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -202,7 +202,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h3 id="Задание_треков_с_помощью_нотации_repeat">Задание треков с помощью нотации <code>repeat()</code></h3> -<p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или ее часть. Например, такое задание грида:</p> +<p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или её часть. Например, такое задание грида:</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -218,7 +218,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout } </pre> -<p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создается грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p> +<p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -226,7 +226,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout } </pre> -<p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с ее помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p> +<p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -236,11 +236,11 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h3 id="Явный_и_неявный_грид">Явный и неявный грид</h3> -<p>Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определенного данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создает строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задается автоматически в зависимости от находящегося в них контента.</p> +<p>Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.</p> <p>Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств {{cssxref("grid-auto-rows")}} и {{cssxref("grid-auto-columns")}}.</p> -<p>В примере ниже мы задаем <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p> +<p>В примере ниже мы задаём <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p> <pre class="brush: html notranslate"><div class="wrapper"> <div>One</div> @@ -345,7 +345,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В дальнейшем мы детально рассмотрим размещение элементов с помощью линий, а пока остановимся на простом способе. При размещении элемента мы ссылаемся именно на линию, а не на трек. </p> -<p>В следующем примере мы размещаем первые два элемента в нашем гриде из трех колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.</p> +<p>В следующем примере мы размещаем первые два элемента в нашем гриде из трёх колоночных треков с помощью свойств {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}}. Поскольку режим написания слева направо, первый элемент размещается, начиная с колоночной линии 1, и занимает пространство до колоночной линии 4, которая в нашем случае - самая правая линия грида. Наш элемент начинается со строчной линии 1 и заканчивается на строчной линии 3, таким образом занимая два строчных трека.</p> <p>Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. </p> @@ -405,19 +405,19 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Grid-ячейки">Grid-ячейки</h2> -<p>Грид-ячейка (<em>grid cell)</em> - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определен для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.</p> +<p>Грид-ячейка (<em>grid cell)</em> - наименьшая единица измерения грида, концептуально похожая на ячейку таблицы. Как мы видели в предыдущих примерах, едва грид определён для родительского элемента, дочерние элементы автоматически размещаются в каждой ячейке нашего заданного грида. На рисунке ниже первая ячейка грида выделена цветом.</p> <p><img alt="The first cell of the grid highlighted" src="https://mdn.mozillademos.org/files/14643/1_Grid_Cell.png" style="height: 233px; width: 350px;"></p> <h2 id="Grid-области">Grid-области</h2> -<p>Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создает грид-область (<em>grid area)</em>. Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. </p> +<p>Элементы могут занимать одну или несколько ячеек внутри строки или колонки, и подобное поведение создаёт грид-область (<em>grid area)</em>. Грид-области должны быть перпендикулярными, - невозможно создать область, например, в форме буквы L. Выделенная цветом грид-область на рисунке ниже занимает два строчных трека и два колоночных. </p> <p><img alt="A grid area" src="https://mdn.mozillademos.org/files/14645/1_Grid_Area.png" style="height: 238px; width: 357px;"></p> <h2 id="Зазоры_Gutters">Зазоры (Gutters)</h2> -<p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращенного свойства {{cssxref("grid-gap")}}. В примере ниже мы создаем зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p> +<p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращённого свойства {{cssxref("grid-gap")}}. В примере ниже мы создаём зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -465,7 +465,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Вложенные_гриды">Вложенные гриды</h2> -<p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трехколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p> +<p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трёхколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p> <div id="nesting"> <pre class="brush: html notranslate"><div class="wrapper"> @@ -483,7 +483,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p><img alt="Nested grid in flow" src="https://mdn.mozillademos.org/files/14641/1_Nested_Grids_in_flow.png" style="height: 512px; width: 900px;"></p> -<p>Если мы задаем для <code>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p> +<p>Если мы задаём для <code>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p> <pre class="brush: css notranslate">.box1 { grid-column-start: 1; @@ -531,7 +531,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Примечание. Эта функция поставляется в браузере Firefox 71, который в настоящее время является единственным браузером для реализации subgrid.</p> </div> -<p>В приведенном выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p> +<p>В приведённом выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p> <pre class="brush: css notranslate">.box1 { grid-column-start: 1; @@ -545,7 +545,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Размещение_элементов_с_помощью_z-index">Размещение элементов с помощью <code>z-index</code></h2> -<p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещенными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p> +<p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p> <div id="l_ex"> <pre class="brush: html notranslate"><div class="wrapper"> diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 8ea1b8d352..80d1ad38af 100644 --- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -5,9 +5,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout --- <p>Если вы знакомы с <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a>, вы уже столкнулись с тем, как гибкие элементы могут быть правильно выровнены внутри контейнера flex. Эти свойства выравнивания, которые мы впервые встретили в спецификации flexbox, были перенесены в новую спецификацию под названием <a href="https://drafts.csswg.org/css-align/">Box Alignment Level 3</a>. Эта спецификация содержит подробную информацию о том, как выравнивание должно работать во всех различных методах компоновки.</p> -<p>Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера еще не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.</p> +<p>Каждый метод макета, который реализует выравнивание ящиков, будет иметь некоторые отличия из-за того, что каждый метод имеет разные функции и ограничения (и унаследованное поведение), что делает невозможным выравнивание точно таким же образом по всем направлениям. Спецификация Box Alignment содержит подробную информацию для каждого метода, однако вы были бы разочарованы, если бы попытались выполнить выравнивание по многим методам прямо сейчас, поскольку поддержка браузера ещё не существует. Там, где у нас есть поддержка браузера для свойств выравнивания и распределения пространства из спецификации Box Alignment, в grid макета.</p> -<p>В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнем с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.</p> +<p>В этом руководстве представлены демонстрации того, как работает выравнивание ячеек в макете. Вы увидите много общего в том, как эти свойства и ценности работают в flexbox. Из-за того, что сетка двумерна и однобочечна, существует несколько небольших различий, за которыми вы должны следить. Поэтому мы начнём с рассмотрения двух осей, с которыми мы сталкиваемся при выравнивании объектов в сетке.</p> <h2 id="Две_оси_grid_layout">Две оси grid layout</h2> @@ -100,7 +100,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Свойство {{cssxref ("align-items")}} устанавливает свойство {{cssxref ("align-self")}} для всех дочерних элементов сетки. Это означает, что вы можете установить свойство индивидуально, используя <code>align-self</code> по элементу сетки.</p> -<p>В следующем примере я использую свойство <code>align-self</code>, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения <code>start</code>, третий <code>end</code> и четвертый <code>center</code>.</p> +<p>В следующем примере я использую свойство <code>align-self</code>, чтобы продемонстрировать различные значения выравнивания. В первой области отображается поведение по умолчанию для выравнивания, которое должно растягиваться. Второй элемент имеет значение самоограничения <code>start</code>, третий <code>end</code> и четвёртый <code>center</code>.</p> <div id="alignment_2"> <div class="hidden"> @@ -165,7 +165,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Спецификация указывает, что поведение по умолчанию в {{cssxref ("align-self")}} должно растягиваться, за исключением элементов, которые имеют внутреннее соотношение сторон, в этом случае они ведут себя как <code>start</code>. Причиной этого является то, что если элементы с соотношением сторон настроены на растяжение, это значение по умолчанию будет искажать их.</p> -<p>Это поведение было уточнено в спецификации, при этом браузеры еще не реализовали правильное поведение. Пока это не произойдет, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путем установки {{cssxref ("align-self")}} и {{cssxref ("justify-self") }} <code>start</code>. Это будет имитировать правильное поведение после его реализации.</p> +<p>Это поведение было уточнено в спецификации, при этом браузеры ещё не реализовали правильное поведение. Пока это не произойдёт, вы можете убедиться, что элементы не растягиваются, например изображения, которые являются прямыми дочерними элементами сетки, путём установки {{cssxref ("align-self")}} и {{cssxref ("justify-self") }} <code>start</code>. Это будет имитировать правильное поведение после его реализации.</p> <h2 id="Justifying_Items_on_the_Inline_or_Row_Axis">Justifying Items on the Inline or Row Axis</h2> @@ -185,7 +185,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Вы можете увидеть тот же пример, что и для {{cssxref ("align-items")}} ниже. На этот раз мы применяем свойство {{cssxref ("justify-self")}}.</p> -<p>Опять же, значение по умолчанию <code>stretch</code>, за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените ее, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:</p> +<p>Опять же, значение по умолчанию <code>stretch</code>, за исключением элементов с внутренним соотношением сторон. Это означает, что по умолчанию элементы сетки будут покрывать их площадь сетки, если вы не измените её, установив выравнивание. Первый элемент в примере демонстрирует это выравнивание по умолчанию:</p> <div id="alignment_3"> <div class="hidden"> @@ -316,7 +316,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <li><code>last baseline</code></li> </ul> -<p>В приведенном ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным желобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.</p> +<p>В приведённом ниже примере у меня есть контейнер сетки размером 500 пикселей на 500 пикселей. Я определил 3 строки и столбцы, каждый из 100 пикселей с 10-пиксельным жёлобом. Это означает, что внутри контейнера сетки есть пространство как в блочном, так и в линейном направлениях.</p> <p>Свойство <code>align-content</code> применяется к контейнеру сетки, поскольку оно работает на всей сетке. Поведение по умолчанию в макете сетки <code>start</code>, поэтому наши дорожки сетки находятся в верхнем левом углу сетки, выровнены по отношению к стартовым линиям сетки:</p> @@ -499,7 +499,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Стоит отметить, что использование этих значений пространственного распределения может привести к увеличению элементов в вашей сетке. Если элемент охватывает более одной дорожки сетки, так как дополнительное пространство добавляется между дорожками, этот предмет должен стать большим, чтобы поглотить пространство. Мы всегда работаем в строгой сетке. Поэтому, если вы решите использовать эти значения, убедитесь, что содержимое ваших треков может справиться с дополнительным пространством или что вы использовали свойства выравнивания для элементов, чтобы заставить их перемещаться в начало, а не растягиваться.</p> -<p>В приведенном ниже изображении я поместил сетку с <code>align-content</code>, со значением <code>start</code> рядом с сеткой, когда значение <code>align-content</code> имеет значение <code>space-between</code>. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:</p> +<p>В приведённом ниже изображении я поместил сетку с <code>align-content</code>, со значением <code>start</code> рядом с сеткой, когда значение <code>align-content</code> имеет значение <code>space-between</code>. Вы можете видеть, как элементы 1 и 2, которые охватывают два ряда дорожек, взяты на дополнительной высоте, поскольку они получают дополнительное пространство, добавленное к промежутку между этими двумя дорожками:</p> <p><img alt="Demonstrating how items become larger if we use space-between." src="https://mdn.mozillademos.org/files/14729/7_space-between.png" style="height: 534px; width: 1030px;"></p> diff --git a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index a481d519ad..d94570b6f2 100644 --- a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -8,7 +8,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <h2 id="Логические_и_физические_свойства_и_ценности">Логические и физические свойства и ценности</h2> -<p>CSS полон <strong>физических</strong> слов позиционирования - слева и справа, сверху и снизу. Если мы позиционируем элемент с использованием абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы обжимать элемент вокруг. В нижеприведенном фрагменте кода элемент помещается в 20 пикселей сверху и 30 пикселей слева от контейнера:</p> +<p>CSS полон <strong>физических</strong> слов позиционирования - слева и справа, сверху и снизу. Если мы позиционируем элемент с использованием абсолютного позиционирования, мы используем эти физические ключевые слова в качестве значений смещения, чтобы обжимать элемент вокруг. В нижеприведённом фрагменте кода элемент помещается в 20 пикселей сверху и 30 пикселей слева от контейнера:</p> <pre class="brush:css">.container { position: relative; @@ -25,15 +25,15 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode </div> </pre> -<p>Еще одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать <code>text-align: right</code> выравнивать текст вправо. В CSS есть также физические <strong>свойства</strong>. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.</p> +<p>Ещё одно место, где вы можете увидеть используемые физические ключевые слова, - это использовать <code>text-align: right</code> выравнивать текст вправо. В CSS есть также физические <strong>свойства</strong>. Мы добавляем поля, дополнения и границы, используя эти физические свойства {{cssxref ("margin-left")}}, {{cssxref ("padding-left")}} и т. д.</p> <p>Мы называем эти ключевые слова и свойства <em>физическими</em>, потому что они относятся к экрану, на который вы смотрите. Слева всегда слева, независимо от того, в каком направлении работает ваш текст.</p> -<p>Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведенном ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (<code>text-align</code>) влево. Я добавил <code>dir = "rtl"</code> в элемент <code>html</code>, который переключает режим записи по умолчанию для документа на английском языке <code>ltr</code>. Вы можете видеть, что первый абзац остается слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.</p> +<p>Это может стать проблемой при разработке сайта, который должен работать на нескольких языках, включая языки с текстом, начинающимся справа, а не слева. Браузеры хорошо справляются с направлением текста и вам даже не нужно работать на языке {{glossary ("rtl")}}, чтобы посмотреть. В приведённом ниже примере у меня есть два абзаца. У одного не установлено {{cssxref ("text-align")}}, второе имеет выравнивание текста (<code>text-align</code>) влево. Я добавил <code>dir = "rtl"</code> в элемент <code>html</code>, который переключает режим записи по умолчанию для документа на английском языке <code>ltr</code>. Вы можете видеть, что первый абзац остаётся слева направо, из-за оставленного значения выравнивания текста. Второе, однако, переключает направление и текст пробегает справа налево.</p> <p><img alt="A simple example of text direction." src="https://mdn.mozillademos.org/files/14733/8_direction_simple_example.png" style="height: 354px; width: 1136px;"></p> -<p>Это очень простой пример проблемы с физическими значениями и свойствами, которые используются в CSS. Они не позволяют браузеру выполнять работу по переключению режима записи, поскольку они делают предположение, что текст течет слева направо и сверху вниз.</p> +<p>Это очень простой пример проблемы с физическими значениями и свойствами, которые используются в CSS. Они не позволяют браузеру выполнять работу по переключению режима записи, поскольку они делают предположение, что текст течёт слева направо и сверху вниз.</p> <h3 id="Логические_свойства_и_значения">Логические свойства и значения</h3> @@ -41,13 +41,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <h2 id="Block_и_Inline">Block и Inline</h2> -<p>Как только мы начнем заниматься логическими, а не физическими свойствами, мы перестаем видеть мир как слева направо, так и сверху вниз. Нам нужна новая контрольная точка и именно здесь понимание использования <em>блока</em> и <em>встроенных</em> осей, которые мы встретили ранее в руководстве по выравниванию, становится очень полезным. Если вы можете начать видеть макет с точки зрения блочного и встроенного, то, как все работает в сетке, становится намного больше смысла.</p> +<p>Как только мы начнём заниматься логическими, а не физическими свойствами, мы перестаём видеть мир как слева направо, так и сверху вниз. Нам нужна новая контрольная точка и именно здесь понимание использования <em>блока</em> и <em>встроенных</em> осей, которые мы встретили ранее в руководстве по выравниванию, становится очень полезным. Если вы можете начать видеть макет с точки зрения блочного и встроенного, то, как все работает в сетке, становится намного больше смысла.</p> <p><img alt="An image showing the default direction of the Block and Inline Axes." src="https://mdn.mozillademos.org/files/14735/8-horizontal-tb.png" style="height: 256px; width: 500px;"></p> <h2 id="Режимы_записи_CSS">Режимы записи CSS</h2> -<p>Я собираюсь представить здесь еще одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о <a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes</a>. Это более подробно описано в этой спецификации, чем мы коснемся здесь.</p> +<p>Я собираюсь представить здесь ещё одну спецификацию, которую я буду использовать в своих примерах: спецификация CSS Writing Modes. Эта спецификация подробно описывает, как мы можем использовать эти разные режимы записи в CSS, а не только для поддержки языков, которые имеют другой режим записи на английском языке, но также и для творческих целей. Я буду использовать свойство {{cssxref ("write-mode")}}, чтобы внести изменения в режим записи, применяемый к нашей сетке, чтобы продемонстрировать, как работают логические значения. Однако, если вы хотите, чтобы вы меняли в режиме записи, я бы рекомендовал вам прочитать Jen Simmons отличную статью о <a href="https://24ways.org/2016/css-writing-modes/">CSS Writing Modes</a>. Это более подробно описано в этой спецификации, чем мы коснёмся здесь.</p> <h3 id="writing-mode">writing-mode</h3> @@ -61,7 +61,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <li><code>sideways-lr</code></li> </ul> -<p>Значение <code>horizontal-tb</code> является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. <a href="https://24ways.org/2016/css-writing-modes/">Jen’s article</a>. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию <code>horizontal-tb</code>, а второй использует <code>vertical-rl</code>. В тексте режима все еще выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.</p> +<p>Значение <code>horizontal-tb</code> является значением по умолчанию для текста в Интернете. Это направление, в котором вы читаете это руководство. Другие свойства изменят способ передачи текста в нашем документе, соответствующий различным режимам записи, найденным по всему миру. Опять же, для получения полной информации об этом см. <a href="https://24ways.org/2016/css-writing-modes/">Jen’s article</a>. В качестве простого примера у меня есть два параграфа ниже. Первый использует по умолчанию <code>horizontal-tb</code>, а второй использует <code>vertical-rl</code>. В тексте режима все ещё выполняется влево-вправо, однако направление текста вертикально - встроенный текст теперь проходит вниз по странице, сверху вниз.</p> <div id="writing_1"> <div class="hidden"> @@ -361,7 +361,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <h3 id="Странный_порядок_значений_в_свойстве_grid-area">Странный порядок значений в свойстве grid-area</h3> -<p>Вы можете использовать свойство {{cssxref ("grid-area")}}, чтобы указать все четыре строки области сетки как одно значение. Когда люди впервые сталкиваются с этим, они часто удивляются тому, что значения не следуют тому же порядку, что и сокращенное поле, которое работает по часовой стрелке: сверху, справа, внизу, слева.</p> +<p>Вы можете использовать свойство {{cssxref ("grid-area")}}, чтобы указать все четыре строки области сетки как одно значение. Когда люди впервые сталкиваются с этим, они часто удивляются тому, что значения не следуют тому же порядку, что и сокращённое поле, которое работает по часовой стрелке: сверху, справа, внизу, слева.</p> <p>Порядок значений <code>grid-area</code>:</p> @@ -381,7 +381,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <li><code>right</code></li> </ul> -<p>Это против часовой стрелки! Итак, обратное тому, что мы делаем для полей и заполнения. Как только вы поймете, что <code>grid-area</code> видит мир как "block и inline", вы можете помнить, что мы устанавливаем два запуска, а затем два конца. Когда вы знаете, это становится намного логичнее!</p> +<p>Это против часовой стрелки! Итак, обратное тому, что мы делаем для полей и заполнения. Как только вы поймёте, что <code>grid-area</code> видит мир как "block и inline", вы можете помнить, что мы устанавливаем два запуска, а затем два конца. Когда вы знаете, это становится намного логичнее!</p> <h2 id="Смешанные_режимы_записи_и_макет_сетки">Смешанные режимы записи и макет сетки</h2> @@ -436,7 +436,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <h3 id="Логические_свойства_для_всего!">Логические свойства для всего!</h3> -<p>Наши новые методы компоновки дают нам возможность использовать эти логические значения для размещения элементов, однако, как только мы начнем объединять их с физическими свойствами, используемыми для полей и отступов, нам нужно помнить, что эти физические свойства не изменятся в соответствии с режимом записи.</p> +<p>Наши новые методы компоновки дают нам возможность использовать эти логические значения для размещения элементов, однако, как только мы начнём объединять их с физическими свойствами, используемыми для полей и отступов, нам нужно помнить, что эти физические свойства не изменятся в соответствии с режимом записи.</p> <p><a href="https://drafts.csswg.org/css-logical/">Спецификация логических свойств CSS</a> имеет целью изменить это и в будущем мы сможем использовать <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">логические эквиваленты</a> для свойств, такие как {{cssxref ("margin-left")}} и {{cssxref ("margin-right") }}, в нашем CSS. Firefox уже реализовал их, поэтому вы можете попробовать их прямо сейчас в Firefox. Я знаю в будущем, как только эти корабли повсюду, ваши знания «Блокировать и встроить» с помощью Grid означают, что вы точно знаете, как их использовать.</p> diff --git a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html index 2b99c113d1..4081789445 100644 --- a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html @@ -4,18 +4,18 @@ slug: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas original_slug: Web/CSS/CSS_Grid_Layout/Грид-области --- -<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">предыдущем обзоре</a> мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надежный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именованных, заранее определенных грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймете, почему его называют методом ascii-искусства в концепции макетов на гридах!</p> +<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">предыдущем обзоре</a> мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надёжный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именованных, заранее определённых грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймёте, почему его называют методом ascii-искусства в концепции макетов на гридах!</p> <h2 id="Имя_для_грид-области">Имя для грид-области</h2> -<p>Вы уже знакомы со свойством {{cssxref("grid-area")}}. Это то свойство, которое принимает в качестве значения номера четырех грид-линий, определяющих расположение грид-области.</p> +<p>Вы уже знакомы со свойством {{cssxref("grid-area")}}. Это то свойство, которое принимает в качестве значения номера четырёх грид-линий, определяющих расположение грид-области.</p> <pre class="brush: css">.box1 { grid-area: 1 / 1 / 4 / 2; } </pre> -<p>Что мы делаем, когда задаем все четыре значения? Мы определяем область, ограниченную данными грид-линиями. </p> +<p>Что мы делаем, когда задаём все четыре значения? Мы определяем область, ограниченную данными грид-линиями. </p> <p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p> @@ -30,7 +30,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p> -<p>С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.</p> +<p>С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей своё собственное имя. Именование областей ещё не создаёт никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.</p> <div id="Grid_Area_1"> <pre class="brush: css">.header { @@ -47,7 +47,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области } </pre> -<p>Определив имена, мы можем приступить к созданию макета. На этот раз вместо того, чтобы расположить элементы с помощью номеров линий, заданных для самих элементов, мы создаем весь макет в грид-контейнере.</p> +<p>Определив имена, мы можем приступить к созданию макета. На этот раз вместо того, чтобы расположить элементы с помощью номеров линий, заданных для самих элементов, мы создаём весь макет в грид-контейнере.</p> <pre class="brush: css">.wrapper { display: grid; @@ -93,7 +93,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}</p> </div> -<p>Если мы используем этот метод, то нам не нужно задавать что-то отдельно для грид-элементов, все задается для грид-контейнера. Весь макет описывается значением свойства {{cssxref("grid-template-areas")}}.</p> +<p>Если мы используем этот метод, то нам не нужно задавать что-то отдельно для грид-элементов, все задаётся для грид-контейнера. Весь макет описывается значением свойства {{cssxref("grid-template-areas")}}.</p> <h2 id="Оставляем_ячейку_пустой">Оставляем ячейку пустой</h2> @@ -158,9 +158,9 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <h2 id="Охватываем_несколько_ячеек">Охватываем несколько ячеек</h2> -<p>В нашем примере каждая из областей охватывает несколько грид-ячеек, и получаем мы подобный эффект за счет того, что через пробел повторяем имя этой грид-области несколько раз. Вы можете добавить дополнительные пробелы, чтобы аккуратно выравнять значения в <code>grid-template-areas</code>. В нашем примере мы пробелами подравняли <code>hd</code> и <code>ft</code> , чтобы они коррелировали с <code>main</code>.</p> +<p>В нашем примере каждая из областей охватывает несколько грид-ячеек, и получаем мы подобный эффект за счёт того, что через пробел повторяем имя этой грид-области несколько раз. Вы можете добавить дополнительные пробелы, чтобы аккуратно выравнять значения в <code>grid-template-areas</code>. В нашем примере мы пробелами подравняли <code>hd</code> и <code>ft</code> , чтобы они коррелировали с <code>main</code>.</p> -<p>Область, которую мы создаем подобными цепочками имен, должна быть прямоугольной. На данном этапе нельзя создать L-образную область. В спецификации говорится, что, возможно, в будущем подобная функциональность добавится. А сейчас мы можем охватывать строки так же легко, как и колонки. Например, давайте сделаем так, чтобы наш сайдбар простирался до конца футера. Для этого поменяем <code>.</code> на <code>sd</code>.</p> +<p>Область, которую мы создаём подобными цепочками имён, должна быть прямоугольной. На данном этапе нельзя создать L-образную область. В спецификации говорится, что, возможно, в будущем подобная функциональность добавится. А сейчас мы можем охватывать строки так же легко, как и колонки. Например, давайте сделаем так, чтобы наш сайдбар простирался до конца футера. Для этого поменяем <code>.</code> на <code>sd</code>.</p> <pre class="brush: css">.header { grid-area: hd; @@ -275,7 +275,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области } </pre> -<p>Внутри медиавыражений мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства — на трехколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью <code>grid-template-areas</code> я указываю куда стоит разместить грид-области. </p> +<p>Внутри медиавыражений мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства — на трёхколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью <code>grid-template-areas</code> я указываю куда стоит разместить грид-области. </p> <pre class="brush: css">@media (min-width: 500px) { .wrapper { @@ -308,13 +308,13 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <h2 id="Использование_grid-template-areas_для_элементов_UI">Использование <code>grid-template-areas</code> для элементов UI</h2> -<p>Многие из примеров grid, которые вы найдете в Интернете, предполагают, что вы будете использовать grid для макета главной страницы, однако grid может быть столь же полезна для небольших элементов. Использование {{cssxref ("grid-template-areas")}} может быть особенно приятным, так как в коде легко видеть, как выглядит ваш элемент.</p> +<p>Многие из примеров grid, которые вы найдёте в Интернете, предполагают, что вы будете использовать grid для макета главной страницы, однако grid может быть столь же полезна для небольших элементов. Использование {{cssxref ("grid-template-areas")}} может быть особенно приятным, так как в коде легко видеть, как выглядит ваш элемент.</p> <p>В качестве очень простого примера мы можем создать «медиа-объект». Это компонент с пространством для изображения или другого носителя с одной стороны, а контент - с другой. Изображение может отображаться справа или слева от окна.</p> <p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p> -<p>Наша сетка представляет собой двухколоночную трековую сетку, со столбцом для изображения размером <code>1fr</code> и текстом <code>3fr</code>. Если вы хотите область с фиксированной шириной изображения, тогда вы можете установить столбец изображения как ширину пикселя и назначить текстовую область <code>1fr</code>. Одна колонка трека <code>1fr</code> затем займет оставшуюся часть пространства.</p> +<p>Наша сетка представляет собой двухколоночную трековую сетку, со столбцом для изображения размером <code>1fr</code> и текстом <code>3fr</code>. Если вы хотите область с фиксированной шириной изображения, тогда вы можете установить столбец изображения как ширину пикселя и назначить текстовую область <code>1fr</code>. Одна колонка трека <code>1fr</code> затем займёт оставшуюся часть пространства.</p> <p>Мы предоставляем области изображения имя области сетки <code>img</code> и содержимое текстовой области, затем мы можем выложить их, используя свойство <code>grid-template-areas</code>.</p> @@ -407,7 +407,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>Рассмотрев различные способы размещения элементов на наших сетках и многие свойства, используемые для определения сетки, самое время взглянуть на пару сокращений, доступных для определения сетки и многое из всего этого в одной строке CSS.</p> -<p>Они могут быстро стать трудными для чтения для других разработчиков или даже для вашего будущего. Однако они являются частью спецификации и, вероятно, вы столкнетесь с ними в примерах или в использовании другими разработчиками, даже если вы решите не использовать их.</p> +<p>Они могут быстро стать трудными для чтения для других разработчиков или даже для вашего будущего. Однако они являются частью спецификации и, вероятно, вы столкнётесь с ними в примерах или в использовании другими разработчиками, даже если вы решите не использовать их.</p> <p>Прежде чем использовать какие-либо сокращения (shorthand), стоит помнить, что shorthand не только позволяют устанавливать множество свойств за один раз, но также действуют, чтобы <strong>сбросить объекты</strong> до их начальных значений, которых вы не используете, или не можете установить в сокращении. Поэтому, если вы используете сокращения, помните, что оно может сбросить все, что вы применили в другом месте.</p> @@ -415,7 +415,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <h3 id="grid-template"><code>grid-template</code></h3> -<p>Свойство {{cssxref ("grid-template")}} задает следующие свойства:</p> +<p>Свойство {{cssxref ("grid-template")}} задаёт следующие свойства:</p> <ul> <li>{{cssxref("grid-template-rows")}}</li> @@ -425,7 +425,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>Свойство называется явным сокращением сетки, потому что оно устанавливает те вещи, которые вы контролируете, когда вы определяете явную сетку, а не те, которые влияют на любые неявные строки или столбцы, которые могут быть созданы.</p> -<p>Следующий код создает макет, используя {{cssxref ("grid-template")}}, который совпадает с макетом, созданным ранее в этом руководстве.</p> +<p>Следующий код создаёт макет, используя {{cssxref ("grid-template")}}, который совпадает с макетом, созданным ранее в этом руководстве.</p> <pre class="brush: css">.wrapper { display: grid; @@ -443,7 +443,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <h3 id="grid"><code>grid</code></h3> -<p>Сокращение {{cssxref ("grid")}} идет еще дальше, а также задает свойства, используемые неявной сеткой. Таким образом, вы будете устанавливать:</p> +<p>Сокращение {{cssxref ("grid")}} идёт ещё дальше, а также задаёт свойства, используемые неявной сеткой. Таким образом, вы будете устанавливать:</p> <ul> <li>{{cssxref("grid-template-rows")}}</li> @@ -469,7 +469,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>Мы снова рассмотрим другие функции, предлагаемые этом сокращением позже в этих руководствах, когда мы рассмотрим автоматическое размещение и свойство <code>grid-auto-flow</code>.</p> -<p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы еще не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включенные в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p> +<p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы ещё не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включённые в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p> <section class="Quick_links" id="Quick_Links"> <ol> diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html index d02227c33f..3f345b98b8 100644 --- a/files/ru/web/css/css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Grid_Layout <h2 id="Basic_Example" name="Basic_Example">Базовый пример</h2> -<p>В приведенном ниже примере показана сетка состоящая из трех колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.</p> +<p>В приведённом ниже примере показана сетка состоящая из трёх колонок, в которой минимальная ширина элементов строки установлена в "100px", а максимальная в "auto". Grid-элементы располагаются в сетке линейно.</p> <div id="example"> <div class="hidden"> diff --git a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index 08e932f0b0..66e8c5ac2d 100644 --- a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -3,7 +3,7 @@ title: Layout using named grid lines slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines --- -<p>В предыдущих руководствах мы рассматривали размещение элементов по линиям, созданным путем определения треков сетки, а также способы размещения элементов с помощью именованных областей шаблона. В этом руководстве мы рассмотрим, как эти две вещи работают вместе, когда мы используем именование линий. Именование линий очень полезно, но при комбинировании именований и размеров сетки иногда получаются очень запутанный синтаксис. Представленные примеры помогут внести ясность и упростить понимание синтаксиса.</p> +<p>В предыдущих руководствах мы рассматривали размещение элементов по линиям, созданным путём определения треков сетки, а также способы размещения элементов с помощью именованных областей шаблона. В этом руководстве мы рассмотрим, как эти две вещи работают вместе, когда мы используем именование линий. Именование линий очень полезно, но при комбинировании именований и размеров сетки иногда получаются очень запутанный синтаксис. Представленные примеры помогут внести ясность и упростить понимание синтаксиса.</p> <h2 id="Именование_линий_при_определении_сетки">Именование линий при определении сетки</h2> @@ -29,7 +29,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines </pre> </div> -<p>При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена <code>main-start</code> для начала и <code>main-end</code> для конца контейнера, причем как для строк, так и для столбцов. Затем определил центральный блок сетки как <code>content-start</code> и <code>content-end</code>, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.</p> +<p>При определении сетки я задаю линиям имена, помещая их внутри квадратных скобок. Можете использовать любые имена, какие вам нравятся. Я задал имена <code>main-start</code> для начала и <code>main-end</code> для конца контейнера, причём как для строк, так и для столбцов. Затем определил центральный блок сетки как <code>content-start</code> и <code>content-end</code>, опять же как для столбцов, так и для строк. Но вам необязательно именовать все линии в вашей сетке, можете именовать только опорные линии вашего макета.</p> <pre class="brush: css">.wrapper { display: grid; @@ -77,15 +77,15 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>Теперь при линейном размещении вы можете смешивать номера строк или их имена. Именование строк полезно при создании адаптивного дизайна, в котором вы переопределяете саму сетку, а не положение содержимого внутри сетки.</p> -<h3 id="Присвоение_линиям_нескольких_имен">Присвоение линиям нескольких имен</h3> +<h3 id="Присвоение_линиям_нескольких_имён">Присвоение линиям нескольких имён</h3> <p>При необходимости можно присвоить строке более одного имени. Например, <code>sidebar-end</code> для обозначении конца области <code>sidebar</code>, и <code>main-start</code> для начала области <code>main</code>. Укажите имена внутри квадратных скобок через пробел <code>[sidebar-end main-start]</code>. В дальнейшем вы можете обращаться к этой строке по любому из этих имен.</p> <h2 id="Неявные_области_сетки_из_именованных_линий">Неявные области сетки из именованных линий</h2> -<p>Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a> - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведет к путанице - например, <code>span</code>. Идентификаторы не заключаются в кавычки.</p> +<p>Ранее уже упоминалось, что вы можете выбирать для линий любые имена. Такое имя является <a href="https://drafts.csswg.org/css-values-4/#custom-idents">custom ident</a> - именем, определяемым автором. При выборе имени вам нужно избегать слов, которые могут использоваться в спецификации, что приведёт к путанице - например, <code>span</code>. Идентификаторы не заключаются в кавычки.</p> -<p>Хотя вы можете выбрать любые имена, но если вы добавляете <code>-start</code> и <code>-end</code> к линиям вокруг области, как в приведенном выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмем приведенный выше пример, у меня есть <code>content-start</code> и <code>content-end</code> как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем <code>content</code>, которую можно по своему усмотрению.</p> +<p>Хотя вы можете выбрать любые имена, но если вы добавляете <code>-start</code> и <code>-end</code> к линиям вокруг области, как в приведённом выше примере, то сетка создаст вам именованную область основного используемого имени. Возьмём приведённый выше пример, у меня есть <code>content-start</code> и <code>content-end</code> как для строк, так и для столбцов. Это означает, что будет создана также область сетки с именем <code>content</code>, которую можно по своему усмотрению.</p> <div id="implicit_areas_from_lines"> <div class="hidden"> @@ -131,7 +131,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <h2 id="Неявные_линии_сетки_из_именованных_областей">Неявные линии сетки из именованных областей</h2> -<p>Мы видели, как с помощью именованных линий можно создать именованную область. Это работает и наоборот. Именованные области создают именованные строки, которые можно использовать для размещения элементов. Если мы возьмем макет, созданный в руководстве по областям шаблона сетки, мы можем использовать линии, созданные нашими областями, чтобы увидеть, как это работает.</p> +<p>Мы видели, как с помощью именованных линий можно создать именованную область. Это работает и наоборот. Именованные области создают именованные строки, которые можно использовать для размещения элементов. Если мы возьмём макет, созданный в руководстве по областям шаблона сетки, мы можем использовать линии, созданные нашими областями, чтобы увидеть, как это работает.</p> <p>В этом примере я добавил дополнительный div с классом <code>overlay</code>. Мы назвали области, созданные с помощью свойства grid-area, а затем макет, созданный в grid-template-areas. Именованные области:</p> @@ -232,7 +232,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>Учитывая, что у нас есть возможность позиционировать создание линий из именованных областей и областей из именованных линий, стоит потратить время на планирование стратегии именования, когда вы начинаете создавать свой макет. Выбирайте имена, которые будут иметь смысл для вас и вашей команды, это облегчит использование созданных вами макетов.</p> -<h2 id="Определение_одноименных_линий_при_помощи_функции_repeat">Определение одноименных линий при помощи функции repeat()</h2> +<h2 id="Определение_одноимённых_линий_при_помощи_функции_repeat">Определение одноимённых линий при помощи функции repeat()</h2> <p>Если вы хотите дать всем линиям в вашей сетке уникальное имя, то вам нужно будет написать длинное определение трека, а не использовать синтаксис повтора, так как вам нужно добавить имя в квадратных скобках при определении треков. Если вы используете синтаксис повтора, то в конечном итоге получите несколько строк с одинаковым именем, однако это тоже может быть очень полезно.</p> @@ -272,7 +272,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines } </pre> -<p>Вы можете использовать ключевое слово <code>span</code>. Следующий элемент будет расположен начиная с седьмой линии и займет три линии.</p> +<p>Вы можете использовать ключевое слово <code>span</code>. Следующий элемент будет расположен начиная с седьмой линии и займёт три линии.</p> <pre class="brush: css">.item2 { grid-column: col-start 7 / span 3; @@ -293,14 +293,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p><img alt="The 12 column grid with items placed. The Grid Highlighter shows the position of the lines." src="https://mdn.mozillademos.org/files/14695/5_named_lines1.png" style="height: 156px; width: 1958px;"></p> -<p>Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведенный ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.</p> +<p>Синтаксис повтора также может принимать трек-лист , это не просто должен быть один размер трека, который повторяется. Приведённый ниже код создаст сетку из восьми дорожек с более узким столбцом ширины 1fr с именем col1-start и более широким столбцом 3fr с именем col2-start.</p> <pre class="brush: css">.wrapper { grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr); } </pre> -<p>Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имен в неповторяющемся определении трека. Следующее определение создает четыре трека 1fr, каждый из которых имеет начальную и конечную линии.</p> +<p>Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имён в неповторяющемся определении трека. Следующее определение создаёт четыре трека 1fr, каждый из которых имеет начальную и конечную линии.</p> <pre class="brush: css">.wrapper { grid-template-columns: repeat(4, [col-start] 1fr [col-end] ); @@ -314,7 +314,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines } </pre> -<p>Если вы использовали список треков, то вы можете использовать ключевое слово <code>span</code> не только для охвата ряда строк, но и для охвата ряда строк с определенным именем..</p> +<p>Если вы использовали список треков, то вы можете использовать ключевое слово <code>span</code> не только для охвата ряда строк, но и для охвата ряда строк с определённым именем..</p> <div id="span_line_number"> <div class="hidden"> @@ -360,7 +360,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>{{ EmbedLiveSample('span_line_number', '500', '330') }}</p> </div> -<p>За последние три руководства вы обнаружили, что существует множество различных способов размещения элементов с помощью сетки. На первый взгляд это может показаться чрезмерно сложным, но помните, что вам не нужно использовать их все. На практике я нахожу, что для простых макетов хорошо работает использование именованных областей шаблонов, это дает хорошее визуальное представление о том, как выглядит ваш макет, и возможность легко перемещать элементы по сетке.</p> +<p>За последние три руководства вы обнаружили, что существует множество различных способов размещения элементов с помощью сетки. На первый взгляд это может показаться чрезмерно сложным, но помните, что вам не нужно использовать их все. На практике я нахожу, что для простых макетов хорошо работает использование именованных областей шаблонов, это даёт хорошее визуальное представление о том, как выглядит ваш макет, и возможность легко перемещать элементы по сетке.</p> <p>Если вы работаете со строгим макетом из нескольких столбцов, например, демонстрация именованных строк в последней части этого руководства работает очень хорошо. Если вы рассматриваете сеточные системы, в таких фреймворках, как Foundation или Bootstrap, которые основаны на сетке из 12 столбцов. Затем фреймворк импортирует код для выполнения всех вычислений, чтобы убедиться, что столбцы складываются до 100%. С помощью Grid layout единственный код, который нам нужен для нашего грид-фреймворка, - это:</p> @@ -372,7 +372,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines } </pre> -<p>Затем мы можем использовать этот фреймворк для верстки нашей страницы. Например, чтобы создать макет из трех столбцов с верхним и нижним колонтитулами, у меня может быть следующая разметка.</p> +<p>Затем мы можем использовать этот фреймворк для вёрстки нашей страницы. Например, чтобы создать макет из трёх столбцов с верхним и нижним колонтитулами, у меня может быть следующая разметка.</p> <div class="hidden"> <pre class="brush: css">* {box-sizing: border-box;} @@ -432,7 +432,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p><img alt="The layout with the grid highlighted." src="https://mdn.mozillademos.org/files/14697/5_named_lines2.png" style="height: 378px; width: 1958px;"></p> </div> -<p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнете создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдете свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p> +<p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнёте создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдёте свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p> <section class="Quick_links" id="Quick_Links"> <ol> diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index e2086dee05..35feac5051 100644 --- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -13,13 +13,13 @@ original_slug: >- --- <p>В статье, касавшейся <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">основных понятий позиционирования элементов с помощью гридов</a>, мы кратенько рассмотрели, как располагать элементы в гриде, используя номера линий. Теперь давайте детально исследуем то, как работает эта фундаментальная часть спецификации.</p> -<p>Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда Вы работаете с гридами, пронумерованные линии у Вас есть <strong>всегда</strong>. Линии нумеруются и для колонок, и для строк, отсчет начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.</p> +<p>Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда Вы работаете с гридами, пронумерованные линии у Вас есть <strong>всегда</strong>. Линии нумеруются и для колонок, и для строк, отсчёт начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.</p> <h2 id="Базовый_пример">Базовый пример</h2> -<p>В качестве крайне простого примера давайте возьмем грид с тремя треками-колонками и тремя треками-строками. Такой грид дает нам по 4 линии для каждого направления.</p> +<p>В качестве крайне простого примера давайте возьмём грид с тремя треками-колонками и тремя треками-строками. Такой грид даёт нам по 4 линии для каждого направления.</p> -<p>Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырех первых ячеек. Если Вы воспользуетесь <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> , то увидите, как грид инициирует колонки и строки.</p> +<p>Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырёх первых ячеек. Если Вы воспользуетесь <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> , то увидите, как грид инициирует колонки и строки.</p> <p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> @@ -61,7 +61,7 @@ original_slug: >- <h2 id="Позиционирование_элементов_по_номерам_линий">Позиционирование элементов по номерам линий</h2> -<p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвертой строчной линии.</p> +<p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвёртой строчной линии.</p> <div id="Line_Number"> <pre class="brush: css notranslate">.box1 { @@ -244,7 +244,7 @@ original_slug: >- <p>{{ EmbedLiveSample('End_Lines', '300', '330') }}</p> </div> -<p>Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращенная запись будет выглядеть вот так, без слеша и без второго значения:</p> +<p>Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращённая запись будет выглядеть вот так, без слеша и без второго значения:</p> <div id="New_Shorthand"> <div class="hidden"> @@ -300,7 +300,7 @@ original_slug: >- <h2 id="Свойство_grid-area">Свойство <code>grid-area</code></h2> -<p>Мы можем пойти еще дальше и определить целую область с помощью одного единственного свойства – {{cssxref("grid-area")}}. Порядок свойств для грид-области следующий:</p> +<p>Мы можем пойти ещё дальше и определить целую область с помощью одного единственного свойства – {{cssxref("grid-area")}}. Порядок свойств для грид-области следующий:</p> <ul> <li>grid-row-start</li> @@ -355,7 +355,7 @@ original_slug: >- <p>{{ EmbedLiveSample('The_grid-area_property', '300', '330') }}</p> -<p>Порядок значений для <code>grid-area</code> может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращенных свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определенными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырех направлений относительно потока:</p> +<p>Порядок значений для <code>grid-area</code> может показаться немного странным, он противоположен тому порядку, в котором мы, например, записываем значения для сокращённых свойств margin и padding. Но сделано это потому, что грид работает с направлениями относительно потока, определёнными в спецификации CSS Writing Modes. В дальнейшем мы рассмотрим, как гриды взаимодействуют с режимами написания (writing modes), но пока давайте примем за данность, что мы имеем дело с концепцией четырёх направлений относительно потока:</p> <ul> <li>block-start (начало блока)</li> @@ -366,11 +366,11 @@ original_slug: >- <p>Мы работаем с русским, языком с написанием слева направо. Начало нашего блока (block-start) - верхняя строчная линия грид-контейнера, конец блока (block-end) - последняя строчная линия контейнера. Начало строки (inline-start) - самая левая колоночная линия, поскольку начало строки - это всегда точка, с которой начинается написание текста в заданном режиме написания. Конец строки (inline-end) - последняя колоночная линия грида.</p> -<p>Когда мы задаем нашу грид-область с помощью свойства <code>grid-area</code> , мы сначала определяем обе начальные линии <code>block-start</code> и <code>inline-start</code>, а затем обе конечные линии <code>block-end</code> и <code>inline-end</code>. Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания веб-сайты - многонаправленные структуры.</p> +<p>Когда мы задаём нашу грид-область с помощью свойства <code>grid-area</code> , мы сначала определяем обе начальные линии <code>block-start</code> и <code>inline-start</code>, а затем обе конечные линии <code>block-end</code> и <code>inline-end</code>. Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания веб-сайты - многонаправленные структуры.</p> <h2 id="Считая_с_конца">Считая с конца</h2> -<p>Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка - самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет <code>-1</code>, а линий непосредственно перед ними <code>-2,</code> и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (<em>explicit grid)</em>, то есть грида, определенного с помощью <code>grid-template-columns</code> и<code>grid-template-rows.</code> Любые линии строк и колонок, добавленные неявным гридом (<em>implicit grid)</em> не считаются.</p> +<p>Мы также можем отсчитывать грид-линии с конца, то есть с последней (для русского языка - самой правой) колоночной и последней (самой нижней) строчной линий. Индекс этих линий будет <code>-1</code>, а линий непосредственно перед ними <code>-2,</code> и так далее. Нужно помнить, что под последней линией понимается последняя линия явного грида (<em>explicit grid)</em>, то есть грида, определённого с помощью <code>grid-template-columns</code> и<code>grid-template-rows.</code> Любые линии строк и колонок, добавленные неявным гридом (<em>implicit grid)</em> не считаются.</p> <p>В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краев.</p> @@ -504,9 +504,9 @@ original_slug: >- <p>{{ EmbedLiveSample('Gutters_or_Alleys', '300', '350') }}</p> -<h3 id="Сокращенная_запись_для_грид-зазоров">Сокращенная запись для грид-зазоров</h3> +<h3 id="Сокращённая_запись_для_грид-зазоров">Сокращённая запись для грид-зазоров</h3> -<p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаем два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p> +<p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаём два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p> <pre class="brush: css notranslate">.wrapper { display: grid; @@ -516,7 +516,7 @@ original_slug: >- } </pre> -<p>В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от нее на расстоянии зазора, и Вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если Вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же - определите трек, а не зазор.</p> +<p>В терминах расположения элементов по грид-линиям (line-based positioning) зазоры ведут себя так, как если бы самой линии была добавлена толщина. Все, что должно было начинаться от линии, начинается от неё на расстоянии зазора, и Вы не можете адресовать зазор напрямую или поместить в него что-нибудь. Если Вам нужны зазоры, которые ведут себя, как обыкновенные треки, что же - определите трек, а не зазор.</p> <h2 id="Использование_ключевого_слова_span">Использование ключевого слова <code>span</code> </h2> @@ -572,7 +572,7 @@ original_slug: >- <p>{{ EmbedLiveSample('Using_the_span_keyword', '300', '330') }}</p> -<p>Ключевое слово <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаем начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p> +<p>Ключевое слово <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаём начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p> <pre class="notranslate">.box1 { grid-column-start: 1; @@ -590,7 +590,7 @@ original_slug: >- } </pre> -<p>Чтобы лучше освоиться с размещением элементов по грид-линиям, попробуйте собрать несколько распространенных макетов, располагая элементы на гридах с различным количеством колонок. Помните, что если вы не размещаете все Ваши элементы, оставшиеся располагаются в соответствии с правилами авторазмещения. В результате может получиться как раз тот макет, который Вам нужен, но не факт, и если что-то пошло не так, проверьте, определили ли Вы позицию для проблемного элемента.</p> +<p>Чтобы лучше освоиться с размещением элементов по грид-линиям, попробуйте собрать несколько распространённых макетов, располагая элементы на гридах с различным количеством колонок. Помните, что если вы не размещаете все Ваши элементы, оставшиеся располагаются в соответствии с правилами авторазмещения. В результате может получиться как раз тот макет, который Вам нужен, но не факт, и если что-то пошло не так, проверьте, определили ли Вы позицию для проблемного элемента.</p> <p>Также помните, что элементы на гриде могут перекрывать друг друга, если Вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если Вы некорректно задали начальные и конечные линии, результат может неприятно Вас удивить. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> будет крайне полезен в процессе обучения, особенно, когда Вы строите сложные гриды.</p> diff --git a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index c452871664..625700ca08 100644 --- a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <h2 id="Адаптивный_1-3_колоночный_макет_с_использованием_grid-template-areas"><font face="Liberation Sans, sans-serif"><font size="4">Адаптивный 1-3 колоночный макет с использованием</font></font> <code>grid-template-areas</code></h2> -<p>Многие веб-сайты являются разновидностью такого типа макета, с основным содержанием, боковыми панелями, хедером и футером. В адаптивном дизайне вы можете отобразить макет в виде одного столбца, добавив боковую панель в определенном месте, а затем ввести макет из трех столбцов для более широких экранов.</p> +<p>Многие веб-сайты являются разновидностью такого типа макета, с основным содержанием, боковыми панелями, хедером и футером. В адаптивном дизайне вы можете отобразить макет в виде одного столбца, добавив боковую панель в определённом месте, а затем ввести макет из трёх столбцов для более широких экранов.</p> <p><img alt="Image of the three different layouts created by redefining our grid at two breakpoints." src="https://mdn.mozillademos.org/files/14749/11-responsive-areas.png"></p> @@ -114,7 +114,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ } </pre> -<p>Вы можете видеть, как макет принимает форму в значении {{cssxref("grid-template-areas")}}. Заголовок охватывает две дорожки столбцов, как и навигационная система. В треке третьего ряда у нас есть боковая панель рядом с содержимым. В четвертой строке я решил разместить свой рекламный контент – так он появляется под боковой панелью, а затем футер, рядом с ним под контентом. Я использую flexbox в навигации, чтобы отобразить его в разнесенном ряду.</p> +<p>Вы можете видеть, как макет принимает форму в значении {{cssxref("grid-template-areas")}}. Заголовок охватывает две дорожки столбцов, как и навигационная система. В треке третьего ряда у нас есть боковая панель рядом с содержимым. В четвёртой строке я решил разместить свой рекламный контент – так он появляется под боковой панелью, а затем футер, рядом с ним под контентом. Я использую flexbox в навигации, чтобы отобразить его в разнесённом ряду.</p> <p>Теперь я могу добавить конечные точки в наш 3-х колоночный макет.</p> @@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ } </pre> -<p>Трехколоночный макет имеет две боковые колонки размером <code>1fr</code> и среднюю колонку, размером <code>4fr</code> . Это означает, что доступное пространство в контейнере разделено на 6 ячеек и распределено пропорционально нашему макету – по одной части к боковым колонкам и по 4 части к центру.</p> +<p>Трёхколоночный макет имеет две боковые колонки размером <code>1fr</code> и среднюю колонку, размером <code>4fr</code> . Это означает, что доступное пространство в контейнере разделено на 6 ячеек и распределено пропорционально нашему макету – по одной части к боковым колонкам и по 4 части к центру.</p> <p>В этом макете я показываю навигацию в левой колонке, рядом с содержимым. В правой колонке у нас есть боковая панель, а под ней блок рекламы (ad). Футер теперь охватывает всю нижнюю часть макета. Затем я использую flexbox для отображения навигации в виде столбца.</p> @@ -273,7 +273,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ } </pre> -<p>В следующей контрольной точке мы хотим перейти к двухколоночному макету. Наш заголовок и навигация по-прежнему охватывают всю сетку, поэтому нам не нужно указывать для них какое-либо позиционирование. Боковая панель начинается с первой строки столбца с именем col-start, охватывающей 3 строки. Он идет после строки 3, так как заголовок и навигация находятся в первых двух дорожках строки.</p> +<p>В следующей контрольной точке мы хотим перейти к двухколоночному макету. Наш заголовок и навигация по-прежнему охватывают всю сетку, поэтому нам не нужно указывать для них какое-либо позиционирование. Боковая панель начинается с первой строки столбца с именем col-start, охватывающей 3 строки. Он идёт после строки 3, так как заголовок и навигация находятся в первых двух дорожках строки.</p> <p>Панель объявлений находится ниже боковой панели, поэтому начинается с строки сетки 4. Затем у нас есть основное содержимое и футер, начинающийся с col-start 4 и охватывающий 9 треков, ведущих их к концу сетки.</p> @@ -297,7 +297,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ } </pre> -<p>Наконец, мы переходим к трехколоночной версии этого макета. Заголовок продолжает распространяться прямо по сетке, но теперь навигация перемещается вниз, чтобы стать первой боковой панелью с основным содержимым, а затем боковой панелью рядом с ней. Футер теперь также охватывает весь макет.</p> +<p>Наконец, мы переходим к трёхколоночной версии этого макета. Заголовок продолжает распространяться прямо по сетке, но теперь навигация перемещается вниз, чтобы стать первой боковой панелью с основным содержимым, а затем боковой панелью рядом с ней. Футер теперь также охватывает весь макет.</p> <pre class="brush: css">@media (min-width: 700px) { .main-nav { @@ -431,7 +431,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <p>{{ EmbedLiveSample('layout_4', '800', '900') }}</p> </div> -<p>Теперь все это выглядит более завершенным. Однако иногда у нас есть эти элементы, которые содержат больше контента, чем другие. Было бы неплохо, чтобы они охватывали два трека, и тогда они не будут такими высокими. У меня есть класс <code>wide</code> для большого элемента, и я добавляю правило {{cssxref("grid-column-end")}} со значением <code>span 2</code>. Теперь, когда grid столкнется с этим элементом, он назначит ему два трека. В некоторых точках это означает, что мы получим разрыв в сетке – там, где нет места для размещения двухтрекового элемента.</p> +<p>Теперь все это выглядит более завершённым. Однако иногда у нас есть эти элементы, которые содержат больше контента, чем другие. Было бы неплохо, чтобы они охватывали два трека, и тогда они не будут такими высокими. У меня есть класс <code>wide</code> для большого элемента, и я добавляю правило {{cssxref("grid-column-end")}} со значением <code>span 2</code>. Теперь, когда grid столкнётся с этим элементом, он назначит ему два трека. В некоторых точках это означает, что мы получим разрыв в сетке – там, где нет места для размещения двухтрекового элемента.</p> <p><img alt="The layout has gaps as there is not space to layout a two track item." src="https://mdn.mozillademos.org/files/14751/11-grid-auto-flow-sparse.png" style="height: 812px; width: 800px;"></p> @@ -522,7 +522,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <p>{{ EmbedLiveSample('layout_5', '800', '900') }}</p> -<p>Этот метод использования автоматического размещения с некоторыми правилами, применяемыми к определенным элементам, очень полезен и может помочь вам с контентом, который выводится CMS, например, где у вас есть повторяющиеся элементы и, возможно, вы можете добавить класс к определенным элементам, когда они отображаются в HTML.</p> +<p>Этот метод использования автоматического размещения с некоторыми правилами, применяемыми к определённым элементам, очень полезен и может помочь вам с контентом, который выводится CMS, например, где у вас есть повторяющиеся элементы и, возможно, вы можете добавить класс к определённым элементам, когда они отображаются в HTML.</p> </div> <h2 id="Дальнейшие_исследования">Дальнейшие исследования</h2> diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html index db89d68fae..c479b58054 100644 --- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В пером примере мы воспользуемся flexbox для того, чтобы разместить несколько блоков. Предположим, что у нас есть пять дочерних элементов в контейнере, зададим им значения flex-свойств таким образом, чтобы их размер увеличивался и уменьшался, начиная с базового в 200px.</p> -<p>Также установим свойство {{cssxref("flex-wrap")}} в значение <code>wrap</code> . Это приведет к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку. </p> +<p>Также установим свойство {{cssxref("flex-wrap")}} в значение <code>wrap</code> . Это приведёт к тому, что если свободного пространства в нашем контейнере будет не хватать для размещения элемента в 200px, наши элементы спокойно перейдут на новую строку. </p> <div id="onedtwod"> <div class="hidden"> @@ -67,7 +67,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Тот_же_макет_но_с_CSS_гридами">Тот же макет, но с CSS гридами</h3> -<p>В примере ниже мы создаем тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жесткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p> +<p>В примере ниже мы создаём тот же самый макет, но используя гриды. На этот раз у нас три трека-колонки шириной в <code>1fr</code> . И при этом нам не требуется задавать какие-либо свойства дочерним элементам, потому что они самостоятельно занимают по одной ячейке созданного грида. Как видите, наши элементы лежат в жёсткой сетке и выравниваются и по строке, и по колонке. Поскольку у нас пять элементов, в результате мы получаем пустую ячейку в конце второй строки. </p> <div class="Two_Dimensional_With_Grid"> <div class="hidden"> @@ -116,9 +116,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Что_важнее_контент_или_макет">Что важнее: контент или макет?</h3> -<p>В дополнение к различию между позиционированию в одном направлении и позиционированию в двух направлениях, существует еще один способ решить, нужен ли Вам макет, основанный на flexbox или макет, основанный на гридах. Flexbox работает исходя из размеров контента. Идеальный случай использования flexbox - когда у Вас есть набор элементов, а Вам нужно распределить их в контейнере равномерно. Вы позволяете размеру содержимого элементов решить, сколько пространства должен забрать каждый элемент. Если элементы переходят на новую строку, они забирают для себя пространство, исходя из своих размеров и того свободного места, которое есть в <em>этой строке</em>.</p> +<p>В дополнение к различию между позиционированию в одном направлении и позиционированию в двух направлениях, существует ещё один способ решить, нужен ли Вам макет, основанный на flexbox или макет, основанный на гридах. Flexbox работает исходя из размеров контента. Идеальный случай использования flexbox - когда у Вас есть набор элементов, а Вам нужно распределить их в контейнере равномерно. Вы позволяете размеру содержимого элементов решить, сколько пространства должен забрать каждый элемент. Если элементы переходят на новую строку, они забирают для себя пространство, исходя из своих размеров и того свободного места, которое есть в <em>этой строке</em>.</p> -<p>Грид работает, исходя из макета. Когда Вы используете CSS Grid Layout, Вы создаете структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жестко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.</p> +<p>Грид работает, исходя из макета. Когда Вы используете CSS Grid Layout, Вы создаёте структуру и затем размещаете элементы именно в этой структуре или же позволяете правилам авто-размещения разместить элементы в грид-ячейках в соответствии с жёстко заданной сеткой. Конечно, существует возможность создавать треки, подстраивающиеся под размер контента, но при этом они также меняют саму структуру.</p> <p>Поэтому, если Вы используете flexbox и вдруг обнаруживаете, что ограничиваете эластичность элементов, возможно, Вам нужно посмотреть в сторону CSS Grid Layout. Например, в том случае, если Вы процентами подгоняете ширину flex-элемента, чтобы выровнять его по элементам в строке сверху. В такой ситуации гриды кажутся более оптимальным выбором. </p> @@ -130,7 +130,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Дальше в нашем руководстве мы подробно рассмотрим выравнивание блоков Box Alignment и то, как оно работает в Grid Layout, а здесь давайте рассмотрим два простых примера, и сравним flexbox и гриды.</p> -<p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обертки wrapper установлено свойство {{cssxref("min-height")}}, и оно задает высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code> таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p> +<p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обёртки wrapper установлено свойство {{cssxref("min-height")}}, и оно задаёт высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code> таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -175,7 +175,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Тем_временем_в_параллельной_вселенной_выравнивание_в_CSS_Гридах">Тем временем в параллельной вселенной: выравнивание в CSS Гридах</h3> -<p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаем <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p> +<p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаём <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -228,9 +228,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h4 id="Автозаполнение_грид-треков">Автозаполнение грид-треков</h4> -<p>Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жесткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства <code>auto-fill</code> и <code>auto-fit</code>.</p> +<p>Можно создать эффект, похожий на поведение flexbox, и при этом по-прежнему держать контент в жёсткой сетке из строк и колонок, если задать структуру треков, используя repeat-нотацию и свойства <code>auto-fill</code> и <code>auto-fit</code>.</p> -<p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаем структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p> +<p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаём структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -268,7 +268,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Переменное_количество_треков">Переменное количество треков</h3> -<p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаем автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p> +<p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаём автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -304,7 +304,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}</p> -<p>Собственно, теперь у нас есть возможность создавать гриды с переменным количеством или с переменным размером треков и при этом по-прежнему держать элементы в жесткой сетке из строк и колонок.</p> +<p>Собственно, теперь у нас есть возможность создавать гриды с переменным количеством или с переменным размером треков и при этом по-прежнему держать элементы в жёсткой сетке из строк и колонок.</p> <h2 id="Гриды_и_абсолютно_позиционированные_элементы">Гриды и абсолютно позиционированные элементы</h2> @@ -314,7 +314,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Для того, чтобы превратить грид-контейнер в контейнерный блок Вам нужно добавить ему свойство position со значением relative. Если после этого задать какому-нибудь грид-элементу <code>position:</code> <code>absolute</code> , грид-контейнер станет контейнерным блоком для данного элемента.</p> -<p>В примере ниже у нас есть блок-обертка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещен в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p> +<p>В примере ниже у нас есть блок-обёртка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещён в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -340,7 +340,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div class="box2">Two</div> <div class="box3"> Этот блок абсолютно позиционирован. -В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещен элемент. +В нашем примере грид-контейнер является контейнерным блоком, поэтому значения сдвига абсолютного позиционирования отсчитываются от внешнего края той области, в которой размещён элемент. </div> <div class="box4">Four</div> </div> @@ -372,17 +372,17 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <h3 id="Грид-контейнер_в_качестве_родительского_элемента">Грид-контейнер в качестве родительского элемента</h3> -<p>Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создает этот контекст позиционирования. Словом, если в нашем примере мы уберем <code>position:</code> <code>relative</code> из блока-обертки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.</p> +<p>Если у абсолютно позиционированного элемента в качестве родительского контейнера выступает грид, не создающий новый контекст позиционирования, наш элемент также вытаскивается из потока, как и в предыдущем примере. Но в этом случае контекстом позиционирования будет любой элемент, который как раз и создаёт этот контекст позиционирования. Словом, если в нашем примере мы уберём <code>position:</code> <code>relative</code> из блока-обёртки, контекстом позиционирования станет область просмотра, что хорошо видно на рисунке ниже.</p> <p><img alt="Image of grid container as parent" src="https://mdn.mozillademos.org/files/14661/2_abspos_example.png" style="height: 408px; width: 1702px;"></p> -<p>Еще раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.</p> +<p>Ещё раз: наш элемент больше не занимает пространство в грид-макете и не влияет на то, как располагаются другие элементы при авторазмещении.</p> <h3 id="А_что_если_родительский_элемент_-_это_грид-область">А что если родительский элемент - это грид-область?</h3> <p>Если абсолютно позиционированный элемент находится в грид-области, Вы можете создать контекст позиционирования из этой области. В примере ниже у нас тот же грид-макет, что и раньше, но теперь мы разместили элемент внутри <code>.box3</code> .</p> -<p>Задаем <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.</p> +<p>Задаём <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.</p> <div class="hidden"> <pre class="brush: css notranslate">* {box-sizing: border-box;} @@ -408,7 +408,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div class="box2">Two</div> <div class="box3">Three <div class="abspos"> - Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования является грид-область, поэтому значения сдвига отсчитываются от внешних краев грид-области. + Этот блок абсолютно позиционирован. В данном примере контекстом позиционирования является грид-область, поэтому значения сдвига отсчитываются от внешних краёв грид-области. </div> </div> <div class="box4">Four</div> @@ -449,7 +449,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>“Сам элемент не генерирует никаких блоков (боксов), но его дочерние элементы и его псевдо-элементы по-прежнему генерируют блоки, в установленном порядке. Относительно генерации и позиционирования блоков элемент должен восприниматься так, как если бы он полностью замещался своими дочерними элементами и псевдо-элементами в дереве документа.”</p> </blockquote> -<p>Если Вы пишете для элемента <code>display:</code> <code>contents</code> , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберемся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.</p> +<p>Если Вы пишете для элемента <code>display:</code> <code>contents</code> , блок (бокс), который он должен создать в дереве документа исчезает, а вот блоки его дочерних элементов и его псевдо-элементов переходят на один уровень вверх. А значит это то, что дочерние элементы грид-элемента могут сами стать грид-элементами. Звучит непонятно? Давайте разберёмся на простом примере. В разметке ниже у нас есть грид. Первый элемент этого грида настроен так, чтобы занимать все три трека-колонки. У него есть три вложенных элемента. Поскольку эти вложенные элементы не являются прямыми потомками грида, они не становятся частью грид-макета и отображаются, как обычные блоки.</p> <div id="Display_Contents_Before"> <div class="hidden"> diff --git a/files/ru/web/css/css_grid_layout/subgrid/index.html b/files/ru/web/css/css_grid_layout/subgrid/index.html index d0d92dae7d..2147cfeeeb 100644 --- a/files/ru/web/css/css_grid_layout/subgrid/index.html +++ b/files/ru/web/css/css_grid_layout/subgrid/index.html @@ -31,7 +31,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <p>{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}</p> -<p>Обратите внимание, что внутри subgrid нумерация линий не наследуется от родителя, а начинается по новой – колоночная линия 1 внутри subgrid всегда является его начальной линией. Это значит, что вы можете безопасно добавить компонент, который может быть помещен в разных позициях на главной сетке, зная, что номера линий внутри компонента всегда будут оставаться одинаковыми.</p> +<p>Обратите внимание, что внутри subgrid нумерация линий не наследуется от родителя, а начинается по новой – колоночная линия 1 внутри subgrid всегда является его начальной линией. Это значит, что вы можете безопасно добавить компонент, который может быть помещён в разных позициях на главной сетке, зная, что номера линий внутри компонента всегда будут оставаться одинаковыми.</p> <h2 id="Subgrid_для_строк">Subgrid для строк</h2> diff --git a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html index 36bce31553..747e2bfc6c 100644 --- a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html +++ b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html @@ -1,33 +1,33 @@ --- -title: CSS счетчики +title: CSS счётчики slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters tags: - CSS - - CSS счетчики - - вложенные счетчики + - CSS счётчики + - вложенные счётчики translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters --- <div>{{CSSRef}}</div> -<p>CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1 (<a href="https://www.w3.org/TR/CSS21/generate.html#counters">ссылка на спецификацию</a>).</p> +<p>CSS счётчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счётчики реализованы в CSS 2.1 (<a href="https://www.w3.org/TR/CSS21/generate.html#counters">ссылка на спецификацию</a>).</p> -<p>Значение счетчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. </p> +<p>Значение счётчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. </p> -<p>{{cssxref("counter-increment")}} может быть отображен на странице, используя функцию <code>counter() или counters() в свойстве </code>{{cssxref("content")}}.</p> +<p>{{cssxref("counter-increment")}} может быть отображён на странице, используя функцию <code>counter() или counters() в свойстве </code>{{cssxref("content")}}.</p> -<h2 id="Использование_счетчиков">Использование счетчиков</h2> +<h2 id="Использование_счётчиков">Использование счётчиков</h2> -<p>Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счетчика - используйте функцию <code>counter(). Следующий пример прибавляет в начале каждого h3 элемента </code>"Section <<em>значение счетчика</em>>:".</p> +<p>Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию <code>counter(). Следующий пример прибавляет в начале каждого h3 элемента </code>"Section <<em>значение счётчика</em>>:".</p> <pre class="brush: css">body { counter-reset: section; /* Устанавливает значение - счетчика, равным 0 */ + счётчика, равным 0 */ } h3::before { - counter-increment: section; /* Инкрементирует счетчик*/ + counter-increment: section; /* Инкрементирует счётчик*/ content: "Секция " counter(section) ": "; /* Отображает текущее - значение счетчика */ + значение счётчика */ } </pre> @@ -37,20 +37,20 @@ h3::before { <h3>Основная часть</h3> <h3>Заключение</h3></pre> -<p>{{EmbedLiveSample("Использование_счетчиков", 200, 150)}}</p> +<p>{{EmbedLiveSample("Использование_счётчиков", 200, 150)}}</p> -<h2 id="Вложенные_счетчики">Вложенные счетчики</h2> +<h2 id="Вложенные_счётчики">Вложенные счётчики</h2> -<p>CSS счетчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:</code></p> +<p>CSS счётчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счётчика автоматически создаётся в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счётчиков. Пример:</code></p> <pre class="brush: css">ol { - counter-reset: section; /*Создает новый счетчик для каждого + counter-reset: section; /*Создаёт новый счётчик для каждого тега <ol>*/ list-style-type: none; } li::before { - counter-increment: section; /*Инкрементируется только счетчик + counter-increment: section; /*Инкрементируется только счётчик текущего уровня вложенности*/ content: counters(section,".") " ";/*Добавляем значения всех уровней вложенности, используя разделитель '.'*/ @@ -92,7 +92,7 @@ li::before { <p>Результат:</p> -<p>{{EmbedLiveSample("Вложенные_счетчики", 250, 350)}}</p> +<p>{{EmbedLiveSample("Вложенные_счётчики", 250, 350)}}</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index 1fe2ab3f3c..2ca973e2ae 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -8,7 +8,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index <p>The first part of this article, <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a <a href="/en-US/docs/Web/CSS/position#Types_of_positioning">positioned</a> element.</p> -<p>Свойство <code>z-index</code> может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию элемента вдоль оси z. Если вы не знакомы с<strong> </strong>осью<strong> </strong>z, представьте себе страницу как стопку слоев, имеющих собственное порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.</p> +<p>Свойство <code>z-index</code> может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию элемента вдоль оси z. Если вы не знакомы с<strong> </strong>осью<strong> </strong>z, представьте себе страницу как стопку слоёв, имеющих собственное порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.</p> <ul> <li>bottom layer<em> (farthest from the observer)</em></li> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/index.html index d2185a90e3..747b7e6a24 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/index.html @@ -16,7 +16,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index <p>Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.{{cssxref("z-index")}} атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).</p> <blockquote> -<p><em>В CSS 2.1, позиция каждого блока была в трех измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и располагались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. </em></p> +<p><em>В CSS 2.1, позиция каждого блока была в трёх измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и располагались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. </em></p> </blockquote> <p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index 5a3ae04036..a440844986 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -3,7 +3,7 @@ title: Контекст наложения (stacking context) slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context --- -<p>Контекст наложения (stacking context) это концепция трехмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML элементы занимают это место по порядку, основанному на атрибутах элемента.</p> +<p>Контекст наложения (stacking context) это концепция трёхмерного расположения HTML элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML элементы занимают это место по порядку, основанному на атрибутах элемента.</p> <p>« <a href="/en-US/docs/CSS" title="CSS">CSS</a> « <a href="/en-US/docs/CSS/Understanding_z-index" title="Understanding CSS z-index">Understanding CSS z-index</a></p> @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_conte <p> </p> -<p>В предыдущем примере <a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" title="Adding z-index">Добавляем z-index</a>, порядок отображения определенных DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( <em>stacking context )</em>.</p> +<p>В предыдущем примере <a href="/en-US/docs/CSS/Understanding_z-index/Adding_z-index" title="Adding z-index">Добавляем z-index</a>, порядок отображения определённых DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( <em>stacking context )</em>.</p> <p>Контекст может формироваться в любом месте документа, любым элементом, у которого выполняется одно из следующих условий: </p> @@ -34,18 +34,18 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_conte <p>Суммируем:</p> <ul> - <li>Позиционирование и присваивание HTML элементам свойства z-index создает контекст наложения, (так же как и присваивание элементу opacity меньше 1).</li> + <li>Позиционирование и присваивание HTML элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).</li> <li>Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения. </li> - <li>Каждый контекст наложения абсолютно независим от своего соседа: только подчиненные элементы учитываются при обработке контекста наложения.</li> + <li>Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.</li> </ul> -<div class="note"><strong>Note:</strong> Иерархия контекстов наложения является подмножеством иерархии HTML элементов, потому что только определенные элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.</div> +<div class="note"><strong>Note:</strong> Иерархия контекстов наложения является подмножеством иерархии HTML элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.</div> <h2 id="Пример"><strong>Пример</strong></h2> <p><img alt="Example of stacking rules modified using z-index" src="/@api/deki/files/913/=Understanding_zindex_04.png"></p> -<p>В примере каждый позиционированный элемент создает свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:</p> +<p>В примере каждый позиционированный элемент создаёт свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:</p> <ul> <li>Root diff --git a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html index a6ab4ae735..ceb30aa8ab 100644 --- a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html +++ b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts <p>Также можно передавать ключевые слова <code>mandatory</code>, или <code>proximity</code>. Ключевое слово <code>mandatory</code> определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово <code>proximity</code> означает, что привязка может произойти , но не обязательно.</p> -<p>Использование <code>mandatory</code> делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое по высоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к определенному месту на странице странице. Следовательно, применение <code>mandatory</code> должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.</p> +<p>Использование <code>mandatory</code> делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое по высоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к определённому месту на странице странице. Следовательно, применение <code>mandatory</code> должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.</p> <p>При значении <code>proximity</code> привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с <code>mandatory</code> на <code>proximity</code>, чтобы увидеть, как это влияет на работу прокрутки.</p> diff --git a/files/ru/web/css/css_selectors/index.html b/files/ru/web/css/css_selectors/index.html index 039e006a62..90a32e92c9 100644 --- a/files/ru/web/css/css_selectors/index.html +++ b/files/ru/web/css/css_selectors/index.html @@ -18,7 +18,7 @@ original_slug: Web/CSS/CSS_Селекторы <dl> <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></dt> - <dd>Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.<br> + <dd>Выбирает все элементы. По желанию, он может быть ограничен определённым пространством имён или относиться ко всему пространству имён.<br> <strong>Синтаксис:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br> <strong>Пример:</strong> <code>*</code> будет соответствовать всем элементам на странице.</dd> </dl> @@ -31,11 +31,11 @@ original_slug: Web/CSS/CSS_Селекторы <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Селекторы по классу</a></dt> <dd>Этот базовый селектор выбирает элементы, основываясь на значении их атрибута <code>class</code>.<br> <strong>Синтаксис: </strong> <code>.<em>имяКласса</em></code><br> - <strong>Пример: </strong>селектор<strong> </strong><code>.index</code> выберет все элементы с соответствующим классом (который был определен в атрибуте <code>class="index"</code>).</dd> + <strong>Пример: </strong>селектор<strong> </strong><code>.index</code> выберет все элементы с соответствующим классом (который был определён в атрибуте <code>class="index"</code>).</dd> <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Селекторы по идентификатору</a></dt> <dd>Этот базовый селектор выбирает элементы, основываясь на значении их <code>id</code> атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. <br> <strong>Синтаксис: </strong> <code>#имяИдентификатора</code><br> - <strong>Пример: </strong>селектор <code>#toc</code> выберет элемент с идентификатором toc (который был определен в атрибуте <code>id="toc"</code>).</dd> + <strong>Пример: </strong>селектор <code>#toc</code> выберет элемент с идентификатором toc (который был определён в атрибуте <code>id="toc"</code>).</dd> <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Селекторы по атрибуту</a></dt> <dd>Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.<br> <strong>Синтаксис:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br> diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html index 69572dcdd2..883e0dbca5 100644 --- a/files/ru/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <h2 id="Какие_CSS_свойства_анимируются">Какие CSS свойства анимируются?</h2> -<p>Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень<a href="/en-US/docs/CSS/CSS_animated_properties"> доступных для анимирования свойств </a>ограничен определенным набором.</p> +<p>Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень<a href="/en-US/docs/CSS/CSS_animated_properties"> доступных для анимирования свойств </a>ограничен определённым набором.</p> <div class="note">Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.</div> @@ -60,7 +60,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <p>CSS переходы контролируются свойством<a href="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}}. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.</p> -<p>Можно контролировать определенные параметры перехода следующими подсвойствами:</p> +<p>Можно контролировать определённые параметры перехода следующими подсвойствами:</p> <p><strong>(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS <code>transition</code>s только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство <a href="/en-US/docs/CSS/animation"><code>animation</code></a>.)</strong></p> @@ -889,7 +889,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="Определение_завершения_перехода">Определение завершения перехода</h2> -<p>Есть событие, срабатывающее, когда переход завершен. Во всех браузерах, совместимых со стандартами, есть событие <code>transitionend</code>, в WebKit есть <code>webkitTransitionEnd</code>. Смотрите таблицу поддержки браузерами для дополнительной информации. У <code>transitionend</code> есть 2 свойства:</p> +<p>Есть событие, срабатывающее, когда переход завершён. Во всех браузерах, совместимых со стандартами, есть событие <code>transitionend</code>, в WebKit есть <code>webkitTransitionEnd</code>. Смотрите таблицу поддержки браузерами для дополнительной информации. У <code>transitionend</code> есть 2 свойства:</p> <dl> <dt><code>propertyName</code></dt> @@ -938,7 +938,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="Простой_пример">Простой пример</h2> -<p>Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:</p> +<p>Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навёл мышь на элемент:</p> <pre class="brush: css">#delay1 { position: relative; @@ -1017,7 +1017,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <div id="foo"></div> </pre> -<p>Используя JavaScript, добиваемся эффекта перемещения шара на определенную позицию:</p> +<p>Используя JavaScript, добиваемся эффекта перемещения шара на определённую позицию:</p> <pre class="brush: js">var f = document.getElementById('foo'); document.addEventListener('click', function(ev){ diff --git a/files/ru/web/css/cursor/index.html b/files/ru/web/css/cursor/index.html index f45445f056..20368efd85 100644 --- a/files/ru/web/css/cursor/index.html +++ b/files/ru/web/css/cursor/index.html @@ -31,7 +31,7 @@ cursor: unset; <dl> <dt><<code>url</code>></dt> - <dd>Ссылка или разделенный запятыми список ссылок: <code>url(…), url(…), …</code>, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) <strong>должно </strong>находиться в конце списка значений. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd> + <dd>Ссылка или разделённый запятыми список ссылок: <code>url(…), url(…), …</code>, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) <strong>должно </strong>находиться в конце списка значений. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd> <dt><code><x></code> <code><y></code> {{experimental_inline}}</dt> <dd>Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.</dd> <dt>Ключевые слова</dt> diff --git a/files/ru/web/css/descendant_combinator/index.html b/files/ru/web/css/descendant_combinator/index.html index b1305b3171..bef042cb34 100644 --- a/files/ru/web/css/descendant_combinator/index.html +++ b/files/ru/web/css/descendant_combinator/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Descendant_combinator <h2 id="Summary" name="Summary">Описание</h2> -<p>Комбинатор<code> ␣</code> (пробел) представляет собой 2 или более селекторов, найдет элементы соответствующие обоим селекторам. Селекторы по потомкам похожи на селекторы <a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a>, но они не учитывают вложенность элементов и применяют свои свойства ко всем элементам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.</p> +<p>Комбинатор<code> ␣</code> (пробел) представляет собой 2 или более селекторов, найдёт элементы соответствующие обоим селекторам. Селекторы по потомкам похожи на селекторы <a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a>, но они не учитывают вложенность элементов и применяют свои свойства ко всем элементам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/css/display-listitem/index.html b/files/ru/web/css/display-listitem/index.html index 4eee12345e..798ac47d3f 100644 --- a/files/ru/web/css/display-listitem/index.html +++ b/files/ru/web/css/display-listitem/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/display-listitem <h2 id="Синтаксис">Синтаксис</h2> -<p>Единственное значение <code> list-item приведет к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с {{CSSxRef("list-style-type")}} и {{CSSxRef("list-style-position")}}.</code></p> +<p>Единственное значение <code> list-item приведёт к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с {{CSSxRef("list-style-type")}} и {{CSSxRef("list-style-position")}}.</code></p> <div class="note"> <p><code><strong>Примечание</strong>:В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию оно будет </code>flow<code>. Если внешнее значение не указано, основной блок будет иметь внешний вид отображения (</code>outer display type<code>) <code>block</code>.</code></p> diff --git a/files/ru/web/css/display-outside/index.html b/files/ru/web/css/display-outside/index.html index 60ee3de15e..a41442267d 100644 --- a/files/ru/web/css/display-outside/index.html +++ b/files/ru/web/css/display-outside/index.html @@ -24,15 +24,15 @@ translation_of: Web/CSS/display-outside <dt><code>block</code></dt> <dd>Элемент генерирует бокс элемента, создавая разрывы линий, как перед, так и после элемента, при условии нормального потока.</dd> <dt><code>inline</code></dt> - <dd>Элемент создает один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.</dd> + <dd>Элемент создаёт один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.</dd> <dt><code>run-in</code> {{Experimental_Inline}}</dt> - <dd>Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определен как <code>display: run-in, тогда</code> бокс является блоковым боксом, <code>run-in</code> бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним. <br> + <dd>Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определён как <code>display: run-in, тогда</code> бокс является блоковым боксом, <code>run-in</code> бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним. <br> <br> Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.</dd> </dl> <div class="note"> -<p><strong>Замечание</strong>: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении <code> display: block </code> или <code>display: inline,</code> установят внутреннее значение как <code>flow</code>. Это приведет к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.</p> +<p><strong>Замечание</strong>: Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении <code> display: block </code> или <code>display: inline,</code> установят внутреннее значение как <code>flow</code>. Это приведёт к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.</p> </div> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/css/display/index.html b/files/ru/web/css/display/index.html index 9c23ae0a01..9f77aa45c7 100644 --- a/files/ru/web/css/display/index.html +++ b/files/ru/web/css/display/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/display <p class="summary">Свойство <strong><code>display</code></strong> (<a href="/ru/docs/Web/CSS">CSS</a>) определяет <dfn><em>тип отображения (display type)</em> элемента</dfn>, имеющий два основных свойства, определяющих генерацию боксов — <strong>внешний тип отображения</strong> определяет расположение бокса в <a href="/ru/docs/Web/CSS/CSS_Flow_Layout">схеме потока (flow layout)</a> и <strong>внутренний тип отображения</strong> определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).</p> -<p>Некоторые значения свойства <code>display</code> полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведен ниже.</p> +<p>Некоторые значения свойства <code>display</code> полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведён ниже.</p> <pre class="brush:css no-line-numbers">/* <display-outside> values */ display: block; @@ -78,7 +78,7 @@ display: unset; <h2 id="Синтаксис">Синтаксис</h2> -<p>Свойство <code>display</code> задается с помощью ключевых слов. Ключевые слова группируются по шести категориям:</p> +<p>Свойство <code>display</code> задаётся с помощью ключевых слов. Ключевые слова группируются по шести категориям:</p> <dl> <dt>{{CSSxRef("<display-outside>")}}</dt> @@ -86,7 +86,7 @@ display: unset; <dt>{{CSSxRef("<display-inside>")}}</dt> <dd>Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).</dd> <dt>{{CSSxRef("<display-listitem>")}}</dt> - <dd>Создает блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.</dd> + <dd>Создаёт блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.</dd> <dt>{{CSSxRef("<display-internal>")}}</dt> <dd>Некоторые модели разметки, такие как <code><span class="css">table</span></code> и <code>ruby,</code> имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.</dd> <dt>{{CSSxRef("<display-box>")}}</dt> @@ -122,7 +122,7 @@ display: unset; <p>В разделе {{anch("Syntax")}} содержатся несколько примеров для разных типов значений <code>display</code>, которые это свойство может принимать.</p> -<p>Кроме того, вы можете найти подробные объяснения способов разметки для определенных значений <code>display</code> в других статьях на MDN:</p> +<p>Кроме того, вы можете найти подробные объяснения способов разметки для определённых значений <code>display</code> в других статьях на MDN:</p> <ul> <li><a href="/ru/docs/Web/CSS/CSS_Grid_Layout">Разметка CSS Grid </a></li> diff --git a/files/ru/web/css/filter/index.html b/files/ru/web/css/filter/index.html index 47f4e2954e..d17696fa1b 100644 --- a/files/ru/web/css/filter/index.html +++ b/files/ru/web/css/filter/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/filter <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>filter</code></strong> позволяет Вам применять к элементу такие графические эффекты, как размытие и смещение цвета. Фильтры обычно используются для регулировки рендеринга изображений, фонов и рамок.</p> -<p>В стандарт CSS включены несколько функций, которые обеспечивают предопределенные эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на <a href="/en-US/docs/Web/SVG/Element/filter">элемент фильтра SVG</a>.</p> +<p>В стандарт CSS включены несколько функций, которые обеспечивают предопределённые эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на <a href="/en-US/docs/Web/SVG/Element/filter">элемент фильтра SVG</a>.</p> <div class="note"><strong>Предупреждение:</strong> Старые версии (с 4.0 до 9.0) браузера Windows Internet Explorer поддерживают нестандартный <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx">"filter"</a>, который с тех пор устарел.</div> diff --git a/files/ru/web/css/flex-basis/index.html b/files/ru/web/css/flex-basis/index.html index a4973a1812..35c6cbeca1 100644 --- a/files/ru/web/css/flex-basis/index.html +++ b/files/ru/web/css/flex-basis/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/flex-basis --- <div>{{CSSRef}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>flex-basis</code></strong> задает базовый размер флекс элемента по <strong>основной оси</strong>. Это свойство определяет размер контент-бокса, если не задано иначе через {{Cssxref("box-sizing")}}.</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>flex-basis</code></strong> задаёт базовый размер флекс элемента по <strong>основной оси</strong>. Это свойство определяет размер контент-бокса, если не задано иначе через {{Cssxref("box-sizing")}}.</p> <div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div> @@ -43,7 +43,7 @@ flex-basis: unset; -<p>Свойство <code>flex-basis</code> задается через ключевое слово <code><a href="#content">content</a></code> или через <code><a href="#<'width'>"><'width'></a></code>.</p> +<p>Свойство <code>flex-basis</code> задаётся через ключевое слово <code><a href="#content">content</a></code> или через <code><a href="#<'width'>"><'width'></a></code>.</p> <h3 id="Значения">Значения</h3> @@ -51,7 +51,7 @@ flex-basis: unset; <dt><a id="<'width'>" name="<'width'>"><code><'ширина'></code></a></dt> <dd>An absolute {{cssxref("<length>")}}, a {{cssxref("<percentage>")}} родительского flex контейнера главное size свойство, или ключевое слово <code>auto</code>. Негативные значения не допустимы.</dd> <dt><a id="content" name="content"><code>content</code></a></dt> - <dd>Автоматический задает размер на основе содержимого элемента flex.</dd> + <dd>Автоматический задаёт размер на основе содержимого элемента flex.</dd> <dd> <div class="note"><strong>Заметка:</strong> Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя <code>auto</code> вместе с основным размером (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> или <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) <code>auto</code>.</div> @@ -60,7 +60,7 @@ flex-basis: unset; <ul> <li>Первоначально, <code>flex-basis:auto</code> означает "смотреть на значения <code>width</code> или <code>height</code>".</li> - <li>Затем <code>flex-basis:auto</code> был изменен на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения <code>width</code> или <code>height</code>". Это было реализован в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>баге 1032922</a>.</li> + <li>Затем <code>flex-basis:auto</code> был изменён на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения <code>width</code> или <code>height</code>". Это было реализован в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>баге 1032922</a>.</li> <li>Затем в <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>баге 1093316</a> это было возвращено обратно, поэтому <code>auto</code> снова означает "смотреть на значения <code>width</code> или <code>height</code>"; а новое ключевое слово <code>content</code> было введено для автоматического размера. ({{bug("1105111")}} охватывает добавление этого ключевого слова).</li> </ul> </div> diff --git a/files/ru/web/css/flex-direction/index.html b/files/ru/web/css/flex-direction/index.html index 4c343b98b7..06861addbf 100644 --- a/files/ru/web/css/flex-direction/index.html +++ b/files/ru/web/css/flex-direction/index.html @@ -43,11 +43,11 @@ flex-direction: unset; <dt><code>row</code></dt> <dd>Главная ось flex-контейнера определена точно так же, как направление текста. Точки <strong>main-start</strong> и <strong>main-end</strong> совпадают с направлением контента.</dd> <dt><code>row-reverse</code></dt> - <dd>Ведет себя аналогично <code>row</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd> + <dd>Ведёт себя аналогично <code>row</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd> <dt><code>column</code></dt> <dd>Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки <strong>main-start</strong> и <strong>main-end</strong> такие же, как точки <strong>before</strong> и <strong>after</strong> режима записи (writing-mode).</dd> <dt><code>column-reverse</code></dt> - <dd>Ведет себя, как <code>column</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd> + <dd>Ведёт себя, как <code>column</code> , но точки <strong>main-start</strong> и <strong>main-end</strong> поменяны местами.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/flex-grow/index.html b/files/ru/web/css/flex-grow/index.html index 3ce8182a72..740a6a9560 100644 --- a/files/ru/web/css/flex-grow/index.html +++ b/files/ru/web/css/flex-grow/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/flex-grow --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>flex-grow</code></strong> определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»).</span> Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определенным различными коэффициентами flex-grow.</p> +<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>flex-grow</code></strong> определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»).</span> Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определённым различными коэффициентами flex-grow.</p> <p>На практике flex-grow используется вместе с другими flex-свойствами {{cssxref("flex-shrink")}} и {{cssxref("flex-basis")}}, и обычно определяется с помощью сокращения (shorthand) {{cssxref("flex")}}, чтобы убедиться, что все значения заданы.</p> diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html index 345b55bbaa..339db730a5 100644 --- a/files/ru/web/css/flex-wrap/index.html +++ b/files/ru/web/css/flex-wrap/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/flex-wrap --- <div>{{ CSSRef}}</div> -<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задает правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.</p> +<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.</p> <pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap; flex-wrap: wrap; diff --git a/files/ru/web/css/flex/index.html b/files/ru/web/css/flex/index.html index a0a28a86d8..e490167e82 100644 --- a/files/ru/web/css/flex/index.html +++ b/files/ru/web/css/flex/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/flex <h2 id="Описание">Описание</h2> -<p>Свойство <a href="/ru/docs/CSS" title="CSS">CSS</a> <strong><code>flex</code></strong> - это <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Shorthand_properties">сокращенное свойство</a>, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow">flex-grow</a>, <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-basis"> flex-basis</a>.</p> +<p>Свойство <a href="/ru/docs/CSS" title="CSS">CSS</a> <strong><code>flex</code></strong> - это <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Shorthand_properties">сокращённое свойство</a>, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow">flex-grow</a>, <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/flex-basis"> flex-basis</a>.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/float/index.html b/files/ru/web/css/float/index.html index d14d73e420..340654bd11 100644 --- a/files/ru/web/css/float/index.html +++ b/files/ru/web/css/float/index.html @@ -3,7 +3,7 @@ title: float slug: Web/CSS/float translation_of: Web/CSS/float --- -<div>Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещен вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}</div> +<div>Свойство float CSS указывает, что элемент должен быть взят из нормального потока и помещён вдоль левой или правой стороны его контейнера, где текст и встроенные элементы будут обтекать его.{{CSSRef}}</div> <h2 id="Summary">Summary</h2> diff --git a/files/ru/web/css/font-family/index.html b/files/ru/web/css/font-family/index.html index 79b25a5265..44df7fc34e 100644 --- a/files/ru/web/css/font-family/index.html +++ b/files/ru/web/css/font-family/index.html @@ -49,7 +49,7 @@ font-family: unset; <p>Свойство <code>font-family</code> получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как <code><a href="#<family-name>"><family-name></a></code> или <code><a href="#<generic-name>"><generic-name></a></code>.</p> -<p>В приведенном ниже примере перечислены два семейства шрифтов, первое <code><a href="#<family-name>"><family-name></a></code>, а второе как <code><generic-name></code>:</p> +<p>В приведённом ниже примере перечислены два семейства шрифтов, первое <code><a href="#<family-name>"><family-name></a></code>, а второе как <code><generic-name></code>:</p> <pre class="brush: css">font-family: Gill Sans Extrabold, sans-serif;</pre> diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html index f8545cc836..0415ac37bb 100644 --- a/files/ru/web/css/font-variant-ligatures/index.html +++ b/files/ru/web/css/font-variant-ligatures/index.html @@ -35,18 +35,18 @@ font-variant-ligatures: unset; <dl> <dt><code>normal</code></dt> - <dd>Это ключевое слово ведет к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.</dd> + <dd>Это ключевое слово ведёт к активации обычных лигатур и контекстных форм, необходимых для корректного рендеринга. Активируемые лигатуры и формы зависят от шрифта, языка и типа письма. Это значение по умолчанию.</dd> <dt><code>none</code></dt> <dd>Это ключевое слово устанавливает, что все лигатуры и контекстные формы отключены, даже распространенные.</dd> <dt><<em>common-lig-values></em></dt> - <dd>Эти значения контролируют наиболее распространенные лигатуры, такие как лигатуры для сочетаний <code>fi</code>, <code>ffi</code>, <code>th</code> или подобных. Они относятся к значениям <code>liga</code> и <code>clig</code> в OpenType. Допустимы два значения: + <dd>Эти значения контролируют наиболее распространённые лигатуры, такие как лигатуры для сочетаний <code>fi</code>, <code>ffi</code>, <code>th</code> или подобных. Они относятся к значениям <code>liga</code> и <code>clig</code> в OpenType. Допустимы два значения: <ul> <li><code>common-ligatures</code> активирует эти лигатуры. Обратите внимание, что ключевое слово <code>normal</code> активирует лигатуры.</li> <li><code>no-common-ligatures</code> отключает эти лигатуры.</li> </ul> </dd> <dt><<em>discretionary-lig-values</em>></dt> - <dd><span class="tlid-translation translation" lang="ru"><span title="">Эти значения управляют определенными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта.</span> <span title="">Они соответствуют значениям OpenType <code>hlig</code></span></span>. Доступны два значения: + <dd><span class="tlid-translation translation" lang="ru"><span title="">Эти значения управляют определёнными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта.</span> <span title="">Они соответствуют значениям OpenType <code>hlig</code></span></span>. Доступны два значения: <ul> <li><code>discretionary-ligatures</code> активирует данные лигатуры.</li> <li><code>no-discretionary-ligatures</code> деактивирует лигатуры. Обратите внимание, обычно, ключевое слово <code>normal</code> также деактивирует лигатуры.</li> diff --git a/files/ru/web/css/font-weight/index.html b/files/ru/web/css/font-weight/index.html index 386ede4092..1c15a5c863 100644 --- a/files/ru/web/css/font-weight/index.html +++ b/files/ru/web/css/font-weight/index.html @@ -132,7 +132,7 @@ font-weight: unset; <h3 id="Определение_веса_имени">Определение веса имени</h3> -<p>Значения от 100 до 900, примерно, соответствуют следующим распространенным именам насыщенности:</p> +<p>Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:</p> <table class="standard-table"> <thead> @@ -176,14 +176,14 @@ font-weight: unset; </tr> <tr> <td><code>900</code></td> - <td>Черный (Густой) Black (Heavy)</td> + <td>Чёрный (Густой) Black (Heavy)</td> </tr> </tbody> </table> <h3 id="Интерполяция">Интерполяция</h3> -<p>Значения <code>font-weight</code> интерполируются с помощью дискретных шагов (кратные 100). <span id="result_box" lang="ru"><span class="hps">Интерполяция</span> <span class="hps">происходит в действительном пространстве чисел</span> <span class="hps">и превращается</span> <span class="hps">в целое число путем</span> <span class="hps">округления до</span> <span class="hps">ближайшего числа, кратного</span> <span class="hps">100,</span> <span class="hps">со значениями</span> <span class="alt-edited hps">посредине между</span> <span class="alt-edited hps">кратными 100</span> <span class="alt-edited hps">округленными</span> <span class="alt-edited hps">в сторону</span> <span class="hps">положительной бесконечности</span><span>.</span></span></p> +<p>Значения <code>font-weight</code> интерполируются с помощью дискретных шагов (кратные 100). <span id="result_box" lang="ru"><span class="hps">Интерполяция</span> <span class="hps">происходит в действительном пространстве чисел</span> <span class="hps">и превращается</span> <span class="hps">в целое число путём</span> <span class="hps">округления до</span> <span class="hps">ближайшего числа, кратного</span> <span class="hps">100,</span> <span class="hps">со значениями</span> <span class="alt-edited hps">посредине между</span> <span class="alt-edited hps">кратными 100</span> <span class="alt-edited hps">округлёнными</span> <span class="alt-edited hps">в сторону</span> <span class="hps">положительной бесконечности</span><span>.</span></span></p> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -214,7 +214,7 @@ p { } /* Назначение тексту элемента <div> жирности, которая больше на два уровня, -чем normal, но все еще меньше, чем стандартный bold. */ +чем normal, но все ещё меньше, чем стандартный bold. */ div { font-weight: 600; } diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html index dc3278e054..329684753a 100644 --- a/files/ru/web/css/font/index.html +++ b/files/ru/web/css/font/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/font -<p>Как и с любым сокращенным свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращенных свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью <code>font</code>, но они также сбрасываются к своим начальным значениям.</p> +<p>Как и с любым сокращённым свойством, любое значение, которое не указано, устанавливается в начальное значение (возможно, переопределяя значения, ранее установленные с использованием не сокращённых свойств). Свойства {{cssxref ("font-size-Adjust")}} и {{cssxref ("font-kerning")}} хоть и не могут быть напрямую установлены с помощью <code>font</code>, но они также сбрасываются к своим начальным значениям.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html index dcbbae226f..2712892e54 100644 --- a/files/ru/web/css/grid-area/index.html +++ b/files/ru/web/css/grid-area/index.html @@ -3,7 +3,7 @@ title: grid-area slug: Web/CSS/grid-area translation_of: Web/CSS/grid-area --- -<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">CSS свойство </span></font><strong>grid-area</strong></code> - это <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращенная форма записи</a> для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задает края {{glossary("grid areas", "грид-области")}} грид-элемента.</p> +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">CSS свойство </span></font><strong>grid-area</strong></code> - это <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращённая форма записи</a> для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задаёт края {{glossary("grid areas", "грид-области")}} грид-элемента.</p> <pre class="brush: css no-line-numbers">/* Ключевые слова в качестве значений */ grid-area: auto; @@ -30,7 +30,7 @@ grid-area: initial; grid-area: unset; </pre> -<p>Если заданы четыре значения <code><grid-line></code> , то первое значение определяет <code>grid-row-start</code> , второе значение - <code>grid-column-start</code> , третье значение - <code>grid-row-end</code> и четвертое значение - <code>grid-column-end</code>.</p> +<p>Если заданы четыре значения <code><grid-line></code> , то первое значение определяет <code>grid-row-start</code> , второе значение - <code>grid-column-start</code> , третье значение - <code>grid-row-end</code> и четвёртое значение - <code>grid-column-end</code>.</p> <p>Если <code>grid-column-end</code> опущено, а <code>grid-column-start</code> в значении {{cssxref("<custom-ident>")}}, <code>grid-column-end</code> устанавливается в это значение <code><custom-ident></code>; иначе оно устанавливается в значение <code>auto</code>.</p> diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index 35d6789975..226db2bb76 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -35,9 +35,9 @@ grid-auto-flow: unset; <dl> <dt><code>row</code></dt> - <dd>Ключевое слово, указывающее размещать элементы, заполняя поочередно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.</dd> + <dd>Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.</dd> <dt><code>column</code></dt> - <dd>Ключевое слово, указывающее размещать элементы, заполняя поочередно каждый столбец и добавляя новые столбцы по мере необходимости.</dd> + <dd>Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждый столбец и добавляя новые столбцы по мере необходимости.</dd> <dt><code>dense</code></dt> <dd>Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответствии с размером.</dd> <dd><br> diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html index 15559e4134..5817eef381 100644 --- a/files/ru/web/css/grid-row-start/index.html +++ b/files/ru/web/css/grid-row-start/index.html @@ -55,7 +55,7 @@ grid-row-start: unset; <p>В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <code><custom-ident></code>.</p> </dd> <dt><code><integer> && <custom-ident>?</code></dt> - <dd>Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчет, начиная с конечного края явной сетки. Если имя задано как <custom-<code>ident</code>>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.</dd> + <dd>Вносит n-ю линию сетки в размещение элемента сетки. Если задано отрицательное целое число, вместо этого начинается обратный отсчёт, начиная с конечного края явной сетки. Если имя задано как <custom-<code>ident</code>>, подсчитываются только строки с этим именем. Если существует недостаточно строк с таким именем, предполагается, что все неявные линии сетки имеют это имя для нахождения этой позиции.</dd> <dd> <p>An {{cssxref("integer")}} value of <code>0</code> is invalid.</p> </dd> diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html index 6827415b30..3e9a83e744 100644 --- a/files/ru/web/css/grid-template-areas/index.html +++ b/files/ru/web/css/grid-template-areas/index.html @@ -33,7 +33,7 @@ grid-template-areas: unset; <dt><code>none</code></dt> <dd>Контейнер не определяет никаких названий grid-области.</dd> <dt><code>{{cssxref("<string>")}}+</code></dt> - <dd>Строка создается каждым переносом строки, тогда как каждая колонка создается в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создает одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.</dd> + <dd>Строка создаётся каждым переносом строки, тогда как каждая колонка создаётся в каждой из созданных строк. Несколько прописанных маркеров в строке или через строки создаёт одну названную grid-область что покрывает соответствующие ячейки. Прописанные ячейки которые не создают прямоугольник - являются недействительны.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index fda2e71bb3..546a42ed31 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -59,9 +59,9 @@ grid-template-columns: unset; <dt><code>min-content</code></dt> <dd>Ключевое слово обозначающее самый большой из минимальных контентов элементов расположенных в данном треке.</dd> <dt><code>{{cssxref("minmax", "minmax(min, max)")}}</code></dt> - <dd>Функциональное обозначение, которое задает диапазон больший или равный <em>min</em> и меньший или равный <em>max</em>. Если <em>max</em> меньше чем <em>min</em>, тогда <em>max</em> игнорируется и эта функция рассматривается как <em>min</em>. Максимумом значение <code><flex></code> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.</dd> + <dd>Функциональное обозначение, которое задаёт диапазон больший или равный <em>min</em> и меньший или равный <em>max</em>. Если <em>max</em> меньше чем <em>min</em>, тогда <em>max</em> игнорируется и эта функция рассматривается как <em>min</em>. Максимумом значение <code><flex></code> устанавливает flex фактор линии (track’s flex factor). Оно не действительно как минимальное.</dd> <dt id="auto"><code>auto</code></dt> - <dd>Это ключевое слово идентично <code>max-content</code>, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определен в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.</dd> + <dd>Это ключевое слово идентично <code>max-content</code>, если оно максимальное. Как минимальное, оно представляет наиболее минимальный размер (который определён в свойствах {{cssxref("min-width")}}/{{cssxref("min-height")}}) элементов сетки, занимающих данный трек.</dd> <dd> <p class="note">Обратите внимание: Только <code>auto</code> размеры трека могут быть растянуты свойствами {{cssxref("align-content")}} и {{cssxref("justify-content")}}.</p> </dd> diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html index a6d1c4b36b..e4343f33b6 100644 --- a/files/ru/web/css/grid-template-rows/index.html +++ b/files/ru/web/css/grid-template-rows/index.html @@ -52,7 +52,7 @@ grid-template-rows: unset; <dt><code><length></code></dt> <dd>Неотрицательное значение размера.</dd> <dt><code><percentage></code></dt> - <dd>Неотрицательное значение {{cssxref("percentage", "<percentage>")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как <code>auto</code>. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учету процента.</dd> + <dd>Неотрицательное значение {{cssxref("percentage", "<percentage>")}} , относительно размера блока сетки контейнера. Если размер сетки контейнера зависит от размера его пути, то процент должен рассматриваться как <code>auto</code>. Собственный размер вкладов пути может быть скорректирован в соответствии с размером сетки контейнера и увеличить конечный размер пути на минимальную величину, которая привела бы к учёту процента.</dd> <dd><br> <strong>{{cssxref("<flex_value>","<flex>")}}</strong><br> Is a non-negative dimension with the unit <code>fr</code> specifying the track’s flex factor. Each <code><flex></code>-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a <code>minmax()</code> notation, it implies an automatic minimum (i.e. <code>minmax(auto, <flex>)</code>).</dd> diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html index 5ae9d4a987..35d648aa50 100644 --- a/files/ru/web/css/grid/index.html +++ b/files/ru/web/css/grid/index.html @@ -10,9 +10,9 @@ translation_of: Web/CSS/grid --- <h2 id="Общие_сведения">Общие сведения</h2> -<p>Свойство CSS <strong><code>grid</code></strong> является сокращенной формой записи, которая устанавливает значения для всех явных свойств сетки (grid) ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.</p> +<p>Свойство CSS <strong><code>grid</code></strong> является сокращённой формой записи, которая устанавливает значения для всех явных свойств сетки (grid) ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.</p> -<p class="note"><strong>Note:</strong> В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращенных формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращенной формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращенной форме записи.</p> +<p class="note"><strong>Note:</strong> В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращённых формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращённой формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращённой форме записи.</p> <p>{{cssinfo}}</p> @@ -176,7 +176,7 @@ grid: unset; <p>[2] Реализован за преимуществом <code>layout.css.grid.enabled</code> начиная с Gecko 40.0 {{geckoRelease("40.0")}}, имея значение по умолчанию <code>false</code>. Начиная с Gecko 52.0 включено по умолчанию.</p> -<p>[3] Internet Explorer и Edge реализуют <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">старую версию спецификации</a>, которая не поддерживает сокращенную форму записи <code>grid. Смотри </code><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">request for updating the implementation</a>.</p> +<p>[3] Internet Explorer и Edge реализуют <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/">старую версию спецификации</a>, которая не поддерживает сокращённую форму записи <code>grid. Смотри </code><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">request for updating the implementation</a>.</p> <p>[4] Реализован до функциональных возможностей экспериментальной веб-платформы в <code>chrome://flags</code> начиная с Opera 28.0.</p> diff --git a/files/ru/web/css/hanging-punctuation/index.html b/files/ru/web/css/hanging-punctuation/index.html index 15aee9db7b..b150404bab 100644 --- a/files/ru/web/css/hanging-punctuation/index.html +++ b/files/ru/web/css/hanging-punctuation/index.html @@ -37,7 +37,7 @@ hanging-punctuation: unset; <h2 id="Синтаксис">Синтаксис</h2> -<p>Свойство <code>hanging-punctuation</code> может быть определено с помощью одного, двух или трех ключевых слов.</p> +<p>Свойство <code>hanging-punctuation</code> может быть определено с помощью одного, двух или трёх ключевых слов.</p> <ul> <li>Для <strong>одного значения</strong> может быть использовано любое из описанных ниже значений.</li> @@ -47,7 +47,7 @@ hanging-punctuation: unset; <li><code>last</code> вместе с одним из <code>first</code>, <code>allow-end</code> или <code>force-end</code></li> </ul> </li> - <li>Для <strong>трех значений</strong> используются один из следующих вариантов: + <li>Для <strong>трёх значений</strong> используются один из следующих вариантов: <ul> <li><code>first</code>, <code>allow-end</code> и <code>last</code></li> <li><code>first</code>, <code>force-end</code> и <code>last</code></li> diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html index 5a256e224d..6bf95b2456 100644 --- a/files/ru/web/css/hyphens/index.html +++ b/files/ru/web/css/hyphens/index.html @@ -53,7 +53,7 @@ hyphens: unset; <dl> <dt>U+2010 (HYPHEN)</dt> - <dd><font>«Жесткий» дефис указывает на возможность видимого разрыва строки. </font><font>Даже если строка в этом месте не переносится, дефис все равно отображается.</font></dd> + <dd><font>«Жёсткий» дефис указывает на возможность видимого разрыва строки. </font><font>Даже если строка в этом месте не переносится, дефис все равно отображается.</font></dd> <dt>U+00AD (SHY)</dt> <dd>Невидимый <font>«</font>мягкий<font>»</font> перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте <code>&shy;</code> для вставки мягкого дефиса.</dd> </dl> diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html index f837d98a4b..9f00bc8ca7 100644 --- a/files/ru/web/css/image-set()/index.html +++ b/files/ru/web/css/image-set()/index.html @@ -34,7 +34,7 @@ translation_of: Web/CSS/image-set() <h2 id="Вопросы_доступности">Вопросы доступности</h2> -<p>Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своем присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать ее семантически в документе.</p> +<p>Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своём присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать её семантически в документе.</p> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> diff --git a/files/ru/web/css/index.html b/files/ru/web/css/index.html index 128ae1fda3..eb959f3866 100644 --- a/files/ru/web/css/index.html +++ b/files/ru/web/css/index.html @@ -8,7 +8,7 @@ tags: - Learning - Reference - Référence(2) - - Верстка + - Вёрстка - Главная - Дизайн - Справка diff --git a/files/ru/web/css/inherit/index.html b/files/ru/web/css/inherit/index.html index 5304dc4d9d..b24d30e524 100644 --- a/files/ru/web/css/inherit/index.html +++ b/files/ru/web/css/inherit/index.html @@ -24,10 +24,10 @@ translation_of: Web/CSS/inherit <h2 id="Пример">Пример</h2> -<pre class="brush: css">/* Делает заголовки второго уровня зелеными */ +<pre class="brush: css">/* Делает заголовки второго уровня зелёными */ h2 { color: green; } -/* ...но не делает зелеными элементы боковой панели, которые используют цвет своего родителя */ +/* ...но не делает зелёными элементы боковой панели, которые используют цвет своего родителя */ #sidebar h2 { color: inherit; } </pre> @@ -83,5 +83,5 @@ div#current { color: blue; } <li><code>Используйте {{cssxref("initial")}}, чтобы установить свойство в его начальное значение.</code></li> <li><code>Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.</code></li> <li><code>Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).</code></li> - <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.</code></li> + <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.</code></li> </ul> diff --git a/files/ru/web/css/initial/index.html b/files/ru/web/css/initial/index.html index 65187f0ab5..5bc7850151 100644 --- a/files/ru/web/css/initial/index.html +++ b/files/ru/web/css/initial/index.html @@ -79,5 +79,5 @@ em { <li><code>Используйте {{cssxref("unset")}}, чтобы установить свойство в его унаследованное значение, если оно наследует, или его начальное значение, если нет.</code></li> <li><code>Используйте {{cssxref("revert")}} для сброса свойства до значения, установленного таблицей стилей пользователя-агента (или стилями пользователя, если они существуют).</code></li> <li>Используйте свойство {{cssxref("inherit")}}, чтобы установить свойство элемента таким же значением, как у его родителя.</li> - <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращенного (reverted) или неустановленного (unset) состояния.</code></li> + <li><code>Свойство {{cssxref("all")}} позволяет сбросить все свойства сразу до начального (initial), унаследованного (inherited), возвращённого (reverted) или неустановленного (unset) состояния.</code></li> </ul> diff --git a/files/ru/web/css/inset/index.html b/files/ru/web/css/inset/index.html index 8cbf51bf1d..88071325e5 100644 --- a/files/ru/web/css/inset/index.html +++ b/files/ru/web/css/inset/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/inset --- <div>{{CSSRef}}{{SeeCompatTable}}</div> -<p>Свойство <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset</code></strong> определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определенных для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p> +<p>Свойство <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> <strong><code>inset</code></strong> определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам {{cssxref("top")}} и {{cssxref("bottom")}}, или {{cssxref("right")}} и {{cssxref("left")}}, в зависимости от значений, определённых для {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p> <pre class="brush:css no-line-numbers">/* <length> значения */ inset: 3px 10px 3px 10px; diff --git a/files/ru/web/css/integer/index.html b/files/ru/web/css/integer/index.html index c608250e6c..a7240a3e81 100644 --- a/files/ru/web/css/integer/index.html +++ b/files/ru/web/css/integer/index.html @@ -33,7 +33,7 @@ translation_of: Web/CSS/integer <pre class="example-bad">12.0 Это <number>, а не <integer>, хоть и представляется как целое число. 12. "Дробные" точки запрещены. -+---12 Разрешен только один предшествующий символ +/-. ++---12 Разрешён только один предшествующий символ +/-. десять Буквы запрещены. _5 Специальные знаки запрещены. \35 Экранированные символы Юникода запрещены, даже если они являются целым числом (здесь: 5). diff --git a/files/ru/web/css/isolation/index.html b/files/ru/web/css/isolation/index.html index 52deb89e55..7153c6f925 100644 --- a/files/ru/web/css/isolation/index.html +++ b/files/ru/web/css/isolation/index.html @@ -3,7 +3,7 @@ title: isolation slug: Web/CSS/isolation tags: - Контекст наложения - - Очередность + - Очерёдность - Порядок отрисовки translation_of: Web/CSS/isolation --- @@ -35,7 +35,7 @@ isolation: unset; <dl> <dt><code>auto</code></dt> - <dd>Новый контекст наложения создается только в том случае, если это требуется для одного из свойств, применяемых к элементу.</dd> + <dd>Новый контекст наложения создаётся только в том случае, если это требуется для одного из свойств, применяемых к элементу.</dd> <dt><code>isolate</code></dt> <dd>Новый контекст наложения должен быть создан.</dd> </dl> diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html index ab44ce45bb..33263a5442 100644 --- a/files/ru/web/css/justify-content/index.html +++ b/files/ru/web/css/justify-content/index.html @@ -14,7 +14,7 @@ translation_of: Web/CSS/justify-content <p>{{EmbedInteractiveExample("pages/css/justify-content.html")}}</p> -<p>Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox разметке</a> есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от <code>0</code>, эффект не будет применен, потому что не останется свободного места.</p> +<p>Выравнивание выполняется после того, как применяются длины и автоматические поля, что означает, что если во <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox разметке</a> есть хотя бы один flex-элемент, с {{cssxref("flex-grow")}} отличным от <code>0</code>, эффект не будет применён, потому что не останется свободного места.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -32,7 +32,7 @@ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; -/* Распределенное выравнивание */ +/* Распределённое выравнивание */ justify-content: space-between; /* Равномерно распределяет все элементы по ширине flex-блока. Первый элемент вначале, последний в конце */ justify-content: space-around; /* Равномерно распределяет все элементы по ширине flex-блока. @@ -74,7 +74,7 @@ justify-content: unset; <dt><code>right</code></dt> <dd>Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как <code>start</code>.</dd> <dt><code>normal</code></dt> - <dd>Элементы располагаются на своих обычных позициях, так как будто свойство <code>justify-content</code> не задано. Этот параметр ведет себя как <code>stretch</code> в grid и flex контейнерах.</dd> + <dd>Элементы располагаются на своих обычных позициях, так как будто свойство <code>justify-content</code> не задано. Этот параметр ведёт себя как <code>stretch</code> в grid и flex контейнерах.</dd> <dt><code>baseline<br> first baseline</code><br> <code>last baseline</code></dt> diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html index 4e28a766e9..e33b891277 100644 --- a/files/ru/web/css/justify-items/index.html +++ b/files/ru/web/css/justify-items/index.html @@ -65,7 +65,7 @@ justify-items: initial; justify-items: unset; </pre> -<p>Этот атрибут может принимать одну из четырех различных форм:</p> +<p>Этот атрибут может принимать одну из четырёх различных форм:</p> <ul> <li>Основные ключевые слова: одно из значений ключевого слова: <code>normal</code>, <code>auto</code>, или <code>stretch</code>.</li> @@ -83,10 +83,10 @@ justify-items: unset; <dd>Эффект этого атрибута зависит от выбранного способа разметки: <ul> <li>Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова <code>start</code></li> - <li>Для разметки с абсолютно позиционированный элементами, это ключевое слово ведет себя как <code>start</code> на замененных блоках с абсолютным позиционированием и как <code>stretch</code> на всех остальных блоках с абсолютным позиционированием</li> + <li>Для разметки с абсолютно позиционированный элементами, это ключевое слово ведёт себя как <code>start</code> на заменённых блоках с абсолютным позиционированием и как <code>stretch</code> на всех остальных блоках с абсолютным позиционированием</li> <li>Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li> <li>Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li> - <li>Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению <code>stretch</code>, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как <code>start</code></li> + <li>Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению <code>stretch</code>, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведёт себя как <code>start</code></li> </ul> </dd> <dt><code>start</code></dt> @@ -104,22 +104,22 @@ justify-items: unset; <dt><code>center</code></dt> <dd>Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.</dd> <dt><code>left</code></dt> - <dd>Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведет себя как <code>start</code>.</dd> + <dd>Элементы выравниваются на одном уровне друг с другом по направлению к левой границе контейнера выравнивания. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как <code>start</code>.</dd> <dt><code>right</code></dt> - <dd>Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведет себя как <code>start</code>.</dd> + <dd>Элементы выравниваются на одном уровне друг с другом по направлению к правой границе контейнера выравнивания по соответствующей оси. Если ось свойства не параллельна внутренней оси, это значение ведёт себя как <code>start</code>.</dd> <dt><code>baseline<br> first baseline</code><br> <code>last baseline</code></dt> <dd>Определяет участие значений <code>first baseline</code> или <code>last baseline</code> в исходном выравнивании. Значение <code>baseline</code> выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.</dd> <dd>Возвратным выравниванием для <code>first baseline</code> является значение <code>start</code>, для <code>last baseline</code> является значение <code>end</code>.</dd> <dt><code>stretch</code></dt> - <dd>Если объединенный размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением <code>auto</code> увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединенный размер точно заполняет контейнер выравнивания.</dd> + <dd>Если объединённый размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением <code>auto</code> увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (или эквивалентной функциональностью), таким образом, что объединённый размер точно заполняет контейнер выравнивания.</dd> <dt><code>safe</code></dt> <dd>Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение <code>start</code>.</dd> <dt><code>unsafe</code></dt> <dd>Независимо от относительных размеров элемента и контейнера выравнивания, данное значение выравнивания учитывается.</dd> <dt><code>legacy</code></dt> - <dd>Создает значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение <code>justify-self: auto</code>, ключевое слово <code>legacy</code> не учитывается по нисходящему наследованию. Действует только со значением <code>left</code>, <code>right</code>, или <code>center</code>, связанным с ним.</dd> + <dd>Создаёт значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение <code>justify-self: auto</code>, ключевое слово <code>legacy</code> не учитывается по нисходящему наследованию. Действует только со значением <code>left</code>, <code>right</code>, или <code>center</code>, связанным с ним.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -164,7 +164,7 @@ justify-items: unset; <ul> <li>CSS Руководство по Grid: <em><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Выравнивание блоков в разметке Grid</a></em></li> <li><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">CSS Выравнивание блоков</a></li> - <li>Сокращенный атрибут {{CSSxRef("place-items")}}</li> + <li>Сокращённый атрибут {{CSSxRef("place-items")}}</li> <li>Атрибут {{CSSxRef("justify-self")}}</li> <li>Атрибут {{CSSxRef("align-items")}}</li> </ul> diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html index 6dab482257..ee254f16d9 100644 --- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation --- <div>{{CSSRef}}</div> -<p class="summary">Навигация по хлебным крошкам помогает пользователю понять свое местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.</p> +<p class="summary">Навигация по хлебным крошкам помогает пользователю понять своё местоположение на веб-сайте, обеспечивая обратный путь к начальной странице.</p> <p><img alt="Links displayed inline with separators" src="https://mdn.mozillademos.org/files/16228/breadcrumb-navigation.png" style="height: 108px; width: 1268px;"></p> @@ -22,7 +22,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation </div> <div class="blockIndicator note"> -<p><strong>Примечание</strong>: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p> +<p><strong>Примечание</strong>: В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p> <pre class="notranslate">.breadcrumb li:not(:first-child)::before { content: "→"; diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html index ca19142c28..898ba58672 100644 --- a/files/ru/web/css/layout_cookbook/index.html +++ b/files/ru/web/css/layout_cookbook/index.html @@ -11,12 +11,12 @@ tags: translation_of: Web/CSS/Layout_cookbook --- <div>{{CSSRef}}<br> -Книга рецептов CSS объединяет примеры большинства наиболее распространенных лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.<br> +Книга рецептов CSS объединяет примеры большинства наиболее распространённых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.<br> <br> В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.</div> <div><br> -<strong>Примечание.</strong> Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведенных здесь рецептов.</div> +<strong>Примечание.</strong> Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведённых здесь рецептов.</div> <h2 id="The_Recipes">The Recipes</h2> diff --git a/files/ru/web/css/layout_cookbook/split_navigation/index.html b/files/ru/web/css/layout_cookbook/split_navigation/index.html index 5f08999af1..c6b66d5e2f 100644 --- a/files/ru/web/css/layout_cookbook/split_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/split_navigation/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/Layout_cookbook/Split_Navigation <h2 id="Требования">Требования</h2> -<p>Распространенный навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. </p> +<p>Распространённый навигационный шаблон имеет один элемент, который отделен от остальных. Мы можем использовать Flexbox для того, чтобы сделать это, без необходимости создавать два набора элементов в двух раздельных flex контейнерах. </p> <h2 id="Рецепт">Рецепт</h2> diff --git a/files/ru/web/css/layout_cookbook/sticky_footers/index.html b/files/ru/web/css/layout_cookbook/sticky_footers/index.html index 945d727438..d5cc1a5c97 100644 --- a/files/ru/web/css/layout_cookbook/sticky_footers/index.html +++ b/files/ru/web/css/layout_cookbook/sticky_footers/index.html @@ -33,7 +33,7 @@ translation_of: Web/CSS/Layout_cookbook/Sticky_footers <h2 id="Выбор_сделан">Выбор сделан</h2> -<p>В приведенном выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс <code>.wrapper</code> имеет минимальную высоту <code>100%</code>, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаем сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.</p> +<p>В приведённом выше примере мы получаем липкий нижний колонтитул, используя CSS Grid Layout. Класс <code>.wrapper</code> имеет минимальную высоту <code>100%</code>, что означает, что он такой же высоты, как и контейнер, в котором он находится. Затем мы создаём сетку с одним столбцом с тремя строками, по одной строке для каждой части нашего макета.</p> <p>При автоматическом размещении сетки наши элементы будут располагаться в исходном порядке, поэтому заголовок переходит на первую дорожку с автоматическими размерами, основное содержимое - на дорожку <code>1fr</code>, а нижний колонтитул - в конечную дорожку с автоматическими размерами. Трек <code>1fr</code> будет занимать все доступное пространство и поэтому будет увеличиваться, чтобы заполнить этот пробел.</p> diff --git a/files/ru/web/css/line-break/index.html b/files/ru/web/css/line-break/index.html index 77a60084f0..3fd8255f5a 100644 --- a/files/ru/web/css/line-break/index.html +++ b/files/ru/web/css/line-break/index.html @@ -33,7 +33,7 @@ line-break: unset; <dt><code>loose</code></dt> <dd>Разрыв текста, используя правило разрыва строки с наименьшими ограничениями. Обычно используется для коротких строк, например, в газетах.</dd> <dt><code>normal</code></dt> - <dd>Разрыв текста, используя наиболее распространенное правило разрыва строки.</dd> + <dd>Разрыв текста, используя наиболее распространённое правило разрыва строки.</dd> <dt><code>strict</code></dt> <dd>Разрыв текста, используя самое строгое правило разрыва строки.</dd> </dl> diff --git a/files/ru/web/css/list-style-image/index.html b/files/ru/web/css/list-style-image/index.html index fd53b2bf17..75ab704334 100644 --- a/files/ru/web/css/list-style-image/index.html +++ b/files/ru/web/css/list-style-image/index.html @@ -40,7 +40,7 @@ list-style-image: unset; <dt>{{cssxref("<url>")}}</dt> <dd>Расположение элемента для использования в качестве маркера.</dd> <dt><code>none</code></dt> - <dd>Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определенный в {{ Cssxref("list-style-type") }}.</dd> + <dd>Указывает, что изображение не используется в качестве маркера списка. Если установлено это значение, вместо него будет использоваться маркер, определённый в {{ Cssxref("list-style-type") }}.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/margin-inline-start/index.html b/files/ru/web/css/margin-inline-start/index.html index 5021330969..cc9db43bce 100644 --- a/files/ru/web/css/margin-inline-start/index.html +++ b/files/ru/web/css/margin-inline-start/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/margin-inline-start --- <p>{{CSSRef}}{{SeeCompatTable}}</p> -<p>Свойство <strong><code>margin-inline-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> задает логическое строковое (inline) значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.</p> +<p>Свойство <strong><code>margin-inline-start</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> задаёт логическое строковое (inline) значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} в зависимости от значений {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.</p> <pre class="brush:css no-line-numbers">/* <length> values */ margin-inline-start: 10px; /* абсолютная величина */ diff --git a/files/ru/web/css/margin-left/index.html b/files/ru/web/css/margin-left/index.html index ae301e9b36..870fe59a5d 100644 --- a/files/ru/web/css/margin-left/index.html +++ b/files/ru/web/css/margin-left/index.html @@ -41,7 +41,7 @@ margin-left: unset; <dt>{{cssxref("<percentage>")}}</dt> <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd> <dt><code>auto</code></dt> - <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: + <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные: <table class="standard-table"> <thead> <tr> diff --git a/files/ru/web/css/margin-right/index.html b/files/ru/web/css/margin-right/index.html index d21ce8cdfd..e8fbfc332f 100644 --- a/files/ru/web/css/margin-right/index.html +++ b/files/ru/web/css/margin-right/index.html @@ -41,7 +41,7 @@ margin-right: unset; <dt>{{cssxref("<percentage>")}}</dt> <dd>Размер отступа в процентах - размер относительно длины родительского блока.</dd> <dt><code>auto</code></dt> - <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные: + <dd>Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%A1%D0%BF%D0%BE%D1%81%D0%BE%D0%B1_%D1%80%D0%B0%D1%81%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F">выбранным способом разметки</a>. Если значения <code>margin-left</code> и <code>margin-right</code> одновременно установлены как <code>auto</code>, расчётное пространство распределяется равномерно. Эта таблица кратко излагает различные: <table class="standard-table"> <thead> <tr> diff --git a/files/ru/web/css/margin/index.html b/files/ru/web/css/margin/index.html index 62c2f9ec7a..8841f9ed8c 100644 --- a/files/ru/web/css/margin/index.html +++ b/files/ru/web/css/margin/index.html @@ -11,7 +11,7 @@ translation_of_original: Web/CSS/margin-new --- <div>{{CSSRef}}</div> -<p>Свойство <strong><code>margin</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> на всех четырех сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.</p> +<p>Свойство <strong><code>margin</code></strong> <a href="/ru/CSS" title="CSS">CSS</a> определяет <a href="/ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">внешний отступ</a> на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} и {{cssxref("margin-left")}}.</p> <pre class="brush:css no-line-numbers">/* Применяется ко всем четырём сторонам */ margin: 1em; @@ -49,7 +49,7 @@ margin: unset; <div class="cell"> <div class="m m4">margin: 5px 1em 0 auto</div> </div> - <div class="note">Все вышеприведенные блоки имеют одинаковую ширину 50%</div> + <div class="note">Все вышеприведённые блоки имеют одинаковую ширину 50%</div> </div> </div></pre> @@ -112,10 +112,10 @@ margin: unset; <h2 id="Синтаксис">Синтаксис</h2> -<p>Свойство <code>margin</code> может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <code><a href="#<length>"><length></a></code>, <code><a href="#<percentage>"><percentage></a></code> или является ключевым словом <code><a href="#auto">auto</a></code>. Каждое значение может быть положительным, отрицательным или равным нулю.</p> +<p>Свойство <code>margin</code> может быть задано с использованием одного, двух, трёх или четырёх значений. Каждое значение имеет тип <code><a href="#<length>"><length></a></code>, <code><a href="#<percentage>"><percentage></a></code> или является ключевым словом <code><a href="#auto">auto</a></code>. Каждое значение может быть положительным, отрицательным или равным нулю.</p> <ul> - <li>Когда определено <strong>одно</strong> значение, такое значение определено для <strong>всех четырех сторон</strong>.</li> + <li>Когда определено <strong>одно</strong> значение, такое значение определено для <strong>всех четырёх сторон</strong>.</li> <li>Когда определены <strong>два</strong> значения, то первое значение определяет внешний отступ для <strong>верхней и нижней</strong> стороны, а второе значение определяет отступ для <strong>левой и правой стороны</strong>.</li> <li>Когда определены <strong>три</strong> значение, то первое значение определяет внешний отступ для <strong>верхней</strong> стороны, второе значение определяет внешний отступ для <strong>левой и правой стороны</strong>, а третье значение определяет отступ для <strong>нижней</strong> стороны.</li> <li>Когда определены <strong>четыре</strong> значения, они определяют внешние отступы для <strong>верхней</strong> стороны, <strong>справа</strong>, <strong>снизу</strong> и <strong>слева</strong> в рассмотренном порядке (по часовой стрелке).</li> diff --git a/files/ru/web/css/max-block-size/index.html b/files/ru/web/css/max-block-size/index.html index 416987e8b3..bce04c2a67 100644 --- a/files/ru/web/css/max-block-size/index.html +++ b/files/ru/web/css/max-block-size/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/max-block-size --- <p>{{CSSRef}}{{SeeCompatTable}}</p> -<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> свойство<strong> <code>max-block-size</code></strong> определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства <code>max-block-size</code> относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.</p> +<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> свойство<strong> <code>max-block-size</code></strong> определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определённого в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства <code>max-block-size</code> относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.</p> <pre class="brush:css no-line-numbers">/* <length> values */ max-block-size: 300px; diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html index 148efccbea..63d4f820cb 100644 --- a/files/ru/web/css/media_queries/index.html +++ b/files/ru/web/css/media_queries/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/Media_Queries --- <div>{{CSSRef("CSS3 Media Queries")}}</div> -<p><strong>Media Queries</strong> - ключевой компонент <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p> +<p><strong>Media Queries</strong> - ключевой компонент <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p> -<p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.</p> +<p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе {{HTMLElement("picture")}}.</p> <p>In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.</p> diff --git a/files/ru/web/css/media_queries/testing_media_queries/index.html b/files/ru/web/css/media_queries/testing_media_queries/index.html index facf42b21c..34880c4015 100644 --- a/files/ru/web/css/media_queries/testing_media_queries/index.html +++ b/files/ru/web/css/media_queries/testing_media_queries/index.html @@ -42,7 +42,7 @@ mediaQueryList.addListener(handleOrientationChange); // Добавление к handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз. </pre> -<p>Этот код создает список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.</p> +<p>Этот код создаёт список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.</p> <p>Функция <code>handleOrientationChange()</code> будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:</p> @@ -57,11 +57,11 @@ handleOrientationChange(mediaQueryList); // Запуск обработчика <p>Выше, мы определяем параметры как <code>evt</code> — event объект. Это имеет значение, поскольку <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">новые реализации <code>MediaQueryList</code></a> обрабатывают события стандартным способом. Они больше не используют нестандартный механизм {{domxref("MediaQueryListListener")}} , а используют стандартную настройку обработчика событий, передавая <a href="/en-US/docs/Web/API/Event">объект event</a> {{domxref("MediaQueryListEvent")}} как аргумент колбэк-функции.</p> -<p>Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства <code>MediaQueryList</code> путем прямого доступа к нему или доступа к event объекту.</p> +<p>Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства <code>MediaQueryList</code> путём прямого доступа к нему или доступа к event объекту.</p> <h2 id="Уведомление_о_завершении_выражения">Уведомление о завершении выражения</h2> -<p>Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод <code>removeListener()</code> для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:</p> +<p>Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод <code>removeListener()</code> для {{domxref("MediaQueryList") }}, передав ему имя, ранее определённой функции:</p> <pre class="brush: js">mediaQueryList.removeListener(handleOrientationChange); </pre> diff --git a/files/ru/web/css/media_queries/using_media_queries/index.html b/files/ru/web/css/media_queries/using_media_queries/index.html index 9923ab8f1e..07014138a2 100644 --- a/files/ru/web/css/media_queries/using_media_queries/index.html +++ b/files/ru/web/css/media_queries/using_media_queries/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/Media_Queries/Using_media_queries tags: - Веб - Медиа - - Медиа верстка + - Медиа вёрстка - Медиавыражения - Отзывчивый дизайн - Продвинутый @@ -30,7 +30,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <h2 id="Узконаправленные_media">Узконаправленные @media</h2> -<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> описывают некие характеристики определенного {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда <em>основное </em>устройство ввода пользователя (например мышь) будет расположено над элементами:</p> +<p><a href="/en-US/docs/CSS/@media#Media_features">Media features</a> описывают некие характеристики определённого {{glossary("user agent")}}, устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда <em>основное </em>устройство ввода пользователя (например мышь) будет расположено над элементами:</p> <pre class="brush: css">@media (hover: hover) { ... }</pre> @@ -38,7 +38,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <pre class="brush: css">@media (max-width: 12450px) { ... }</pre> -<p>Если вы создаете медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:</p> +<p>Если вы создаёте медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:</p> <pre class="brush: css">@media (color) { ... }</pre> diff --git a/files/ru/web/css/object-fit/index.html b/files/ru/web/css/object-fit/index.html index 66c10ac4ed..69cacd65c0 100644 --- a/files/ru/web/css/object-fit/index.html +++ b/files/ru/web/css/object-fit/index.html @@ -23,11 +23,11 @@ translation_of: Web/CSS/object-fit <dt><code>fill</code></dt> <dd>Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.</dd> <dt><code>contain</code></dt> - <dd>Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.</dd> + <dd>Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определён как "помещённый внутрь" блока, ограничиваясь его шириной и высотой.</dd> <dt><code>cover</code></dt> - <dd>Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.</dd> + <dd>Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как "покрытие" блока, ограничиваясь его шириной и высотой.</dd> <dt><code>none</code></dt> - <dd>Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определен с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.</dd> + <dd>Смещаемый контент не изменяет свой размер с целью заполнить пространство блока: конечный размер контента будет определён с использованием алгоритма изменения размера по умолчанию, а также размер объекта по умолчанию равен ширине и высоте смещаемого контента.</dd> </dl> <dl> diff --git a/files/ru/web/css/opacity/index.html b/files/ru/web/css/opacity/index.html index 5242bb0220..92b9189692 100644 --- a/files/ru/web/css/opacity/index.html +++ b/files/ru/web/css/opacity/index.html @@ -68,10 +68,10 @@ translation_of: Web/CSS/opacity opacity: 0.2; /* Едва видимый текст на фоне */ } .medium { - opacity: 0.5; /* Видимость текста более четкая на фоне */ + opacity: 0.5; /* Видимость текста более чёткая на фоне */ } .heavy { - opacity: 0.9; /* Видимость текста очень четкая на фоне */ + opacity: 0.9; /* Видимость текста очень чёткая на фоне */ } </pre> @@ -105,9 +105,9 @@ img.opacity:hover { <h2 id="Проблемы_доступности">Проблемы доступности</h2> -<p>Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещен текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.</p> +<p>Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещён текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.</p> -<p>Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим <a href="https://www.w3.org/WAI/intro/wcag">Рекомендациям по доступности веб-контента (WCAG)</a>, для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-weight">жирный</a> или крупнее, или 24px или выше.</p> +<p>Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим <a href="https://www.w3.org/WAI/intro/wcag">Рекомендациям по доступности веб-контента (WCAG)</a>, для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-weight">жирный</a> или крупнее, или 24px или выше.</p> <ul> <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> diff --git a/files/ru/web/css/order/index.html b/files/ru/web/css/order/index.html index a9265b81c8..783af7d5b6 100644 --- a/files/ru/web/css/order/index.html +++ b/files/ru/web/css/order/index.html @@ -55,7 +55,7 @@ order: unset;</pre> </main> <footer>...</footer></pre> -<p>Следующий CSS код должен создать классический блок контента окруженный боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.</p> +<p>Следующий CSS код должен создать классический блок контента окружённый боковыми панелями. Flexible Box Layout Module автоматически создаёт блоки одинаковой высоты и максимально допустимой ширины.</p> <pre class="brush:css;">main { display: flex; text-align:center; } main > article { flex:1; order: 2; } diff --git a/files/ru/web/css/orphans/index.html b/files/ru/web/css/orphans/index.html index d6c5385e17..b279776262 100644 --- a/files/ru/web/css/orphans/index.html +++ b/files/ru/web/css/orphans/index.html @@ -2,7 +2,7 @@ title: orphans slug: Web/CSS/orphans tags: - - Верстка + - Вёрстка - печать - разрыв страницы - фрагментация diff --git a/files/ru/web/css/overflow-block/index.html b/files/ru/web/css/overflow-block/index.html index ead0067598..2756cb66f9 100644 --- a/files/ru/web/css/overflow-block/index.html +++ b/files/ru/web/css/overflow-block/index.html @@ -31,7 +31,7 @@ overflow-block: unset; <dl> <dt><code>visible</code></dt> - <dd>Содержимое не обрезается и может отображаться за пределами начального и конечного краев блока отступа.</dd> + <dd>Содержимое не обрезается и может отображаться за пределами начального и конечного краёв блока отступа.</dd> <dt><code>hidden</code></dt> <dd>При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.</dd> <dt><code>scroll</code></dt> diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html index fda01d4824..8c5409417a 100644 --- a/files/ru/web/css/overflow-wrap/index.html +++ b/files/ru/web/css/overflow-wrap/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/overflow-wrap <p class="hidden">Исходники для интерактивных примеров хранятся в GitHub репозитории. Если вы хотите поучаствовать в проекте с примерами, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам пул реквест.</p> <div class="note"> -<p><strong>Note:</strong> В отличие от {{cssxref("word-break")}}, <code>overflow-wrap</code> создает перенос только, если целое слово не может быть размещено на своей линии без переполнения</p> +<p><strong>Note:</strong> В отличие от {{cssxref("word-break")}}, <code>overflow-wrap</code> создаёт перенос только, если целое слово не может быть размещено на своей линии без переполнения</p> </div> <p>Изначально свойство <code>word-wrap</code> не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в <code>overflow-wrap</code> c алиасом <code>word-wrap</code>.</p> @@ -30,7 +30,7 @@ overflow-wrap: initial; overflow-wrap: unset; </pre> -<p>Свойство <code>overflow-wrap</code> задается с помощью ключевого слова и выбирается из списка значений приведенных ниже:</p> +<p>Свойство <code>overflow-wrap</code> задаётся с помощью ключевого слова и выбирается из списка значений приведённых ниже:</p> <h3 id="Values">Values</h3> diff --git a/files/ru/web/css/overflow/index.html b/files/ru/web/css/overflow/index.html index 58a572c013..00bac1115d 100644 --- a/files/ru/web/css/overflow/index.html +++ b/files/ru/web/css/overflow/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/overflow <p>Свойство CSS <code>overflow</code> определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.</p> -<p>Использование свойства <code>overflow</code> со значениями, отличными от <code>visible</code>, (значение, принятое по умолчанию), создаёт новый <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">блочный контекст форматирования</a>. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута <code>scrollTop</code> для соответствующего HTML-элемента, даже если <code>overflow</code> имеет значение <code>hidden</code>, элемент, возможно, придется прокрутить.</p> +<p>Использование свойства <code>overflow</code> со значениями, отличными от <code>visible</code>, (значение, принятое по умолчанию), создаёт новый <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">блочный контекст форматирования</a>. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута <code>scrollTop</code> для соответствующего HTML-элемента, даже если <code>overflow</code> имеет значение <code>hidden</code>, элемент, возможно, придётся прокрутить.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html index acdb9c8c05..58377262db 100644 --- a/files/ru/web/css/overscroll-behavior/index.html +++ b/files/ru/web/css/overscroll-behavior/index.html @@ -23,7 +23,7 @@ overflow: initial; overflow: unset; </pre> -<p>По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение ее верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called <strong>scroll chaining</strong>.</p> +<p>По умолчанию, мобильные браузеры как правило обеспечивают эффект "отскока" или даже обновляют страницу при достижение её верхней или нижней части (или другой области прокрутки). You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called <strong>scroll chaining</strong>.</p> <p>In some cases these behaviors are not desirable. you can use <code>overscroll-behavior</code> to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.</p> diff --git a/files/ru/web/css/padding-left/index.html b/files/ru/web/css/padding-left/index.html index 0e4c4a28ed..f669f782d3 100644 --- a/files/ru/web/css/padding-left/index.html +++ b/files/ru/web/css/padding-left/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/padding-left <p>Внутренний отступ элемента (англ. "padding") - это пространство между его содержимым и его границей.</p> <div class="blockIndicator note"> -<p><strong>Примечание:</strong> Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырех сторонах элемента одним значением.</p> +<p><strong>Примечание:</strong> Свойство {{cssxref ("padding")}} можно использовать для установки внутренних отступов на всех четырёх сторонах элемента одним значением.</p> </div> <h2 id="Syntax" name="Syntax"><font><font>Синтаксис</font></font></h2> diff --git a/files/ru/web/css/padding/index.html b/files/ru/web/css/padding/index.html index 8ab7697255..d299d9dbf2 100644 --- a/files/ru/web/css/padding/index.html +++ b/files/ru/web/css/padding/index.html @@ -49,7 +49,7 @@ padding: unset; </dl> <ul> - <li><strong>Одно</strong> значение применяется ко всем четырем сторонам</li> + <li><strong>Одно</strong> значение применяется ко всем четырём сторонам</li> <li><strong>Два</strong> значения применяются: <strong>1.</strong> <em>верхняя и нижняя</em> и <strong>2.</strong> <em>левая и правая</em> стороны</li> <li><strong>Три</strong> значения применяются: <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>левая и правая</em> и <strong>3.</strong> <em>нижняя</em> стороны</li> <li><strong>Четыре</strong> значения применяются<strong>:</strong> <strong>1.</strong> <em>верхняя</em>, <strong>2.</strong> <em>правая</em>, <strong>3.</strong> <em>нижняя</em> и <strong>4.</strong> <em>левая</em> стороны</li> diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html index c2bcbbf9bf..36f95f78c2 100644 --- a/files/ru/web/css/paint-order/index.html +++ b/files/ru/web/css/paint-order/index.html @@ -27,7 +27,7 @@ paint-order: markers stroke fill; /* отрисовывает маркеры, з <p>Если значение не указано, значением по умолчанию является следующий порядок <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p> -<p>Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределенное значение.</p> +<p>Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределённое значение.</p> <div class="note"> <p><strong>Примечание</strong>: В этом случае, маркеры отрисовываются только при рисовании форм SVG. включающих использование свойств <code>marker-*</code> (например <code><a href="/en-US/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) и элемента <code><a href="/en-US/docs/Web/SVG/Element/marker"><marker></a></code>. Они не применяются к тексту HTML, в этом случае, вы можете определить только порядок <code>stroke</code> и <code>fill</code>.</p> diff --git a/files/ru/web/css/perspective/index.html b/files/ru/web/css/perspective/index.html index b0d1d14fc1..015f838b1e 100644 --- a/files/ru/web/css/perspective/index.html +++ b/files/ru/web/css/perspective/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/perspective <p><em><code>Точка схождения </code></em><code>по умолчанию расположена в центре элемента, но её можно переместить используя свойство </code>{{ cssxref("perspective-origin") }}.</p> -<p>При использовании данного свойства со значениями отличными от 0 или none создается новый <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>.</p> +<p>При использовании данного свойства со значениями отличными от 0 или none создаётся новый <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html index 2c12b8b291..b6a95a4f4a 100644 --- a/files/ru/web/css/pointer-events/index.html +++ b/files/ru/web/css/pointer-events/index.html @@ -91,7 +91,7 @@ img { <h2 id="Примечание">Примечание</h2> -<p>Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши, с помощью <code>pointer-events</code> не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из дочерних элементов есть явные <code>pointer-events,</code> позволяющие этому ребенку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребенком, ни родителем (он пройдет через «родительский» на «цели» под ним).</p> +<p>Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши, с помощью <code>pointer-events</code> не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из дочерних элементов есть явные <code>pointer-events,</code> позволяющие этому ребёнку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребёнком, ни родителем (он пройдёт через «родительский» на «цели» под ним).</p> <p>Мы хотели бы предоставить более тонкий контроль (а не только <code>auto</code> и <code>none</code>) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить <code>pointer-events</code> для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">этой странице вики</a> (не беспокойтесь, мы всё сохраним аккуратно). </p> diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html index 3baa0548f0..fb6002c2fb 100644 --- a/files/ru/web/css/position/index.html +++ b/files/ru/web/css/position/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/position <li><strong>Элемент с липкой позицией</strong> — это элемент, у которого {{cssxref('computed_value', 'значение вычисленного')}} <code>position</code> является <code>sticky</code>. Он рассматривается как относительно позиционированный до тех пор, пока {{cssxref('Containing_Block', 'содержащий его блок')}} не пересечёт указанный порог (например, установка {{cssxref('top')}} в значение, отличное от <code>auto</code>) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край {{cssxref('Containing_Block', 'содержащего его блока')}}.</li> </ul> -<p>В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p> +<p>В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределённым (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p> <p>За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):</p> @@ -39,19 +39,19 @@ translation_of: Web/CSS/position <dl> <dt><code>static</code></dt> - <dd>Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своем месте в документе. Свойства <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> и <code>z-index</code> <em>не применяются</em> к данному элементу. Это значение по умолчанию.</dd> + <dd>Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code> и <code>z-index</code> <em>не применяются</em> к данному элементу. Это значение по умолчанию.</dd> <dt><code>relative</code></dt> <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается <em>относительно себя</em> на основе значений <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была <code>static</code>.</dd> - <dd>Это значение создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Его влияние на элементы <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> и <code>table-caption</code> не определено.</dd> + <dd>Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context','контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Его влияние на элементы <code>table-*-group</code>, <code>table-row</code>, <code>table-column</code>, <code>table-cell</code> и <code>table-caption</code> не определено.</dd> <dt><code>absolute</code></dt> - <dd>Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>.</dd> + <dd>Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создаётся пробела. Он расположен относительно его ближайшего относительно позиционированного предка, если таковой имеется; в противном случае он помещается относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}. Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>.</dd> <dd>Это значение создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}, когда значение <code>z-index</code> не <code>auto</code>. Поля абсолютно позиционированных коробок не {{cssxref('CSS_Box_Model/Mastering_margin_collapsing', 'сворачиваются')}} с другими полями.</dd> <dt><code>fixed</code></dt> - <dd>Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создается пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство <code>transform</code>, <code>perspective</code>, или <code>filter</code>, установленное на что-то иное, кроме <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), и в этом случае этот предок ведет себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с <code>perspective</code> и <code>filter</code>, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>.</dd> - <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на <em>каждой странице</em>.</dd> + <dd>Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного {{cssxref('Containing_Block', 'содержащего блока')}}, установленного {{glossary("viewport")}}, за исключением случаев, когда один из его предков имеет свойство <code>transform</code>, <code>perspective</code>, или <code>filter</code>, установленное на что-то иное, кроме <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с <code>perspective</code> и <code>filter</code>, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями <code>top</code>, <code>right</code>, <code>bottom</code> и <code>left</code>.</dd> + <dd>Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. В печатных документах элемент помещается в одно и то же положение на <em>каждой странице</em>.</dd> <dt><code>sticky</code></dt> <dd>Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего <em>прокручивающего предка</em> и {{cssxref('Containing_Block', 'содержащего блока')}} (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений <code>top</code>, <code>right</code>, <code>bottom</code>, и <code>left</code>. Смещение не влияет на положение любых других элементов.</dd> - <dd>Это значение всегда создает новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при <code>overflow</code> равном <code>hidden</code>, <code>scroll</code>, <code>auto</code> или <code>overlay</code>), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd> + <dd>Это значение всегда создаёт новый {{cssxref('CSS_Positioning/Understanding_z_index/The_stacking_context', 'контекст наложения')}}. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при <code>overflow</code> равном <code>hidden</code>, <code>scroll</code>, <code>auto</code> или <code>overlay</code>), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. <a href="https://github.com/w3c/csswg-drafts/issues/865">Github issue on W3C CSSWG</a>).</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> @@ -62,7 +62,7 @@ translation_of: Web/CSS/position <h3 id="Relative_positioning" name="Relative_positioning">Относительное позиционирование</h3> -<p>Относительно позиционированные элементы смещены на определенную величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведенном ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.</p> +<p>Относительно позиционированные элементы смещены на определённую величину от их обычной позиции в документе, но без смещения, влияющего на другие элементы. В приведённом ниже примере обратите внимание, как размещаются другие элементы, как если бы «Two» занимало пространство своего обычного расположения.</p> <h4 id="HTML">HTML</h4> @@ -134,7 +134,7 @@ span { <h3 id="Fixed_positioning" name="Fixed_positioning">Фиксированное позиционирование</h3> -<p>Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было <code>transform</code>, <code>perspective</code>, или свойства <code>filter</code>, отличное от <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно c <code>id="one"</code> фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.</p> +<p>Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было <code>transform</code>, <code>perspective</code>, или свойства <code>filter</code>, отличное от <code>none</code> (см. <a class="external external-icon" href="https://www.w3.org/TR/css-transforms-1/#propdef-transform">CSS Transforms Spec</a>), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c <code>id="one"</code> фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.</p> <h4 id="HTML_2">HTML</h4> @@ -196,7 +196,7 @@ span { <h3 id="Sticky_positioning" name="Sticky_positioning">Липкое позиционирование</h3> -<p>Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечет заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...</p> +<p>Липкое позиционирование можно рассматривать как гибрид относительного и фиксированного позиционирования. Липкий позиционированный элемент обрабатывается как относительно позиционированный до тех пор, пока он не пересечёт заданный порог, после чего он будет считаться фиксированным, пока не достигнет границы его родителя. Например...</p> <pre class="brush: css">#one { position: sticky; top: 10px; }</pre> @@ -322,6 +322,6 @@ dd + dd { <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> <div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check outand send us a pull request.<br> -Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> +Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> <p>{{Compat("css.properties.position")}}</p> diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html index efd1cd0d57..297ef580c4 100644 --- a/files/ru/web/css/radial-gradient()/index.html +++ b/files/ru/web/css/radial-gradient()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/radial-gradient() --- <div>{{CSSRef}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>radial-gradient()</code></strong> создает картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>radial-gradient()</code></strong> создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.</p> <div>{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}</div> @@ -19,16 +19,16 @@ translation_of: Web/CSS/radial-gradient() <h2 id="Композиция_свойства">Композиция свойства</h2> -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальный градиент задается <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p> +<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальный градиент задаётся <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p> <p>Чтобы создать плавный градиент, функция <code>radial-gradient()</code> рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.</p> -<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является <code>100%</code>. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.</p> +<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является <code>100%</code>. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.</p> <h2 id="Синтаксис">Синтаксис</h2> <pre class="brush: css no-line-numbers notranslate">/* Градиент в центре контейнера, - переход от красного к синему и после к зеленому */ + переход от красного к синему и после к зелёному */ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <h3 id="Параметры">Параметры</h3> @@ -108,7 +108,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <p>{{EmbedLiveSample('Простой_градиент', 120, 120)}}</p> -<h3 id="Градиент_со_смещенным_центром">Градиент со смещенным центром</h3> +<h3 id="Градиент_со_смещённым_центром">Градиент со смещённым центром</h3> <div class="hidden"> <pre class="brush: html notranslate"><div class="radial-gradient"></div> @@ -125,7 +125,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> #f35 0%, #43e 100%); }</pre> -<p>{{EmbedLiveSample('Градиент_со_смещенным_центром', 240, 120)}}</p> +<p>{{EmbedLiveSample('Градиент_со_смещённым_центром', 240, 120)}}</p> <div class="note"> <p><strong>Заметка:</strong> Дополнительные примеры можно найти в <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</a>.</p> diff --git a/files/ru/web/css/ratio/index.html b/files/ru/web/css/ratio/index.html index aa1e0f260e..b916f8e580 100644 --- a/files/ru/web/css/ratio/index.html +++ b/files/ru/web/css/ratio/index.html @@ -46,7 +46,7 @@ translation_of: Web/CSS/ratio <td><img alt="Ratio1_1.85.png" src="/@api/deki/files/5712/=Ratio1_1.85.png"></td> <td><code>185/100</code> = <code>91/50</code><br> <em>(нецелые делимые и делители не допускаются)</em></td> - <td>Наиболее распространенный видео-формат в 1960-х.</td> + <td>Наиболее распространённый видео-формат в 1960-х.</td> </tr> <tr> <td><img alt="Ratio1_2.39.png" src="/@api/deki/files/5713/=Ratio1_2.39.png"></td> diff --git a/files/ru/web/css/reference/index.html b/files/ru/web/css/reference/index.html index 507cc1fa72..36869289dc 100644 --- a/files/ru/web/css/reference/index.html +++ b/files/ru/web/css/reference/index.html @@ -160,7 +160,7 @@ div.menu-bar li:hover > ul { display: block; } <li><a href="/ru/docs/Web/CSS/box_model">Box-модель</a></li> <li><a href="/ru/docs/Web/CSS/Replaced_element">Замещаемый элемент</a></li> <li><a href="/ru/docs/Web/CSS/Value_definition_syntax">Синтаксис определения значений</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">Сокращенные свойства</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">Сокращённые свойства</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Объединение отступов</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Модель визуального форматирования</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode">Слои</a></li> diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html index e7dc20f24e..c3160fb98a 100644 --- a/files/ru/web/css/repeating-linear-gradient()/index.html +++ b/files/ru/web/css/repeating-linear-gradient()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/repeating-linear-gradient() --- <div>{{CSSRef}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>repeating-linear-gradient()</code></strong> создает изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>repeating-linear-gradient()</code></strong> создаёт изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.</p> <pre class="brush: css no-line-numbers notranslate">/* Повторяющийся градиент с углом наклона 45 градусов, начинающийся с синего и заканчивающийся красным цветом */ @@ -16,14 +16,14 @@ repeating-linear-gradient(45deg, blue, red); repeating-linear-gradient(to left top, blue, red); /* Повторяющийся градиент идущий от низа к верху, - начинающийся с синего, переходящего в зеленый на 40%, + начинающийся с синего, переходящего в зелёный на 40%, и заканчивающийся красным цветом */ repeating-linear-gradient(0deg, blue, green 40%, red); </pre> -<p>С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведет к резкому визуальному переходу.</p> +<p>С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведёт к резкому визуальному переходу.</p> -<p>Повторяющийся линейный градиент (как и любой прочий градиент) <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">не имеет размерностей по умолчанию</a>; т.е. у него нет предопределенного размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.</p> +<p>Повторяющийся линейный градиент (как и любой прочий градиент) <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">не имеет размерностей по умолчанию</a>; т.е. у него нет предопределённого размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.</p> <div class="note"> <p><strong>Примечание:</strong> Поскольку <code><gradient></code> относится к типу данных <code><image></code> , он может быть использован только там где применим тип <code><image></code>. По этой причине <code>repeating-linear-gradient()</code> не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("<color>")}}.</p> diff --git a/files/ru/web/css/selector_list/index.html b/files/ru/web/css/selector_list/index.html index dfa5948008..7bb32d2d94 100644 --- a/files/ru/web/css/selector_list/index.html +++ b/files/ru/web/css/selector_list/index.html @@ -2,7 +2,7 @@ title: Список селекторов slug: Web/CSS/Selector_list tags: - - Верстка + - Вёрстка - список селекторов translation_of: Web/CSS/Selector_list --- @@ -26,14 +26,14 @@ div { <h3 id="Группирование_на_одной_линии">Группирование на одной линии</h3> -<p>Группирование селекторов списком, разделенным запятой, на одной строк.</p> +<p>Группирование селекторов списком, разделённым запятой, на одной строк.</p> <pre class="brush: css">h1, h2, h3, h4, h5, h6 { font-family: helvetica; } </pre> <h3 id="Мультистрочное_группирование">Мультистрочное группирование</h3> -<p>Группирование селекторов списком, разделенным запятой, на нескольких строках.</p> +<p>Группирование селекторов списком, разделённым запятой, на нескольких строках.</p> <pre class="brush: css">#main, .content, @@ -54,7 +54,7 @@ h3 { font-family: sans-serif }</pre> <p>Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.</p> -<p>Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счет этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.</p> +<p>Есть способ исправить это - нужно использовать селектор {{CSSxRef(":is", ":is()")}}, который просто игнорирует недопустимые селекторы в своих аргумента, но за счёт этого, все селекторы имеют одинаковую спецификацию, так как {{CSSxRef(":is", ":is()")}} вычисляет спецификацию.</p> <pre class="brush: css">h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } diff --git a/files/ru/web/css/shorthand_properties/index.html b/files/ru/web/css/shorthand_properties/index.html index 5ac6911db1..90738acb1b 100644 --- a/files/ru/web/css/shorthand_properties/index.html +++ b/files/ru/web/css/shorthand_properties/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/Shorthand_properties --- <div>{{cssref}}</div> -<p class="summary"><strong><dfn>Сокращенные свойства</dfn></strong> - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращенное свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.</p> +<p class="summary"><strong><dfn>Сокращённые свойства</dfn></strong> - это такие CSS свойства, которые позволяют одновременно устанавливать значения нескольких других свойств. Используя сокращённое свойство, вы можете писать более сжатые (и часто более читаемые) таблицы стилей, экономя время и энергию.</p> <p>The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.</p> diff --git a/files/ru/web/css/specificity/index.html b/files/ru/web/css/specificity/index.html index 42adadbf3a..535a64f460 100644 --- a/files/ru/web/css/specificity/index.html +++ b/files/ru/web/css/specificity/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/Specificity <h3 id="Важное_исключение_из_правил_-_!important">Важное исключение из правил - <code>!important</code></h3> -<p>Когда при объявлении стиля используется модификатор <code>!important</code>, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор <code>!important</code> не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку <code>!important</code> усложняет отладку, нарушая естественное <a href="/ru-RU/docs/Web/CSS/Cascade">каскадирование</a> ваших стилей, он <strong>не приветствуется</strong> и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором <code>!important</code>, то применен будет стиль с большей специфичностью.</p> +<p>Когда при объявлении стиля используется модификатор <code>!important</code>, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор <code>!important</code> не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку <code>!important</code> усложняет отладку, нарушая естественное <a href="/ru-RU/docs/Web/CSS/Cascade">каскадирование</a> ваших стилей, он <strong>не приветствуется</strong> и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором <code>!important</code>, то применён будет стиль с большей специфичностью.</p> <p><strong>Несколько практических советов:</strong></p> @@ -69,7 +69,7 @@ span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd <p>Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).</p> -<p><strong>Вам придется использовать <code>!important</code> если:</strong></p> +<p><strong>Вам придётся использовать <code>!important</code> если:</strong></p> <p>А) Первый сценарий:</p> @@ -78,11 +78,11 @@ span </span><span class="pun">{</span><span class="pln"> </span><span class="kwd <li>Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством - объявлением стилей непосредственно в элементах</li> </ol> -<p>В таком случае вам придется объявить некоторые стили в вашем общем файле CSS как <code>!important</code>, переопределяя, таким образом, стили, установленные в самих элементах.</p> +<p>В таком случае вам придётся объявить некоторые стили в вашем общем файле CSS как <code>!important</code>, переопределяя, таким образом, стили, установленные в самих элементах.</p> <p>Пример из практики: Некоторые плохо написанные <strong>плагины jQuery</strong>, использующие присваивание стилей самим элементам.</p> -<p>Б) Еще сценарий:</p> +<p>Б) Ещё сценарий:</p> <pre class="default prettyprint prettyprinted"><code><span class="com">#someElement p {</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><span class="pln"> @@ -96,7 +96,7 @@ p</span><span class="pun">.</span><span class="pln">awesome </span><span class=" <p><strong>Как преодолеть !important</strong></p> -<p>A) Просто добавьте еще одно правило с модификатором <code>!important</code>, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).</p> +<p>A) Просто добавьте ещё одно правило с модификатором <code>!important</code>, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).</p> <p>Пример большей специфичности:</p> @@ -126,7 +126,7 @@ p</span><span class="pun">.</span><span class="pln">awesome </span><span class=" <h3 id="Не_исключение_-_not()">Не исключение - <code>:not()</code></h3> -<p>Отрицающий псевдокласс <code>:not</code> <em>не учитывается</em> как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри <code>:not</code>, при подсчете количества <a href="#selector-type">по типам селекторов</a> рассматриваются как обычные селекторы и учитываются.</p> +<p>Отрицающий псевдокласс <code>:not</code> <em>не учитывается</em> как псевдокласс при расчёте специфичности. Однако селекторы, расположенные внутри <code>:not</code>, при подсчёте количества <a href="#selector-type">по типам селекторов</a> рассматриваются как обычные селекторы и учитываются.</p> <p>Следующий фрагмент CSS ...</p> @@ -138,7 +138,7 @@ div:not(.outer) p { } </pre> -<p>... примененный к такому HTML ...</p> +<p>... применённый к такому HTML ...</p> <pre class="brush: html"><div class="outer"> <p>Это div.outer</p> @@ -168,7 +168,7 @@ div:not(.outer) p { } </pre> -<p>... примененные к нижеследующей разметке ...</p> +<p>... применённые к нижеследующей разметке ...</p> <pre class="brush: html"><p id="foo">Это пример.</p> </pre> @@ -229,7 +229,7 @@ h1 { <p><span style="color: #800080;">Вот заголовок!</span></p> -<p>Потому что селектор <code>h1</code> непосредственно соответствует элементу, а стиль, задающий зеленый цвет, всего лишь унаследован от родителя.</p> +<p>Потому что селектор <code>h1</code> непосредственно соответствует элементу, а стиль, задающий зелёный цвет, всего лишь унаследован от родителя.</p> <h2 id="Дополнительная_информация">Дополнительная информация</h2> diff --git a/files/ru/web/css/syntax/index.html b/files/ru/web/css/syntax/index.html index ead0688e79..18803ab95c 100644 --- a/files/ru/web/css/syntax/index.html +++ b/files/ru/web/css/syntax/index.html @@ -12,12 +12,12 @@ original_slug: Web/CSS/Синтаксис <ul> <li><strong>Свойство</strong> (<em>property</em>) — идентификатор действия, которое будет применено к элементу (например, цвет, или размер границы, и т.д.).</li> - <li><strong>Значение</strong> (<em>value</em>) — описывает, как именно <em>свойство</em> будет обработано браузером. <span id="result_box" lang="ru"><span class="hps">Каждое свойство имеет</span> <span class="hps">набор допустимых значений</span><span>, определенных</span> <span class="hps">формальными правилами</span><span>, а также</span> <span class="hps">семантический</span> <span class="hps">смысл,</span> <span class="hps">реализованный</span> движком <span class="hps">браузера.</span></span></li> + <li><strong>Значение</strong> (<em>value</em>) — описывает, как именно <em>свойство</em> будет обработано браузером. <span id="result_box" lang="ru"><span class="hps">Каждое свойство имеет</span> <span class="hps">набор допустимых значений</span><span>, определённых</span> <span class="hps">формальными правилами</span><span>, а также</span> <span class="hps">семантический</span> <span class="hps">смысл,</span> <span class="hps">реализованный</span> движком <span class="hps">браузера.</span></span></li> </ul> <h2 id="Объявления_CSS">Объявления CSS</h2> -<p>Задание CSS свойствам определенных значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p> +<p>Задание CSS свойствам определённых значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p> <p>И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, '<code>:</code>' (<code>U+003A COLON</code>), а пробелы до, между и после свойства или значения игнорируются.</p> @@ -31,11 +31,11 @@ original_slug: Web/CSS/Синтаксис <p><a href="/@api/deki/files/6165/=css_syntax_-_block.png"><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></a></p> -<p>Такие блоки называются <strong>блоками объявлений</strong>, и объявления в них разделяются точкой с запятой, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить ее для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.</p> +<p>Такие блоки называются <strong>блоками объявлений</strong>, и объявления в них разделяются точкой с запятой, '<code>;</code>' (<code>U+003B SEMICOLON</code>). Блок объявлений может быть пустым, т.е. не содержать объявлений. Пробелы между объявлениями игнорируются. Последнее объявление блока не нуждается в точке с запятой, хотя считается хорошим тоном добавить её для того, чтобы не допустить упущение этого знака при добавлении другого объявления в будущем.</p> <p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p> -<div class="note">Содержимое блока объявлений CSS, т. е. объявления, разделенные точкой с запятой. Блок объявлений может быть помещен внутри атрибута style HTML-документа без фигурных скобок.</div> +<div class="note">Содержимое блока объявлений CSS, т. е. объявления, разделённые точкой с запятой. Блок объявлений может быть помещён внутри атрибута style HTML-документа без фигурных скобок.</div> <h2 id="CSS_rulesets">CSS rulesets</h2> diff --git a/files/ru/web/css/time/index.html b/files/ru/web/css/time/index.html index 6d15f3733d..f892300dc1 100644 --- a/files/ru/web/css/time/index.html +++ b/files/ru/web/css/time/index.html @@ -2,7 +2,7 @@ title: <time> slug: Web/CSS/time tags: - - Верстка + - Вёрстка - Типы данных - время translation_of: Web/CSS/time @@ -46,7 +46,7 @@ translation_of: Web/CSS/time <h3 id="Невалидное_время">Невалидное время</h3> -<pre class="example-bad">0 Хотя ноль разрешен без единиц измерения для <length>, это невалидно для <time>. +<pre class="example-bad">0 Хотя ноль разрешён без единиц измерения для <length>, это невалидно для <time>. 12.0 Это <number>, а не <time>, так как пропущена единица измерения. 7 ms Пробел между числом и единицей измерения не допускается. </pre> diff --git a/files/ru/web/css/touch-action/index.html b/files/ru/web/css/touch-action/index.html index 5efacb4f53..1aa97b70b9 100644 --- a/files/ru/web/css/touch-action/index.html +++ b/files/ru/web/css/touch-action/index.html @@ -25,7 +25,7 @@ touch-action: initial; touch-action: unset; </pre> -<p>По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером. Приложение, использующие {{domxref("Pointer_events", "Pointer events", "", 1)}} получит событие {{domxref("HTMLElement/pointercancel_event", "pointercancel")}}, когда браузер начнет обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь свое поведение для оставшихся жестов благодаря прослушиванию событий {{domxref("HTMLElement/pointermove_event", "pointermove")}} и {{domxref("HTMLElement/pointerup_event", "pointerup")}}. Applications using {{domxref("Touch_events", "Touch events", "", 1)}} disable the browser handling of gestures by calling {{domxref("Event.preventDefault","preventDefault()")}}, but should also use <code>touch-action</code> to ensure the browser knows the intent of the application before any event listeners have been invoked.</p> +<p>По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером. Приложение, использующие {{domxref("Pointer_events", "Pointer events", "", 1)}} получит событие {{domxref("HTMLElement/pointercancel_event", "pointercancel")}}, когда браузер начнёт обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь своё поведение для оставшихся жестов благодаря прослушиванию событий {{domxref("HTMLElement/pointermove_event", "pointermove")}} и {{domxref("HTMLElement/pointerup_event", "pointerup")}}. Applications using {{domxref("Touch_events", "Touch events", "", 1)}} disable the browser handling of gestures by calling {{domxref("Event.preventDefault","preventDefault()")}}, but should also use <code>touch-action</code> to ensure the browser knows the intent of the application before any event listeners have been invoked.</p> <p>When a gesture is started, the browser intersects the <strong>touch-action</strong> values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, <strong>touch-action</strong> is typically applied only to individual elements which have some custom behavior, without needing to specify <strong>touch-action</strong> explicitly on any of that element's descendants. After a gesture has started, changes to <strong>touch-action</strong> values will not have any impact on the behavior of the current gesture.</p> diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html index aeadb96e60..77c045ef84 100644 --- a/files/ru/web/css/transform-function/rotate3d()/index.html +++ b/files/ru/web/css/transform-function/rotate3d()/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/transform-function/rotate3d() --- <div>{{CSSRef}}</div> -<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращая его в трехмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.</div> +<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.</div> <div> </div> diff --git a/files/ru/web/css/transform-function/scale3d()/index.html b/files/ru/web/css/transform-function/scale3d()/index.html index acfcf77edf..e66adb526b 100644 --- a/files/ru/web/css/transform-function/scale3d()/index.html +++ b/files/ru/web/css/transform-function/scale3d()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/transform-function/scale3d() --- <div>{{CSSRef}}</div> -<p><code>scale3d()</code> CSS функция изменяет размер элемента. Благодаря величине масштабирования определенной вектором, может изменять различные размеры в разных масштабах.</p> +<p><code>scale3d()</code> CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.</p> <p>Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.</p> diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html index 04ff2df26c..256d123b92 100644 --- a/files/ru/web/css/transform-function/skew()/index.html +++ b/files/ru/web/css/transform-function/skew()/index.html @@ -11,11 +11,11 @@ translation_of: Web/CSS/transform-function/skew() -<p>Данная трансформация является линейным преобразованием векторного пространства (трансвекция или <a href="https://en.wikipedia.org/wiki/Shear_mapping">shear mapping</a>), которое деформирует каждую точку элемента на определенный угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.</p> +<p>Данная трансформация является линейным преобразованием векторного пространства (трансвекция или <a href="https://en.wikipedia.org/wiki/Shear_mapping">shear mapping</a>), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.</p> <h2 id="Синтаксис">Синтаксис</h2> -<p>Функция <code>skew()</code> задается одним или двумя значениями которые отображают наклон в каждом из направлений.</p> +<p>Функция <code>skew()</code> задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.</p> <pre class="syntaxbox notranslate">skew(<em>ax</em>) @@ -60,7 +60,7 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML">HTML</h4> <pre class="brush: html notranslate"><div>Обычный</div> -<div class="skewed">Наклоненный</div></pre> +<div class="skewed">Наклонённый</div></pre> <h4 id="CSS">CSS</h4> @@ -85,7 +85,7 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML_2">HTML</h4> <pre class="brush: html notranslate"><div>Обычный</div> -<div class="skewed">Наклоненный</div></pre> +<div class="skewed">Наклонённый</div></pre> <h4 id="CSS_2">CSS</h4> diff --git a/files/ru/web/css/transform-style/index.html b/files/ru/web/css/transform-style/index.html index 68408dca2a..eb102bd45e 100644 --- a/files/ru/web/css/transform-style/index.html +++ b/files/ru/web/css/transform-style/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/transform-style <p>Свойство <code>transform-style</code> <a href="/en-US/docs/Web/CSS">CSS</a> определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент.</p> -<p>Если flat, то дочерний элемент не будет существовать в своем собственном 3D-пространстве.</p> +<p>Если flat, то дочерний элемент не будет существовать в своём собственном 3D-пространстве.</p> <p>Поскольку это свойство не наследуется, его следует устанавливать для всех не прямых потомков элемента.</p> diff --git a/files/ru/web/css/transform/index.html b/files/ru/web/css/transform/index.html index 54d70a010d..dc0f2707a6 100644 --- a/files/ru/web/css/transform/index.html +++ b/files/ru/web/css/transform/index.html @@ -4,7 +4,7 @@ slug: Web/CSS/transform tags: - CSS - transform - - Верстка + - Вёрстка - Свойство CSS - наклон - поворот @@ -103,9 +103,9 @@ transform: unset; <h2 id="Accessibility_concerns">Accessibility concerns</h2> -<p>Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определенных типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.</p> +<p>Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определённых типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.</p> -<p>Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте ее для написания {{cssxref("Media_Queries", "медиавыражения")}}, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.</p> +<p>Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте её для написания {{cssxref("Media_Queries", "медиавыражения")}}, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.</p> <p>Узнать больше:</p> diff --git a/files/ru/web/css/transition/index.html b/files/ru/web/css/transition/index.html index 69bada7245..3d1d7e6dd5 100644 --- a/files/ru/web/css/transition/index.html +++ b/files/ru/web/css/transition/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/transition --- <div>{{CSSRef}}</div> -<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <strong><code>transition</code></strong> - это {{ cssxref("Shorthand_properties", "сокращенное свойство") }} для {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, и {{ cssxref("transition-delay") }}.</p> +<p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <strong><code>transition</code></strong> - это {{ cssxref("Shorthand_properties", "сокращённое свойство") }} для {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, и {{ cssxref("transition-delay") }}.</p> <div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div> @@ -36,7 +36,7 @@ transition: margin-left 4s ease-in-out 1s; /* Применить к 2 свойствам */ transition: margin-left 4s, color 1s; -/* Применить ко всем измененным свойствам */ +/* Применить ко всем изменённым свойствам */ transition: all 0.5s ease-out; /* Глобальные значения */ diff --git a/files/ru/web/css/universal_selectors/index.html b/files/ru/web/css/universal_selectors/index.html index 9742586517..50de4b40f8 100644 --- a/files/ru/web/css/universal_selectors/index.html +++ b/files/ru/web/css/universal_selectors/index.html @@ -7,9 +7,9 @@ translation_of: Web/CSS/Universal_selectors <h2 id="Краткое_описание">Краткое описание</h2> -<p>Звездочка (*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звездочки с простых селекторов имеет тот же эффект. Например, <em>* .warning</em> и <em>.warning</em> считаются равными.</p> +<p>Звёздочка (*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звёздочки с простых селекторов имеет тот же эффект. Например, <em>* .warning</em> и <em>.warning</em> считаются равными.</p> -<p>В CSS 3, звездочка (<code>*</code>) может использоваться в комбинации с пространством имён</p> +<p>В CSS 3, звёздочка (<code>*</code>) может использоваться в комбинации с пространством имён</p> <ul> <li><code>ns|*</code> - вхождения всех элементов в пространстве имён ns</li> @@ -28,7 +28,7 @@ translation_of: Web/CSS/Universal_selectors <span lang="en-us">Зелёный span</span> в красном параграфе. </p> <p id="maincontent" lang="en-gb"> - <span class="warning">Красный span</span> в зеленом параграфе. + <span class="warning">Красный span</span> в зелёном параграфе. </p></pre> <p>{{ EmbedLiveSample('Example', 250, 100) }}</p> @@ -52,7 +52,7 @@ translation_of: Web/CSS/Universal_selectors <tr> <td>{{ SpecName('CSS3 Selectors', '#universal-selector', 'universal selector') }}</td> <td>{{ Spec2('CSS3 Selectors') }}</td> - <td>Определено поведение в отношении пространств имен и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементов</td> + <td>Определено поведение в отношении пространств имён и добавлена подсказка, что разрешено пренебрегать селектором для псевдо-элементов</td> </tr> <tr> <td>{{ SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector') }}</td> diff --git a/files/ru/web/css/used_value/index.html b/files/ru/web/css/used_value/index.html index 2467369481..4ae8b7251b 100644 --- a/files/ru/web/css/used_value/index.html +++ b/files/ru/web/css/used_value/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/used_value <div><strong>Используемое значение </strong>- <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS </a>свойство, которое используется, когда все вычисления уже выполнены, смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value">вычисленное значение</a>.</div> <article> -<p>После того как {{glossary("user agent")}} закончил свои расчеты каждое свойство CSS имеет своё значение. Используемые значения (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.</p> +<p>После того как {{glossary("user agent")}} закончил свои расчёты каждое свойство CSS имеет своё значение. Используемые значения (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.</p> <div class="blockIndicator note"> <p><strong>Замечание</strong>: {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает <a href="/ru/docs/">решённое значение</a>, которое может быть <a href="/ru/docs/">численным значением</a> или <a href="/ru/docs/">используемым значением</a>, в зависимости от свойства.</p> diff --git a/files/ru/web/css/user-select/index.html b/files/ru/web/css/user-select/index.html index 2b9b17f8ae..ed33dd0608 100644 --- a/files/ru/web/css/user-select/index.html +++ b/files/ru/web/css/user-select/index.html @@ -2,7 +2,7 @@ title: user-select slug: Web/CSS/user-select tags: - - Верстка + - Вёрстка - Свойство translation_of: Web/CSS/user-select --- @@ -62,7 +62,7 @@ user-select: unset; <dt><code>text</code></dt> <dd>Текст может быть выбран пользователем.</dd> <dt><code>all</code></dt> - <dd>В HTML-редакторе, если двойной клик или контекстный клик произошел во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.</dd> + <dd>В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.</dd> <dt><code>contain</code></dt> <dd>Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.</dd> <dt><code>element</code>{{non-standard_inline}} (IE-specific alias)</dt> diff --git a/files/ru/web/css/using_css_custom_properties/index.html b/files/ru/web/css/using_css_custom_properties/index.html index 65fd104311..064d0fda66 100644 --- a/files/ru/web/css/using_css_custom_properties/index.html +++ b/files/ru/web/css/using_css_custom_properties/index.html @@ -35,12 +35,12 @@ translation_of: Web/CSS/Using_CSS_custom_properties </pre> <div class="note"> -<p><strong>Note:</strong> В более ранней спецификации префикс для переменных был <code>var-</code> , но позже был изменен на <code>--</code>. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})</p> +<p><strong>Note:</strong> В более ранней спецификации префикс для переменных был <code>var-</code> , но позже был изменён на <code>--</code>. Firefox 31 и выше следуют новой спецификации.({{bug(985838)}})</p> </div> <h2 id="Первый_шаг_с_CSS_Переменными">Первый шаг с CSS Переменными</h2> -<p>Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:</p> +<p>Начнём с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:</p> <div id="sample1"> <pre class="brush:css; highlight:[3,20,26,32]">.one { diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html index 2ff298b02e..2a4ae09c70 100644 --- a/files/ru/web/css/vertical-align/index.html +++ b/files/ru/web/css/vertical-align/index.html @@ -89,7 +89,7 @@ p { <td style="vertical-align: middle">middle</td> <td style="vertical-align: bottom">bottom</td> <td> - <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо нее появится нечто еще более причудливое и необъяснимое.</p> + <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p> <p>Существует и другая теория, согласно которой это уже случилось.</p></pre> <pre class="hidden brush: css notranslate">table { @@ -119,7 +119,7 @@ td { <h2 id="Синтаксис">Синтаксис</h2> -<p>Свойство <code>vertical-align</code> задается одним из ключевых значений, указанных ниже.</p> +<p>Свойство <code>vertical-align</code> задаётся одним из ключевых значений, указанных ниже.</p> <h3 id="Значения_для_строчных_элементов">Значения для строчных элементов</h3> @@ -157,7 +157,7 @@ td { <dd>Выравнивает нижний край элемента и его потомков с нижним краем всей строки.</dd> </dl> -<p>Для элементов, у которых нет базовой линии, вместо нее используется нижняя граница внешнего отступа (margin).</p> +<p>Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).</p> <h3 id="Значения_для_ячеек_таблицы">Значения для ячеек таблицы</h3> diff --git a/files/ru/web/css/visibility/index.html b/files/ru/web/css/visibility/index.html index 3f3a053076..4d27fd4dc3 100644 --- a/files/ru/web/css/visibility/index.html +++ b/files/ru/web/css/visibility/index.html @@ -37,7 +37,7 @@ visibility: unset; <h3 id="Значения">Значения</h3> <ul> - <li>Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью <code>{{Cssxref("display")}}: none</code> примененного к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.</li> + <li>Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью <code>{{Cssxref("display")}}: none</code> применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.</li> <li>Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.</li> <li>Для других элементов <code>collapse</code> обрабатывается также, как <code>hidden</code></li> </ul> diff --git a/files/ru/web/css/visual_formatting_model/index.html b/files/ru/web/css/visual_formatting_model/index.html index 9faa4e62f5..6c756b85ba 100644 --- a/files/ru/web/css/visual_formatting_model/index.html +++ b/files/ru/web/css/visual_formatting_model/index.html @@ -18,7 +18,7 @@ original_slug: Web/Guide/CSS/Visual_formatting_model <li>другой внешней информацией.</li> </ul> -<p>Бокс отображается относительно краев <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоев, выходящих за пределы своих содержащих блоков, называется <em>переполнением</em> (<em>overflow).</em></p> +<p>Бокс отображается относительно краёв <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоёв, выходящих за пределы своих содержащих блоков, называется <em>переполнением</em> (<em>overflow).</em></p> <h2 id="Генерация_бокса">Генерация бокса</h2> diff --git a/files/ru/web/css/white-space/index.html b/files/ru/web/css/white-space/index.html index 7cd0e47ec5..a751f353b6 100644 --- a/files/ru/web/css/white-space/index.html +++ b/files/ru/web/css/white-space/index.html @@ -62,7 +62,7 @@ white-space: unset; </dd> </dl> -<p>В приведенной ниже таблице указано поведение различных значений свойства <code>white-space</code>:</p> +<p>В приведённой ниже таблице указано поведение различных значений свойства <code>white-space</code>:</p> <table class="standard-table"> <thead> diff --git a/files/ru/web/css/will-change/index.html b/files/ru/web/css/will-change/index.html index 916c5d4263..cb52d6e9b0 100644 --- a/files/ru/web/css/will-change/index.html +++ b/files/ru/web/css/will-change/index.html @@ -26,16 +26,16 @@ will-change: unset;</code></pre> <ul> <li> - <p id="Don't_apply_will-change_to_too_many_elements"><em>Не применяйте will-change к большому числу элементов.</em> Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжелые оптимизации ссылающиеся на <code>will-change</code> используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.</p> + <p id="Don't_apply_will-change_to_too_many_elements"><em>Не применяйте will-change к большому числу элементов.</em> Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжёлые оптимизации ссылающиеся на <code>will-change</code> используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.</p> </li> <li> <p><em>Используйте умеренно.</em> Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление <code>will-change</code> прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключать <code>will-change</code> используя скрипт до и после того как произошли изменения.</p> </li> <li> - <p><em>Не применяйте will-change к элементам для выполнения преждевременной оптимизации</em>. Если ваша страница хорошо отрабатывается, не применяйте <code>will-change</code> свойство к элементу только чтобы выжать немного больше скорости. <code>will-change</code> предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование <code>will-change</code> приведет к излишнему потреблению памяти и вызовет более тяжелый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведет к ухудшению производительности.</p> + <p><em>Не применяйте will-change к элементам для выполнения преждевременной оптимизации</em>. Если ваша страница хорошо отрабатывается, не применяйте <code>will-change</code> свойство к элементу только чтобы выжать немного больше скорости. <code>will-change</code> предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование <code>will-change</code> приведёт к излишнему потреблению памяти и вызовет более тяжёлый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведёт к ухудшению производительности.</p> </li> <li> - <p id="Give_it_sufficient_time_to_work"><em>Дайте ему достаточно времени, чтобы работать</em>. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.</p> + <p id="Give_it_sufficient_time_to_work"><em>Дайте ему достаточно времени, чтобы работать</em>. Это свойство даёт автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.</p> </li> </ul> @@ -58,7 +58,7 @@ will-change: unset;</code></pre> <dt><code>contents</code></dt> <dd>Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.</dd> <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> - <dd>Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись, тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, или <code>contents</code>. </dd> + <dd>Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращённая запись, тогда оно указывает на все полные записи свойств, на которые указывает сокращённая запись. Это не может быть одним из следующих значений: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, или <code>contents</code>. </dd> </dl> <h2 id="Примеры">Примеры</h2> diff --git a/files/ru/web/css/word-spacing/index.html b/files/ru/web/css/word-spacing/index.html index 0bd210c64b..495aa1889c 100644 --- a/files/ru/web/css/word-spacing/index.html +++ b/files/ru/web/css/word-spacing/index.html @@ -37,7 +37,7 @@ word-spacing: unset; <dl> <dt><code>normal</code></dt> - <dd>Нормальный интервал между словами, определенный текущим шрифтом и/или браузером.</dd> + <dd>Нормальный интервал между словами, определённый текущим шрифтом и/или браузером.</dd> <dt>{{cssxref("length")}}</dt> <dd>Определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.</dd> <dt>{{cssxref("percentage")}}</dt> @@ -71,7 +71,7 @@ word-spacing: unset; <p>Большое положительное или отрицательное значение <code>word-spacing</code> может сделать предложения, к которым применяется стиль, нечитаемыми. Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы.</p> -<p>Разборчивый <code>word-spacing</code> должен быть определен в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.</p> +<p>Разборчивый <code>word-spacing</code> должен быть определён в каждом конкретном случае, так как различные семейства шрифтов имеют различную ширину символов. Нет ни одного значения, которое может обеспечить для всех семейств шрифтов автоматическое сохранение разборчивости.</p> <ul> <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> @@ -92,7 +92,7 @@ word-spacing: unset; <tr> <td>{{SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing')}}</td> <td>{{Spec2('CSS3 Text')}}</td> - <td>Заменяет предыдущее значение значением <code><spacing-limit></code>, которое определяет те же вещи, плюс значение <code><percentage></code>. Позволяет использовать до трех значений, описывающих оптимальное, минимальное и максимальное значение.</td> + <td>Заменяет предыдущее значение значением <code><spacing-limit></code>, которое определяет те же вещи, плюс значение <code><percentage></code>. Позволяет использовать до трёх значений, описывающих оптимальное, минимальное и максимальное значение.</td> </tr> <tr> <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing')}}</td> |