diff options
Diffstat (limited to 'files/ru/web/css/orphans')
-rw-r--r-- | files/ru/web/css/orphans/index.html | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/files/ru/web/css/orphans/index.html b/files/ru/web/css/orphans/index.html new file mode 100644 index 0000000000..89b79dc9d2 --- /dev/null +++ b/files/ru/web/css/orphans/index.html @@ -0,0 +1,117 @@ +--- +title: orphans +slug: Web/CSS/orphans +tags: + - Верстка + - печать + - разрыв страницы + - фрагментация +translation_of: Web/CSS/orphans +--- +<div>{{CSSRef}}</div> + +<p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code>orphans</code> устанавливает <em>минимальное</em> число строк в блочном контейнере, которое должно быть показано <em>внизу</em> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media">страницы</a>, региона или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Columns">столбца</a>.</p> + +<pre class="brush:css no-line-numbers language-css"><code class="language-css"><span class="comment token">/* <integer> значения */</span> +<span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="punctuation token">;</span> +<span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> + +<span class="comment token">/* Глобальные значения */</span> +<span class="property token">orphans</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="property token">orphans</span><span class="punctuation token">:</span> initial<span class="punctuation token">;</span> +<span class="property token">orphans</span><span class="punctuation token">:</span> unset<span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p>В типографии, <em>orphan</em> это первая линия абзаца, которая отображается внизу страницы. (Абзац продолжается на следующей странице.)</p> +</div> + +<p>{{cssinfo}}</p> + +<p> </p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<h3 id="Values" name="Values">Значения</h3> + +<dl> + <dt>{{cssxref("<integer>")}}</dt> + <dd>Минимальное число строк, которое можно оставить внизу фрагмента перед разрывом фрагмента. Значение должно быть положительным.</dd> +</dl> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Пример">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>This is the first paragraph containing some text.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>This is the second paragraph containing some more text than the first one. It is used to demonstrate how widows work.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>This is the third paragraph. It has a little bit more text than the first one.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[5] line-numbers language-css"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#8cffa0</span><span class="punctuation token">;</span> + <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">150</span><span class="token unit">px</span><span class="punctuation token">;</span> + <span class="property token">columns</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> + <span class="property token">orphans</span><span class="punctuation token">:</span> <span class="number token">3</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">p</span> <span class="punctuation token">{</span> + <span class="property token">background-color</span><span class="punctuation token">:</span> <span class="hexcode token">#8ca0ff</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">p<span class="pseudo-class token">:first-child</span></span> <span class="punctuation token">{</span> + <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush: css; highlight[5] line-numbers language-css"> </pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Example", 380, 150)}}</p> + +<div> </div> + +<h2 id="Specifications" name="Specifications">Спецификации</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('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}</td> + <td>{{Spec2('CSS3 Fragmentation')}}</td> + <td>Расширяет <code>orphans</code> для применения в любых фрагментах, включая страницы, регионы и столбцы.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Первое определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div> + + +<p>{{Compat("css.properties.orphans")}}</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{cssxref("widows")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media">Paged media</a></li> +</ul> |