[RU] Update paint-order page translation (#2633)

* Update paint-order page tranlsation

Обновил перевод страницы `paint-order` пытаясь поправить https://github.com/mdn/translated-content/issues/2594.

* Change example name

* Rename index.html to index.md

* Update index.md

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>

2 files changed, 105 insertions, 104 deletions

diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html
deleted file mode 100644
index 36f95f78c2..0000000000
--- a/files/ru/web/css/paint-order/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: paint-order
-slug: Web/CSS/paint-order
-tags:
-  - окраска
-  - отрисовка
-  - порядок окраски
-translation_of: Web/CSS/paint-order
----
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
-
-<p><a href="/en-US/docs/Web/CSS">CSS</a>-свойство <strong><code>paint-order</code></strong> позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.</p>
-
-<h2 id="Синтаксис">Синтаксис</h2>
-
-<pre class="brush: css no-line-numbers">/* Нормальный */
-paint-order: normal;
-
-/* Единичное значение */
-paint-order: stroke; /* отрисовывает сначала обводку, затем заливку и маркеры */
-paint-order: markers; /* отрисовывает сначала маркеры, затем заливку и обводку */
-
-/* Множественные значения */
-paint-order: stroke fill; /* отрисовывает сначала обводку, затем заливку, затем маркеры */
-paint-order: markers stroke fill; /* отрисовывает маркеры, затем обводку, затем заливку */
-</pre>
-
-<p>Если значение не указано, значением по умолчанию является следующий порядок  <code>fill</code>, <code>stroke</code>, <code>markers</code>.</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">&lt;marker&gt;</a></code>. Они не применяются к тексту HTML, в этом случае, вы можете определить только порядок <code>stroke</code> и <code>fill</code>.</p>
-</div>
-
-<h3 id="Значения">Значения</h3>
-
-<dl>
- <dt><code>normal</code></dt>
- <dd>Окрасит различные части в обычном порядке.</dd>
- <dt><code>stroke</code>,<br>
- <code>fill</code>,<br>
- <code>markers</code></dt>
- <dd>Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.</dd>
-</dl>
-
-<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
-
-{{CSSSyntax}}
-
-<h2 id="Примеры">Примеры</h2>
-
-<h3 id="SVG">SVG</h3>
-
-<pre class="brush: html">&lt;svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"&gt;
-  &lt;text x="10" y="75"&gt;stroke in front&lt;/text&gt;
-  &lt;text x="10" y="150" class="stroke-behind"&gt;stroke behind&lt;/text&gt;
-&lt;/svg&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">text {
-  font-family: sans-serif;
-  font-size: 50px;
-  font-weight: bold;
-  fill: black;
-  stroke: red;
-  stroke-width: 4px;
-}
-
-.stroke-behind {
-  paint-order: stroke fill;
-}</pre>
-
-<h3 id="Результат">Результат</h3>
-
-<p>{{EmbedLiveSample("Examples", "100%", 165)}}</p>
-
-<h2 id="Спецификации">Спецификации</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Спецификация</th>
-   <th scope="col">Статус</th>
-   <th scope="col">Комментарий</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("SVG2", "painting.html#PaintOrder", "paint-order")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Первое определение.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{CSSInfo}}</p>
-
-<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
-
-
-
-<p>{{Compat("css.properties.paint-order")}}</p>
diff --git a/files/ru/web/css/paint-order/index.md b/files/ru/web/css/paint-order/index.md
new file mode 100644
index 0000000000..c5bb122886
--- /dev/null
+++ b/files/ru/web/css/paint-order/index.md
@@ -0,0 +1,105 @@
+---
+title: paint-order
+slug: Web/CSS/paint-order
+tags:
+  - CSS
+  - Reference
+  - SVG
+  - Web
+  - recipe:css-property
+translation_of: Web/CSS/paint-order
+browser-compat: css.properties.paint-order
+---
+{{CSSRef}}
+
+[CSS-свойство](/ru/docs/Web/CSS) **`paint-order`** позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.
+
+## Синтаксис
+
+```css
+/* Нормальный */
+paint-order: normal;
+
+/* Единичное значение */
+paint-order: stroke; /* отрисовывает сначала обводку, затем заливку и маркеры */
+paint-order: markers; /* отрисовывает сначала маркеры, затем заливку и обводку */
+
+/* Множественные значения */
+paint-order: stroke fill; /* отрисовывает сначала обводку, затем заливку, затем маркеры */
+paint-order: markers stroke fill; /* отрисовывает маркеры, затем обводку, затем заливку */
+
+/* Глобальные значения */
+paint-order: inherit;
+paint-order: initial;
+paint-order: revert;
+paint-order: unset;
+```
+
+Если значение не указано, значением по умолчанию является следующий порядок `fill`, `stroke`, `markers`.
+
+Когда указано одно значение, то сначала отрисовывается оно, затем два других в обычном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределённое значение.
+
+> **Note:** в контексте этого свойства, маркеры отрисовываются только при рисовании форм SVG, включающих использование свойств `marker-*` (например [`marker-start`](/en-US/docs/Web/SVG/Attribute/marker-start)) и элемента [`<marker>`](/en-US/docs/Web/SVG/Element/marker). Они не применяются к тексту HTML, в этом случае вы можете определить только порядок `stroke` и `fill`.
+
+### Значения
+
+- `normal`
+  - : Окрасит различные части в обычном порядке.
+- `stroke`,
+  `fill`,
+  `markers`
+  - : Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.
+
+## Формальное определение
+
+{{cssinfo}}
+
+## Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Изменение порядка отрисовки обводки и заливки на противоположный 
+
+#### SVG
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <text x="10" y="75">stroke in front</text>
+  <text x="10" y="150" class="stroke-behind">stroke behind</text>
+</svg>
+```
+
+#### CSS
+
+```css
+text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample("Изменение_порядка_отрисовки_обводки_и_заливки_на_противоположный", "100%", 165)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [CSS Tricks: paint-order](https://css-tricks.com/almanac/properties/p/paint-order/)