diff options
Diffstat (limited to 'files/ru/web/css')
| -rw-r--r-- | files/ru/web/css/@viewport/user-zoom/index.html | 106 | ||||
| -rw-r--r-- | files/ru/web/css/_colon_any/index.html | 190 | ||||
| -rw-r--r-- | files/ru/web/css/actual_value/index.html (renamed from files/ru/web/css/действительное_значение/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/comments/index.html (renamed from files/ru/web/css/тихий/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/common_css_questions/index.html | 182 | ||||
| -rw-r--r-- | files/ru/web/css/css_animations/using_css_animations/index.html (renamed from files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_background_and_borders/border-radius_generator/index.html (renamed from files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html (renamed from files/ru/web/css/css_box_model/box-shadow_generator/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_backgrounds_and_borders/index.html (renamed from files/ru/web/css/css_background_and_borders/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html (renamed from files/ru/web/css/css_background_and_borders/множественные_фоны/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html (renamed from files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html) | 5 | ||||
| -rw-r--r-- | files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html (renamed from files/ru/web/css/box_model/index.html) | 5 | ||||
| -rw-r--r-- | files/ru/web/css/css_color/index.html (renamed from files/ru/web/css/css_colors/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_columns/using_multi-column_layouts/index.html | 125 | ||||
| -rw-r--r-- | files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html (renamed from files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html (renamed from files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html) | 4 | ||||
| -rw-r--r-- | files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html | 379 | ||||
| -rw-r--r-- | files/ru/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html (renamed from files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html (renamed from files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html (renamed from files/ru/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html) | 7 | ||||
| -rw-r--r-- | files/ru/web/css/css_grid_layout/grid_template_areas/index.html (renamed from files/ru/web/css/css_grid_layout/грид-области/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html (renamed from files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html) | 5 | ||||
| -rw-r--r-- | files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html | 158 | ||||
| -rw-r--r-- | files/ru/web/css/css_positioning/understanding_z_index/index.html | 52 | ||||
| -rw-r--r-- | files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html | 141 | ||||
| -rw-r--r-- | files/ru/web/css/css_selectors/index.html (renamed from files/ru/web/css/css_селекторы/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html (renamed from files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html) | 7 | ||||
| -rw-r--r-- | files/ru/web/css/css_user_interface/index.html | 119 | ||||
| -rw-r--r-- | files/ru/web/css/filter-function/url/index.html | 35 | ||||
| -rw-r--r-- | files/ru/web/css/grid-gap/index.html | 194 | ||||
| -rw-r--r-- | files/ru/web/css/layout_mode/index.html (renamed from files/ru/web/css/способ_расположения/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/length/index.html (renamed from files/ru/web/css/размер/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/media_queries/testing_media_queries/index.html (renamed from files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/pseudo-classes/index.html (renamed from files/ru/web/css/псевдо-классы/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/replaced_element/index.html (renamed from files/ru/web/css/замещаемый_элемент/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/specified_value/index.html (renamed from files/ru/web/css/указанное_значение/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/syntax/index.html (renamed from files/ru/web/css/синтаксис/index.html) | 3 | ||||
| -rw-r--r-- | files/ru/web/css/url/index.html | 94 | ||||
| -rw-r--r-- | files/ru/web/css/visual_formatting_model/index.html | 210 |
39 files changed, 746 insertions, 1332 deletions
diff --git a/files/ru/web/css/@viewport/user-zoom/index.html b/files/ru/web/css/@viewport/user-zoom/index.html deleted file mode 100644 index 3cb5768532..0000000000 --- a/files/ru/web/css/@viewport/user-zoom/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: user-zoom -slug: Web/CSS/@viewport/user-zoom -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/user-zoom ---- -<div>{{ CSSRef }}</div> - -<h2 id="Summary" name="Summary">Введение</h2> - -<p>The <code>user-zoom</code> <a href="/en-US/docs/Web/CSS">CSS</a> descriptor controls whether or not the user should be able to change the zoom factor of a document defined by {{cssxref("@viewport")}}.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush:css">/* Keyword values */ -user-zoom: zoom; -user-zoom: fixed; -</pre> - -<h3 id="Значения">Значения</h3> - -<dl> - <dt><code>zoom</code></dt> - <dd>The user can zoom in or out.</dd> - <dt><code>fixed</code></dt> - <dd>The user cannot zoom in or out.</dd> -</dl> - -<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<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 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> diff --git a/files/ru/web/css/_colon_any/index.html b/files/ru/web/css/_colon_any/index.html deleted file mode 100644 index 6a9dab56ac..0000000000 --- a/files/ru/web/css/_colon_any/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: ':any' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Псевдоклассы - - Руководство - - Экспериментальное -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<h2 id="Summary" name="Summary">Описание</h2> - -<p><a href="/ru/docs/Web/CSS/Псевдо-классы" title="CSS/Pseudo-classes">Псевдокласс</a> <code>:any()</code> дает возможность быстрого конструирования наборов похожих селекторов путем составления групп, в которых каждый из входящих элементов будет комбинироваться с элементами из других групп. Это альтернатива для прописывания комбинаций селекторов для одного элемента, который может находится в разных родителях.</p> - -<div class="note"><strong>Замечание: </strong>Этот псевдо-класс все еще находится в процессе стандартизации в <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches" title="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS селекторах уровня 4</em></a> под именем <code>:matches()</code>. Вполне вероятно, что синтаксис и имя <code>:-<em>vendor</em>-any() </code>будут изменены в ближайшем будущем, чтобы соответствовать спецификации.</div> - -<h2 id="Syntax" name="Syntax">Синтаксис</h2> - -<pre class="syntaxbox">:-moz-any( <em>selector</em>[, <em>selector</em>]* ) :-webkit-any( selector[, selector]* )</pre> - -<h3 id="Values" name="Values">Параметры</h3> - -<dl> - <dt><code>selector</code></dt> - <dd>Селектор. Это может быть просто селектор или несколько селекторов, состоящих из <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors" title="http://www.w3.org/TR/css3-selectors/#simple-selectors">CSS 3 простых селекторов</a> и может включать комбинацию потомков.</dd> -</dl> - -<div class="note"><strong>Замечание:</strong> Селекторы <strong>не</strong> могут содержать псевдо-элементы, допускается только комбинирование потомков.</div> - -<h2 id="Examples" name="Examples">Примеры</h2> - -<p>Например, следующий CSS:</p> - -<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */ -ol ol ul, ol ul ul, ol menu ul, ol dir ul, -ol ol menu, ol ul menu, ol menu menu, ol dir menu, -ol ol dir, ol ul dir, ol menu dir, ol dir dir, -ul ol ul, ul ul ul, ul menu ul, ul dir ul, -ul ol menu, ul ul menu, ul menu menu, ul dir menu, -ul ol dir, ul ul dir, ul menu dir, ul dir dir, -menu ol ul, menu ul ul, menu menu ul, menu dir ul, -menu ol menu, menu ul menu, menu menu menu, menu dir menu, -menu ol dir, menu ul dir, menu menu dir, menu dir dir, -dir ol ul, dir ul ul, dir menu ul, dir dir ul, -dir ol menu, dir ul menu, dir menu menu, dir dir menu, -dir ol dir, dir ul dir, dir menu dir, dir dir dir { - list-style-type: square; -} -</pre> - -<p>Может быть записано, как:</p> - -<pre class="brush: css">/* на глубине 3 (или больше) неупорядоченные списки используют square */ -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, -:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { - list-style-type: square; -}</pre> - -<p>Однако, не нужно использовать это так: (Смотрите <a href="#Issues_with_performance_and_specificity">раздел о производительности</a> ниже.)</p> - -<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { - list-style-type: square; -}</pre> - -<h2 id="Notes" name="Notes">Примечания</h2> - -<p>Особенно полезен при работе с <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">разделами и заголовками</a> в HTML5 . Теги {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} могут быть вложенными, без <code>:any()</code> стилизация их соответствия друг другу может быть сложной.</p> - -<p>Например, без <code>:any()</code>, стилизация всех элементов {{HTMLElement("h1")}} на разной глубине будет очень сложна:</p> - -<pre class="brush: css">/* Уровень 0 */ -h1 { - font-size: 30px; -} -/* Уровень 1 */ -section h1, article h1, aside h1, nav h1 { - font-size: 25px; -} -/* Уровень 2 */ -section section h1, section article h1, section aside h1, section nav h1, -article section h1, article article h1, article aside h1, article nav h1, -aside section h1, aside article h1, aside aside h1, aside nav h1, -nav section h1, nav article h1, nav aside h1, nav nav h1, { - font-size: 20px; -} -/* Уровень 3 */ -/* ... даже не думайте о нём*/ -</pre> - -<p>При использовании <code>:-any()</code>, это становится намного проще:</p> - -<pre class="brush: css">/* Уровень 0 */ -h1 { - font-size: 30px; -} -/* Уровень 1 */ -:-moz-any(section, article, aside, nav) h1 { - font-size: 25px; -} -/* Уровень 2 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 20px; -} -/* Уровень 3 */ -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) -:-moz-any(section, article, aside, nav) h1 { - font-size: 15px; -}</pre> - -<h3 id="Issues_with_performance_and_specificity" name="Issues_with_performance_and_specificity">Проблемы с производительностью и особенности</h3> - -<p>{{ bug("561154") }} в Gecko, где специфика <code>:-moz-any()</code> не корректна. Текущая реализация (как в Firefox 12) ставит <code>:-moz-any()</code> в категорию универсальных правил, что означает, что использование его в качестве селектора справа будет медленнее, чем использование селекторов по ID, классу, или тегу.</p> - -<p>Например:</p> - -<pre class="brush: css">.a > :-moz-any(.b, .c) -</pre> - -<p>медленнее, чем:</p> - -<pre class="brush: css">.a > .b, .a > .c -</pre> - -<p>а следующее быстрее:</p> - -<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c -</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}</td> - <td>12.0 (534.30){{property_prefix("-webkit")}}</td> - <td> </td> - <td> </td> - <td> - <p>5<br> - {{property_prefix("-webkit")}}</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Возможность</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Базовая поддержка</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>5<br> - {{property_prefix("-webkit")}}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/ru/web/css/действительное_значение/index.html b/files/ru/web/css/actual_value/index.html index da6231da1f..10d233d98f 100644 --- a/files/ru/web/css/действительное_значение/index.html +++ b/files/ru/web/css/actual_value/index.html @@ -1,11 +1,12 @@ --- title: Действительное значение -slug: Web/CSS/Действительное_значение +slug: Web/CSS/actual_value tags: - CSS - Guide - Web translation_of: Web/CSS/actual_value +original_slug: Web/CSS/Действительное_значение --- <p>{{CSSRef}}</p> diff --git a/files/ru/web/css/тихий/index.html b/files/ru/web/css/comments/index.html index 1db7dd50b5..cdc6eff0c0 100644 --- a/files/ru/web/css/тихий/index.html +++ b/files/ru/web/css/comments/index.html @@ -1,6 +1,6 @@ --- title: Комментарии -slug: Web/CSS/Тихий +slug: Web/CSS/Comments tags: - Beginner - CSS @@ -9,6 +9,7 @@ tags: - Новичку - Руководство translation_of: Web/CSS/Comments +original_slug: Web/CSS/Тихий --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/common_css_questions/index.html b/files/ru/web/css/common_css_questions/index.html deleted file mode 100644 index cecfb92b82..0000000000 --- a/files/ru/web/css/common_css_questions/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Common CSS questions -slug: Web/CSS/Common_CSS_Questions -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly">Why doesn't my CSS, which is valid, render correctly?</h2> - -<p>Браузер использует декларацию <code>DOCTYPE</code> чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме, которую будут поддерживать старые браузеры. Правильное использование декларациии <code>DOCTYPE</code> в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.</p> - -<p>У современных браузеров есть два режима отображения веб-страниц:</p> - -<ul> - <li><em>Индивидуальный</em>: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы с неполной, некорректной или отстутвующей <code>DOCTYPE</code> декларацией или с тем видом <code>DOCTYPE</code>, который использовался до 2001 года, будет отображён в индивидуальном режиме.</li> - <li><em>Стандартный</em>: в этом режиме браузер старается строго следовать стандартам W3C. Ожидается, что современные HTML страницы разработаны для браузеров, следуемых стандартам, и в результате, страницы с современным <code>DOCTYPE</code> отображаются уже в стандартом режиме.</li> -</ul> - -<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_"Almost_Standards"_Mode" title="Gecko's_"Almost_Standards"_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p> - -<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p> - -<pre><!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5 - parser, this is the recommended doctype */ - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" -"http://www.w3.org/TR/html4/loose.dtd"> - -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" -"http://www.w3.org/TR/html4/strict.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -</pre> - -<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered">Why doesn't my CSS, which is valid, render at all?</h2> - -<p>To be applied, a CSS stylesheet must be served with a <code>text/css</code> MIME type. If the Web server doesn't serve it with this type, it won't be applied.</p> - -<h2 id="Difference_between_id_and_class" name="Difference_between_id_and_class">What is the difference between <code>id</code> and <code>class</code>?</h2> - -<p>HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.<br> - <br> - Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.<br> - <br> - Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.</p> - -<p>Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).</p> - -<p>See <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors"> CSS selectors</a></p> - -<h2 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value">How do I restore the default value of a property?</h2> - -<p>Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.</p> - -<p>This has changed with CSS 2; the keyword <a href="/es/CSS/initial" title="initial">initial</a> is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.</p> - -<h2 id="Derived_styles" name="Derived_styles">How do I derive one style from another?</h2> - -<p>CSS does not allow one style to be defined in terms of another. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). However, assigning multiple classes to a single element can provide the same effect.</p> - -<h2 id="Assigning_multiple_classes" name="Assigning_multiple_classes">How do I assign multiple classes to an element?</h2> - -<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p> - -<pre><style type="text/css"> -.news { background: black; color: white; } -.today { font-weight: bold; } -</style> - -<div class="news today"> -... content of today's news ... -</div> -</pre> - -<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p> - -<h2 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work">Why don't my style rules work properly?</h2> - -<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p> - -<h3 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy">HTML elements hierarchy</h3> - -<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p> - -<pre>.news { color: black; } -.corpName { font-weight: bold; color: red; } - -<!-- news item text is black, but corporate name is red and in bold --> -<div class="news"> - (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday... -</div> -</pre> - -<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p> - -<h3 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule">Explicitly re-defined style rule</h3> - -<p>In CSS stylesheets, order <strong>is</strong> important. If you define a rule and then you re-define the same rule, the last definition is used.</p> - -<pre>#stockTicker { font-weight: bold; } -.stockSymbol { color: red; } -/* other rules */ -/* other rules */ -/* other rules */ -.stockSymbol { font-weight: normal; } - -<!-- most text is in bold, except "GE", which is red and not bold --> -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.</p> - -<h3 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property">Use of a shorthand property</h3> - -<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.</p> - -<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; } -.stockSymbol { font: 14px Arial; color: red; } - -<div id="stockTicker"> - NYS: <span class="stockSymbol">GE</span> +1.0 ... -</div> -</pre> - -<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p> - -<pre>#stockTicker { - font-weight: bold; - font: 12px Verdana; /* font-weight is now normal */ -} -</pre> - -<h3 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector">Use of the <code>*</code> selector</h3> - -<p>The <code>*</code> wildcard selector refers to any element, and it has to be used with particular care.</p> - -<pre>body * { font-weight: normal; } -#stockTicker { font: 12px Verdana; } -.corpName { font-weight: bold; } -.stockUp { color: red; } - -<div id="section"> - NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ... -</div> -</pre> - -<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p> - -<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p> - -<h3 id="Specificity_in_CSS" name="Specificity_in_CSS">Specificity in CSS</h3> - -<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p> - -<pre>div { color: black; } -#orange { color: orange; } -.green { color: green; } - -<div id="orange" class="green" style="color: red;">This is red</div> -</pre> - -<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p> - -<h2 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F">What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?</h2> - -<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p> - -<p>The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.</p> - -<p>Please see the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p> - -<h2 id="How_does_z-index_relate_to_positioning">How does z-index relate to positioning?</h2> - -<p>The z-index property specifies the stack order of elements.</p> - -<p>An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.</p> - -<p>Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p> diff --git a/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html index 05f6cb5cec..36aa62c5ac 100644 --- a/files/ru/web/css/css_animations/ispolzovanie_css_animatciy/index.html +++ b/files/ru/web/css/css_animations/using_css_animations/index.html @@ -1,6 +1,6 @@ --- title: Использование CSS-анимации -slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy +slug: Web/CSS/CSS_Animations/Using_CSS_animations tags: - Advanced - CSS @@ -9,6 +9,7 @@ tags: - Experimental - Guide translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy --- <p>{{SeeCompatTable}}{{CSSRef}}</p> diff --git a/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html index 71f94831f0..0dbb391c06 100644 --- a/files/ru/web/css/css_background_and_borders/border-radius_генератор/index.html +++ b/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html @@ -1,7 +1,8 @@ --- title: Border-radius генератор -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генератор +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генератор --- <p>С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.</p> diff --git a/files/ru/web/css/css_box_model/box-shadow_generator/index.html b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html index 3f46cf53ba..a26dbc165d 100644 --- a/files/ru/web/css/css_box_model/box-shadow_generator/index.html +++ b/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -1,11 +1,12 @@ --- title: Генератор теней -slug: Web/CSS/CSS_Box_Model/Box-shadow_generator +slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator tags: - CSS3 - Тень - инструменты translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator --- <p>Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.</p> diff --git a/files/ru/web/css/css_background_and_borders/index.html b/files/ru/web/css/css_backgrounds_and_borders/index.html index 59c2117194..3c843d9d45 100644 --- a/files/ru/web/css/css_background_and_borders/index.html +++ b/files/ru/web/css/css_backgrounds_and_borders/index.html @@ -1,6 +1,6 @@ --- title: CSS Background and Borders -slug: Web/CSS/CSS_Background_and_Borders +slug: Web/CSS/CSS_Backgrounds_and_Borders tags: - CSS - CSS Backgrounds and Borders @@ -10,6 +10,7 @@ tags: - TopicStub translation_of: Web/CSS/CSS_Backgrounds_and_Borders translation_of_original: Web/CSS/CSS_Background_and_Borders +original_slug: Web/CSS/CSS_Background_and_Borders --- <p>{{CSSRef}}</p> diff --git a/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index 231c794702..dc2ba0d32f 100644 --- a/files/ru/web/css/css_background_and_borders/множественные_фоны/index.html +++ b/files/ru/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -1,8 +1,9 @@ --- title: Множественные фоны -slug: Web/CSS/CSS_Background_and_Borders/Множественные_фоны +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +original_slug: Web/CSS/CSS_Background_and_Borders/Множественные_фоны --- <p>{{CSSRef}}</p> diff --git a/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index c629b7bffd..9b133d5a73 100644 --- a/files/ru/web/css/css_basic_user_interface/использование_url_значений_для_свойства_cursor/index.html +++ b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -1,13 +1,14 @@ --- title: Использование URL значений для свойства cursor -slug: >- - Web/CSS/CSS_Basic_User_Interface/Использование_URL_значений_для_свойства_cursor +slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - Gecko - Справка - справочник translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +original_slug: >- + Web/CSS/CSS_Basic_User_Interface/Использование_URL_значений_для_свойства_cursor --- <div>{{cssref}}</div> diff --git a/files/ru/web/css/box_model/index.html b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html index 6868871c5a..1ad4642062 100644 --- a/files/ru/web/css/box_model/index.html +++ b/files/ru/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -1,11 +1,12 @@ --- -title: 'Блоковая модель (боксовая модель, box model)' -slug: Web/CSS/box_model +title: Блоковая модель (боксовая модель, box model) +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model tags: - CSS - Guide - Веб translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +original_slug: Web/CSS/box_model --- <h2 id="Описание">Описание</h2> diff --git a/files/ru/web/css/css_colors/index.html b/files/ru/web/css/css_color/index.html index c6225aec39..18417802f5 100644 --- a/files/ru/web/css/css_colors/index.html +++ b/files/ru/web/css/css_color/index.html @@ -1,12 +1,13 @@ --- title: CSS Colors -slug: Web/CSS/CSS_Colors +slug: Web/CSS/CSS_Color tags: - CSS - Цвета - Цвета в CSS translation_of: Web/CSS/CSS_Color translation_of_original: Web/CSS/CSS_Colors +original_slug: Web/CSS/CSS_Colors --- <div>{{CSSRef}}</div> 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 new file mode 100644 index 0000000000..f9fb1c78d5 --- /dev/null +++ b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,125 @@ +--- +title: Использование CSS разметки для многих колонок +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +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>К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS свойств, чтобы расширить традиционный блочный способ разметки.</p> + +<h2 id="Использование_колонок">Использование колонок</h2> + +<h3 id="Количество_колонок_и_ширина">Количество колонок и ширина</h3> + +<p>Два свойства CSS контролируют появятся ли колонки и как много их будет: {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}.</p> + +<p><code>Свойство column-count</code> устанавливает количество колонок определённым числом. Пример,</p> + +<pre class="brush: html"><div style="column-count:2;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p>отобразит содержимое в двух колонках (если вы используете многоколоночно совместимый браузер):</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<p><code>Свойство column-width</code> устанавливает минимальную желаемую ширину колонки. Если <code>column-count</code> также не установлено, тогда браузер автоматически сделает столько колонок, сколько нужно, чтобы заполнить доступную ширину.</p> + +<pre class="brush: html"><div style="column-width:20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p>становится:</p> + +<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<p>Подробные детали описаны в <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 спецификации</a>.</p> + +<p>В многоколончатом блоке, содержимое автоматически перетекает из одной колонки в следующую, как это необходимо. Вся HTML, CSS и DOM функциональность поддерживается внутри колонок, как например редактирование и печать.</p> + +<h3 id="Краткая_запись_columns"><code>К</code>раткая запись columns</h3> + +<p>В большинстве случаев веб-разработчики используют одно из двух свойств CSS: {{ cssxref("column-count") }} или {{ cssxref("column-width") }}. Так как значения для этих свойств не пересекаются, то часто удобно использовать короткую запись {{ cssxref("columns") }}. Пример:</p> + +<p>CSS объявление <code>column-width:12em</code> может быть заменено:</p> + +<pre class="brush: html"><div style="columns:12em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p style="-moz-column-width: 12em; -moz-columns: 12em; -webkit-columns: 12em; columns: 12em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<p>CSS объявление <code>column-count:4</code> может быть заменено:</p> + +<pre class="brush: html"><div style="columns:4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p style="-moz-columns: 4; -webkit-columns: 4; columns: 4;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<p>Два CSS объявления <code>column-width:8em</code> и <code>column-count:12</code> могут быть заменены:</p> + +<pre class="brush: html"><div style="columns:12 8em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p style="-moz-columns: 12 8em; -webkit-columns: 12 8em; columns: 12 8em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<h3 id="Выравнивание_высоты">Выравнивание высоты</h3> + +<p>CSS3-спецификация колонок требует, чтобы высота колонки была выровнена, т.е. браузер автоматически устанавливает максимальную высоту колонки, для того, чтобы высота содержимого в каждой из них была приблизительно одинаковая. Firefox так и делает.</p> + +<p>Однако, в некоторых ситуациях полезно установить максимальную высоту колонок явно, тогда расположение содержимого, начиная с первой колонки и последующих созданных, как необходимо, возможно, перекроют правую границу. Поэтому, если высота ограничена, с помощью CSS {{ cssxref("height") }} или {{ cssxref("max-height") }} свойств на многоколончатом блоке, каждой колонке разрешено расти до этой высоты, но не более, пока не добавится новая колонка. Этот режим также более эффективен для разметки.</p> + +<h3 id="Промежутки_между_колонками">Промежутки между колонками</h3> + +<p>Существует промежуток между колонками. По умолчанию рекомендовано значение <code>1em</code>. Это значение можно изменить, применяя свойство {{ Cssxref("column-gap") }} на многоколончатом блоке:</p> + +<pre class="brush: html"><div style="column-width:20em; column-gap:2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, +sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, +quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. +Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat +nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa +qui officia deserunt mollit anim id est laborum</div> +</pre> + +<p style="-moz-column-width: 20em; -webkit-column-width: 20em; column-width: 20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> + +<h2 id="Постепенное_ухудшение">Постепенное ухудшение</h2> + +<p>Свойства колонки будут просто проигнорированы браузерами, которые не поддерживают многоколончатый режим. Поэтому соответственно легче создать разметку, которая отобразит содержимое в одной колонке и будет использовать несколько колонок в тех браузерах, которые поддерживают многоколончатый режим.</p> + +<p>Обратите внимание, что не все браузеры поддерживают эти свойства без префикса. Чтобы использовать эти свойства в большинстве современных браузеров, каждое свойство должно быть написано трижды: одно с префиксом {{ property_prefix("-moz") }} , одно с префиксом {{ property_prefix("-webkit") }} и третье без префикса.</p> + +<h2 id="Заключение">Заключение</h2> + +<p>CSS3 колонки - примитивная разметка, которая поможет Веб-разработчикам лучше воспользоваться реальным участком экрана. Разработчики с воображением могут найти много способов для их использования, особенно с автоматическим выравниванием высоты.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li> +</ul> diff --git a/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index 9fe0b2932f..e28dc11693 100644 --- a/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html +++ b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -1,7 +1,8 @@ --- title: Выравнивание элементов во Flex контейнере -slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере --- <p>{{CSSRef}}</p> diff --git a/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html b/files/ru/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html index 97e521c2e1..7f0dc50bf1 100644 --- a/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html +++ b/files/ru/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -1,9 +1,11 @@ --- title: Управление соотношением элементов вдоль главной оси slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax translation_of: >- Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +original_slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html deleted file mode 100644 index 3f0b229d20..0000000000 --- a/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ /dev/null @@ -1,379 +0,0 @@ ---- -title: Используем CSS Flexible Boxes -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -<div>Эта статья устарела и удалена из английской версии. Вместо неё идёт перенаправление на статью: -<h1 id="Основные_понятия_Flexbox"><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Основные понятия Flexbox</a></h1> - - - -<p>У меня не поднялась рука удалить эту статью окончательно, но я рекомендую Вам вместо неё, всё-таки, прочитать ту.</p> -</div> - -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">CSS3 <strong>Flexible Box</strong>, или просто <strong>flexbox</strong> — это режим разметки, созданный для упорядочения элементов на странице таким образом, чтобы они вели себя предсказуемо в случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.</span> Во многих случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats) и не выполняет схлопывание отступлений flex-контейнера и его содержимого (margin collapse).</p> - -<p>Для многих дизайнеров модель использования флексбоксов будет более простой для применения. Дочерние элементы внутри флексбокса могут размещаться в любом направлении и могут менять размер, чтобы адаптироваться к различным размерам дисплея. Позиционирование элементов в таком случае является простым и комплексная разметка достигается значительно легче и с более чистым кодом, поскольку порядок отображения элементов не связан с их порядком в коде. Эта независимость умышленно касается только визуального рендеринга, оставляя порядок интерпретации и навигацию зависимыми от порядка в исходниках.</p> - -<div class="note"><strong>Внимание:</strong> некоторые браузеры все еще могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Совместимость_с_браузерами">таблицей совместимости</a>.</div> - -<h2 id="Концепция_Flexbox">Концепция Flexbox</h2> - -<p>Главной концепцией Flexbox есть возможность изменения высоты и/или ширины его элементов, чтобы лучше заполнять пространство любого дисплея. Flex-контейнер увеличивает элементы, чтобы заполнить доступное пространство или уменьшает чтобы предотвратить перекрытие.</p> - -<p>Алгоритм разметки флексбоксами агностичено направлен в противовес блочной разметке, которая ориентирована строго вертикально, или горизонтально-ориентированной инлайн-разметке. Несмотря на то что разметка блоками хорошо подходит для страницы, ей не хватает объективного механизма для поддержки компонентов, которые должны менять ориентацию, размеры а также растягиваться или сжиматься при изменениях размера экрана, изменении ориентации с вертикальной на горизонтальную и так далее. Разметка флексбоксами наиболее желательна для компонентов приложения и шаблонов, которые мало масштабируются, тогда как grid-разметка создана для больших шаблонов. Обе технологии являются частью разработки CSS Working Group которая должна способствовать совместимости web-приложений с различными браузерами, режимами а также большей гибкости.</p> - -<h2 id="Терминология">Терминология</h2> - -<p>Поскольку описание флексбоксов не включает таких словосочетаний, как горизонтальная / inline и вертикальная / block оси, объяснение модели предусматривает новую терминологию. Используйте следующую диаграмму при просмотре словаря терминов. Она изображает flex-контейнер, имеющий flex-направление ряда, что означает, что каждый flex item расположен горизонтально, друг за другом по главной оси (main axis) в соответствии с установленным направлением написания текста элемента. Слева направо в данном случае.</p> - -<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> - -<dl> - <dt>Flex-контейнер</dt> - <dd>Родительский элемент, в котором содержатся flex-элементы. Flex-контейнер определяется установкой свойства {{Cssxref("display")}} в <code>flex</code> или <code>inline-flex</code>.</dd> - <dt>Flex-элемент, flex item</dt> - <dd> - <p>Каждый дочерний элемент flex-контейнера становится flex-элементом. Текст, который напрямую содержится в flex-контейнере, оборачивается анонимным flex-элементом.</p> - </dd> - <dt>Оси</dt> - <dd> - <p>Каждый flexible-бокс шаблон строится по двум осям. Главная ось <strong>(main axis)</strong> — это ось, вдоль которой flex-элементы следуют один за другим, а перекрёстная ось <strong>(cross axis)</strong> перпендикулярна ей.</p> - - <ul> - <li>Свойство <code>{{Cssxref("flex-direction")}}</code> устанавливает главную ось.</li> - <li>Свойство <code>{{Cssxref("justify-content")}}</code> определяет расположение элементов вдоль главной оси в текущем ряду.</li> - <li>Свойство <a href="/ru/docs/Web/CSS/align-items"><code>align-items</code></a> расположение элементов вдоль перекрёстной оси в текущем ряду.</li> - <li>Свойство <a href="/ru/docs/Web/CSS/align-self"><code>align-self</code></a> устанавливает, как отдельный flex-элемент выровнен по перекрёстной оси, переопределяя значения, установленные с помощью <code>align-items.</code></li> - </ul> - </dd> - <dt>Направления</dt> - <dd> - <p>Главное начало и конец (<strong>main</strong>) и перекрёстное начало и конец (<strong>cross start</strong>/<strong>end</strong>) — это стороны контейнера, определяющие начало и окончание потока flex-элемментов. Они следуют по главной и перекрестной осями flex-контейнера в векторе, установленном режимом написания ({{Cssxref("writing-mode")}}) (слева направо, справа налево и т. д.).</p> - - <ul> - <li>Свойство {{Cssxref("order")}} присваивает элементы порядковым группам и определяет, в каком порядке их показывать.</li> - <li>Свойство {{Cssxref("flex-flow")}} — это короткая форма, состоящая из свойств {{Cssxref("flex-direction")}} и {{Cssxref("flex-wrap")}}, определяющих расплолжение элементов.</li> - </ul> - </dd> - <dt>Линии</dt> - <dd> - <p>Flex-элементы могут размещаться на одной или нескольких линиях в зависимости от значения свойства {{Cssxref("flex-wrap")}}, которое контролирует направление перекрестных линий и направление в котором складываются новые линии.</p> - </dd> - <dt>Размеры</dt> - <dd> - <p>Флекс элементы агностически эквивалентны высоте и ширине <strong>главного размера</strong> и <strong>поперечного размера,</strong> которые равны, соответственно, главной оси (main axis) и поперечной оси (cross axis) флекс-контейнера.</p> - - <ul> - <li>Свойства <code><a href="/ru/docs/Web/CSS/min-height">min-height</a></code> и <code><a href="/ru/docs/Web/CSS/min-width">min-width</a></code> принимают значение по-умолчанию 0.</li> - <li>Свойство <a href="/ru/docs/Web/CSS/flex"><code>flex</code></a> - это сокращённая запись свойств <a href="/ru/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <code><a href="/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и</code> <code><a href="/ru/docs/Web/CSS/flex-basis">flex-basis</a>.</code></li> - </ul> - </dd> -</dl> - -<h2 id="Делаем_элемент_флексбоксом">Делаем элемент флексбоксом</h2> - -<p>Чтобы сделать элемент flexible-боксом, укажите значение {{cssxref("display")}} следующим образом:</p> - -<pre class="brush: css">display: flex</pre> - -<p>или</p> - -<pre class="brush: css">display: inline-flex</pre> - -<p>Таким образом мы определяем элемент как флексбокс, а его дочерниие элементы — как flex-элементы. Значение <code>flex</code> делает контейнер блочным элементом, а <code>inline-flex</code> значение превращает его в инлайн-элемент.</p> - -<div class="note"><span class="notranslate"><strong>Внимание</strong></span><strong>:</strong> для <span class="notranslate">указания префикса вендора, добавьте строку в значение атрибута, а не к самому атрибуту</span>. <span class="notranslate">Например</span>, <code>display: -webkit-flex</code>.</div> - -<h2 id="Рассмотрим_flex-элементы">Рассмотрим flex-элементы</h2> - -<p>Текст, который содержится непосредственно внутри flex-контейнера, автоматически оборачивается анонимным flex-элементом. Однако, анонимный flex-элемент, содержащий только пробелы, не отображается (как будто было указано значение <code>display: none</code>).</p> - -<p>Абсолютно позиционированные дочерние элементы flex-контейнера позиционируются так, что их статическое положение определяется относительно главного начального угла содержащего их flex-контейнера.</p> - -<p>Отступы (margin) соседних flex-контейнеров не схлопываются. Установка значений <code>margin: auto </code>поглощает дополнительное место в вертикальном или горизонтальном направлении и может быть использовано для выравнивания или для разделения соседних flex-элементов. См. <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Выравнивание при помощи 'автоматических' отступов </a>в разделе "Модель расположения при помощи flex-контейнеров" спецификации W3C.</p> - -<p>Свойства выравнивания flexbox выполняют "истинное" центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены "безопасной" опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают "безопасно" и центрирование будет прекращено при переполнении. Вместо использования свойства <code>align- </code>просто установите автоматические отступы (<code>margin: auto)</code> для flex-элементов, которые вы хотите отцентрировать. Вместо свойств <code>justify-</code> установите <code>margin: auto</code> на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут "подстраиваться" и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить <code>justify-content </code>центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надежно использовать центрирование, основанное на отступах, на основной оси для замены свойства <code>justify-content</code>.</p> - -<p>Помните, что, несмотря на то, что порядок отображения элементов не зависит от их положения в исходном коде, эта независимость затрагивает только визуальное отображение, оставляя навигацию и голосовую помощь в исходном порядке. Даже свойство {{cssxref("order")}} не влияет на очередность голосовой помощи и навигации. Таким образом, разработчики должны уделять внимание правильному порядку элементов в исходном коде, чтобы не навредить доступности документа.</p> - -<h2 id="Свойства_Flexbox">Свойства Flexbox</h2> - -<h3 id="Свойства_не_влияющие_на_Flexbox">Свойства, не влияющие на Flexbox</h3> - -<p>Так как flexbox используют другой алгоритм расположения, некоторые свойства не имеют смысла для flex-контейнера:</p> - -<ul> - <li>свойства <code>column-*</code> <a href="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts">модуля с множественными столбцами</a> не влияет на flex-элементы.</li> - <li>{{cssxref("clear")}} не действует на flex-элементах.</li> - <li>{{cssxref("float")}} заставляет свойство элемента <code>display</code> считаться как <code>block</code>.</li> - <li>{{cssxref("vertical-align")}} не оказывает эффекта на выравнивание flex-элементов.</li> -</ul> - -<h2 id="Пример">Пример</h2> - -<h3 id="Типичный_пример_flex">Типичный пример flex</h3> - -<p>Типичный пример показывает как применять "flex-эффект" к элементам и как соседние элементы ведут себя в состоянии flex.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> - <head> - <style> - .flex { - /* basic styling */ - width: 350px; - height: 200px; - border: 1px solid #555; - font: 14px Arial; - - /* flexbox setup */ - display: flex; - flex-direction: row; - } - - .flex > div { - flex: 1 1 auto; - width: 30px; /* To make the transition work nicely. (Transitions to/from - "width:auto" are buggy in Gecko and Webkit, at least. - See http://bugzil.la/731886 for more info.) */ - transition: width 0.7s ease-out; - } - - /* colors */ - .flex > div:nth-child(1){ background: #009246; } - .flex > div:nth-child(2){ background: #F1F2F1; } - .flex > div:nth-child(3){ background: #CE2B37; } - - .flex > div:hover { - width: 200px; - } - - </style> - </head> - <body> - <p>Flexbox nuovo</p> - <div class="flex"> - <div>uno</div> - <div>due</div> - <div>tre</div> - </div> - </body> -</html></pre> - -<h3 id="Пример_расположения_Священный_Грааль">Пример расположения "Священный Грааль"</h3> - -<p>Данный пример показывает как flexbox предоставляет возможность динамически изменять расположение для различных разрешений экрана. Следующая схема иллюстрирует преобразование.</p> - -<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> - -<p>Здесь изображен случай, когда расположение, подходящее для окна браузера должно быть оптимизировано для экрана смартфона. Не только элементы должны уменьшиться в размере, но и порядок, в котором они отображаются, должен измениться. Flexbox сильно упрощает это.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html lang="en"> - <head> - <style> - body { - font: 24px Helvetica; - background: #999999; - } - - #main { - min-height: 800px; - margin: 0px; - padding: 0px; - display: flex; - flex-flow: row; - } - - #main > article { - margin: 4px; - padding: 5px; - border: 1px solid #cccc33; - border-radius: 7pt; - background: #dddd88; - flex: 3 1 60%; - order: 2; - } - - #main > nav { - margin: 4px; - padding: 5px; - border: 1px solid #8888bb; - border-radius: 7pt; - background: #ccccff; - flex: 1 6 20%; - order: 1; - } - - #main > aside { - margin: 4px; - padding: 5px; - border: 1px solid #8888bb; - border-radius: 7pt; - background: #ccccff; - flex: 1 6 20%; - order: 3; - } - - header, footer { - display: block; - margin: 4px; - padding: 5px; - min-height: 100px; - border: 1px solid #eebb55; - border-radius: 7pt; - background: #ffeebb; - } - - /* Too narrow to support three columns */ - @media all and (max-width: 640px) { - #main, #page { - flex-direction: column; - } - - #main > article, #main > nav, #main > aside { - /* Return them to document order */ - order: 0; - } - - #main > nav, #main > aside, header, footer { - min-height: 50px; - max-height: 50px; - } - } - </style> - </head> - <body> - <header>header</header> - <div id='main'> - <article>article</article> - <nav>nav</nav> - <aside>aside</aside> - </div> - <footer>footer</footer> - </body> -</html></pre> - -<h2 id="Песочница">Песочница</h2> - -<p>Существует несколько песочниц с flexbox, доступных онлайн для экспериментов:</p> - -<ul> - <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> - <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> - <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li> - <li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></li> -</ul> - -<h2 id="О_чем_нужно_помнить">О чем нужно помнить</h2> - -<p>Алгоритм, описывающий как flex-элементы располагаются, иногда может быть довольно запутанным. Вот несколько правильных решений, которые позволят избежать неприятных сюрпризов при верстке с использованием flexbox.</p> - -<p>Flexbox располагаются в соответствие с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode">направлением письма</a>, что означает, что <strong>главное начало</strong> и <strong>главный конец </strong>располагаются в зависимости от положения <strong>начала </strong>и <strong>конца </strong>(строки - <em>прим.</em>).</p> - -<p><strong>Перекрестное начало</strong> и <strong>перекрестный конец </strong>полагаются на определение позиции <strong>начала </strong>и <strong>конца, </strong>которое зависит от значения свойства <code>{{cssxref("direction")}}</code>.</p> - -<p>Разрывы страницы допустимы в расположении flex-контейнеров, когда это позволяет свойство <code>break-. Свойства </code>CSS3 <code>break-after</code>, <code>break-before</code> и <code>break-inside</code>, а также свойства CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> и <code>page-break-inside</code> работают на flex-контейнере, flex-элементах, а также внутри flex-элементов.</p> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (single-line flexbox)</td> - <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoDesktop("22.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>Multi-line flexbox</td> - <td>{{CompatGeckoDesktop("28.0")}}</td> - <td>21.0{{property_prefix("-webkit")}}<br> - 29.0</td> - <td>11<sup>[3]</sup></td> - <td>12.10<sup>[5]</sup><br> - 15 {{property_prefix("-webkit")}}</td> - <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (single-line flexbox)</td> - <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br> - {{CompatGeckoMobile("22.0")}}</td> - <td> - <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br> - 1.1</p> - </td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - <tr> - <td>Multi-line flexbox</td> - <td>{{CompatGeckoMobile("28.0")}}</td> - <td>1.3</td> - <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br> - 4.4</td> - <td>11</td> - <td>12.10<sup>[5]</sup><br> - 15{{property_prefix("-webkit")}}</td> - <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлен для поддержки финальной версии.</p> - -<p>[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр <code>about:config</code> <code>layout.css.flexbox.enabled</code> в значение <code>true</code>. Начиная с Firefox 22 по Firefox 27, параметр установлен в <code>true</code> по умолчанию, и полностью исключен в Firefox 28.</p> - -<p>[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 <a href="https://msdn.microsoft.com/ru-ru/library/dn265027(v=vs.85).aspx">был обновлен</a> для поддержки финальной версии.</p> - -<p>[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлен для поддержки финальной версии.</p> - -<p>[5] Хотя изначальная реализация в Opera 12.10 <code>flexbox</code> была без приставки, она получила приставку {{property_prefix("-webkit")}} в версиях с 15 по 16 Opera и с 15 по 19 Opera Mobile. Приставка была снова убрана в Opera 17 и Opera Mobile 24.</p> - -<p>[6] До Firefox 29, <code>установка visibility: collapse</code> для flex-элемента заставляет его обрабатываться как <code>display: none</code> вместо предполагаемого поведения, обрабатывающего его как <code>visibility: hidden</code>. Предложенное решение - использовать <code>visibility:hidden</code> для flex-элементов, которые должны вести себя как при установленном <code>visibility:collapse</code>. Для большей информации, см {{bug(783470)}}.</p> - -<h2 id="См._также">См. также</h2> - -<ul> - <li><a href="https://github.com/philipwalton/flexbugs">Проект Flexbugs </a>для информации о багах в браузерных реализациях flexbox.</li> -</ul> diff --git a/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html b/files/ru/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html index 86879d343e..48b0353176 100644 --- a/files/ru/web/css/css_flow_layout/блочное_и_строчное_размещение_в_нормальном_потоке/index.html +++ b/files/ru/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -1,6 +1,6 @@ --- title: Блочное и строчное расположение в нормальном потоке -slug: Web/CSS/CSS_Flow_Layout/Блочное_и_строчное_размещение_в_нормальном_потоке +slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow tags: - CSS - Макет @@ -10,6 +10,7 @@ tags: - Средний уровень - поток translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +original_slug: Web/CSS/CSS_Flow_Layout/Блочное_и_строчное_размещение_в_нормальном_потоке --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html index c027e8eb3b..aed2f568ec 100644 --- a/files/ru/web/css/css_flow_layout/введение_в_контексты_форматирования/index.html +++ b/files/ru/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -1,7 +1,8 @@ --- title: Введение в контексты форматирования -slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_форматирования +slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +original_slug: Web/CSS/CSS_Flow_Layout/Введение_в_контексты_форматирования --- <div>{{CSSRef}}</div> 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 48eec35abe..a481d519ad 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 @@ -1,7 +1,8 @@ --- -title: 'CSS grids, logical values and writing modes' -slug: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' -translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +title: CSS grids, logical values and writing modes +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes +original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes --- <p class="summary">В этих руководствах я уже затронул важную особенность grid layout: поддержка различных режимов записи, встроенных в спецификацию. В этом руководстве мы рассмотрим эту особенность grid и других современных методов компоновки, немного узнав о режимах записи и логических и физических свойствах, когда мы это делаем.</p> diff --git a/files/ru/web/css/css_grid_layout/грид-области/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html index 6d2d3b6892..87da484318 100644 --- a/files/ru/web/css/css_grid_layout/грид-области/index.html +++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html @@ -1,7 +1,8 @@ --- title: Шаблоны грид-областей -slug: Web/CSS/CSS_Grid_Layout/Грид-области +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> diff --git a/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index e470a72ce7..be2ecaee2e 100644 --- a/files/ru/web/css/css_grid_layout/расположение_элементов_по_грид-линиям_с_помощью_css_grid/index.html +++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -1,7 +1,6 @@ --- title: Расположение элементов по грид-линиям с помощью CSS Grid -slug: >- - Web/CSS/CSS_Grid_Layout/Расположение_элементов_по_грид-линиям_с_помощью_CSS_Grid +slug: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid tags: - CSS - CSS Grid @@ -9,6 +8,8 @@ tags: - Руководство - Сетка translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +original_slug: >- + Web/CSS/CSS_Grid_Layout/Расположение_элементов_по_грид-линиям_с_помощью_CSS_Grid --- <p>В статье, касавшейся <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">основных понятий позиционирования элементов с помощью гридов</a>, мы кратенько рассмотрели, как располагать элементы в гриде, используя номера линий. Теперь давайте детально исследуем то, как работает эта фундаментальная часть спецификации.</p> 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 new file mode 100644 index 0000000000..4f041d515f --- /dev/null +++ b/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,158 @@ +--- +title: Using z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +original_slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index +--- +<div>{{cssref}}</div> + +<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> + +<ul> + <li>bottom layer<em> (farthest from the observer)</em></li> + <li>...</li> + <li>Layer -3</li> + <li>Layer -2</li> + <li>Layer -1</li> + <li>Layer 0 <em>(default rendering layer)</em></li> + <li>Layer 1</li> + <li>Layer 2</li> + <li>Layer 3</li> + <li>...</li> + <li>top layer<em> (closest to the observer)</em></li> +</ul> + +<div class="note"> +<p><strong>Notes:</strong></p> + +<ul> + <li>When no <code>z-index</code> property is specified, elements are rendered on the default rendering layer 0 (zero).</li> + <li>If several elements share the same <code>z-index</code> value (i.e., they are placed on the same layer), stacking rules explained in the section <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="Stacking without z-index">Stacking without z-index</a> apply.</li> +</ul> +</div> + +<p>In the following example, the layers' stacking order is rearranged using <code>z-index</code>. The <code>z-index</code> of element #5 has no effect since it is not a positioned element.</p> + +<p>{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}</p> + +<h2 id="Source_code_for_the_example"><strong>Source code for the example</strong></h2> + +<h3 id="HTML"><strong>HTML</strong></h3> + +<pre class="brush: html"><div id="abs1"> + <b>DIV #1</b> + <br />position: absolute; + <br />z-index: 5; +</div> + +<div id="rel1"> + <b>DIV #2</b> + <br />position: relative; + <br />z-index: 3; +</div> + +<div id="rel2"> + <b>DIV #3</b> + <br />position: relative; + <br />z-index: 2; +</div> + +<div id="abs2"> + <b>DIV #4</b> + <br />position: absolute; + <br />z-index: 1; +</div> + +<div id="sta1"> + <b>DIV #5</b> + <br />no positioning + <br />z-index: 8; +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">div { + padding: 10px; + opacity: 0.7; + text-align: center; +} + +b { + font-family: sans-serif; +} + +#abs1 { + z-index: 5; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #900; + background-color: #fdd; +} + +#rel1 { + z-index: 3; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #696; + background-color: #cfc; + margin: 0px 50px 0px 50px; +} + +#rel2 { + z-index: 2; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #696; + background-color: #cfc; + margin: 0px 50px 0px 50px; +} + +#abs2 { + z-index: 1; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #900; + background-color: #fdd; +} + +#sta1 { + z-index: 8; + height: 70px; + border: 1px dashed #996; + background-color: #ffc; + margin: 0px 50px 0px 50px; +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><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>: The stacking rules that apply when <code>z-index</code> is not used.</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking with floated blocks</a>: How floating elements are handled with stacking.</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a>: Notes on the stacking context.</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a>: 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a>: 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a>: 3-level HTML hierarchy, z-index on the second level</li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the English translation of an article I wrote in Italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under the <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a>.</li> + <li>Last Updated Date: November 3, 2014</li> +</ul> +</div> 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 new file mode 100644 index 0000000000..8d5d965a23 --- /dev/null +++ b/files/ru/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,52 @@ +--- +title: Понимание CSS z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - NeedsTranslation + - TopicStub + - Understanding_CSS_z-index + - Web + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +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> +</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> + +<p>Это означает, что правила стиля CSS позволяют вам позиционировать блоки на слоях в дополнение к обычному слою рендеринга (слой 0). Положение Z каждого слоя выражается как целое число, представляющее порядок наложения для рендеринга. Большие числа означают ближе к наблюдателю. Положение Z можно контролировать с помощью свойства CSS z-index.</p> + +<p>Использование z-index кажется чрезвычайно простым: одно свойство, которому присваивается одно целое число, с простым для понимания поведением. Однако, когда z-index применяется к сложным иерархиям элементов HTML, его поведение может быть трудно понять или предсказать. Это обьясняется целым комплексом правил "укладки" элементов. Фактически в спецификации <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> (CSS-2.1 Приложение Е) зарезервирован целый раздел, подробно обьясняющий эти правила.</p> + +<p>Данная статья попытается объяснить эти правила, с некоторым упрощением и несколькими примерами.</p> + +<ol> + <li><a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Позиционирование без z-индекса</a> : правила по умолчанию</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Позиционирование и float</a> : как себя поводят float элементы c позиционированием</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Использование z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level</li> +</ol> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Информация о документе</h3> + +<ul> + <li>Автор: Paolo Lombardi</li> + <li>Эта статья - английский перевод статьи, которую я написал на итальянском для YappY. Я даю право делиться всем контентом: <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Дата последнего обновления: 9 июля 2005 г.</li> +</ul> + +<p>Примечание автора: спасибо Владимиру Паланту и Роду Уайтли за обзор.</p> + +<article></article> +</div> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..4ed7e1686d --- /dev/null +++ b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,141 @@ +--- +title: Stacking without z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +tags: + - CSS + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index +--- +<p>« <a href="/en/CSS" title="CSS">CSS</a> « <a href="/en/CSS/Understanding_z-index" title="Understanding CSS z-index"><span class="title">Понимание CSS z-index</span></a></p> + +<h3 id="Наложения_без_Z-индекса">Наложения без Z-индекса</h3> + +<p>Когда элементы не имеют z-индека, они накладываються в таком порядке(снизу вверх):</p> + +<p>1. Фон и границы корневого элемента.</p> + +<p>2. Дочерние блоки в нормальном потоке в порядке размещения(в HTML порядке).</p> + +<p>3. Дочерние позиционированные элементы, в порядке размещения (в HTML порядке).</p> + +<p>В следующем примере, абсолютно и относительно спозиционированным блокам определена величина и позиция таким образом, чтобы продемонстировать правила наложения.</p> + +<div class="note"> +<p><strong>Заметки:</strong></p> + +<ul> + <li>Given a homogeneous group of elements without any z-index property, such as the positioned blocks (DIV #1 to #4) in the example, the element's stacking order is their order in the HTML hierarchy, regardless of their position.</li> + <li> + <p>Standard blocks (DIV #5) in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy. </p> + </li> +</ul> +</div> + +<p><img alt="understanding_zindex_01.png" class="default internal" src="/@api/deki/files/910/=understanding_zindex_01.png"></p> + +<h2 id="Example" name="Example">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="absdiv1"> + <br /><span class="bold">DIV #1</span> + <br />position: absolute; </div> +<div id="reldiv1"> + <br /><span class="bold">DIV #2</span> + <br />position: relative; </div> +<div id="reldiv2"> + <br /><span class="bold">DIV #3</span> + <br />position: relative; </div> +<div id="absdiv2"> + <br /><span class="bold">DIV #4</span> + <br />position: absolute; </div> +<div id="normdiv"> + <br /><span class="bold">DIV #5</span> + <br />no positioning </div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css"> .bold { + font-weight: bold; + font: 12px Arial; + } + #normdiv { + height: 70px; + border: 1px dashed #999966; + background-color: #ffffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + #reldiv1 { + opacity: 0.7; + height: 100px; + position: relative; + top: 30px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + #reldiv2 { + opacity: 0.7; + height: 100px; + position: relative; + top: 15px; + left: 20px; + border: 1px dashed #669966; + background-color: #ccffcc; + margin: 0px 50px 0px 50px; + text-align: center; + } + #absdiv1 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + left: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } + #absdiv2 { + opacity: 0.7; + position: absolute; + width: 150px; + height: 350px; + top: 10px; + right: 10px; + border: 1px dashed #990000; + background-color: #ffdddd; + text-align: center; + } +</pre> + +<h3 id="Результат">Результат</h3> + +<p>(If the image does not display in CodePen, click the Tidy button in the CSS section)</p> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}</p> + +<h3 id="Так_же_посмотрите">Так же посмотрите</h3> + +<ul> + <li><a href="/en/CSS/Understanding_z-index/Stacking_and_float" title="en/CSS/Understanding_z-index/Stacking_and_float">Stacking and float</a> : How floating elements are handled</li> + <li><a href="/en/CSS/Understanding_z-index/Adding_z-index" title="en/CSS/Understanding_z-index/Adding_z-index">Adding z-index</a> : Using z-index to change default stacking</li> + <li><a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">The stacking context</a> : Notes on the stacking context</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_1" title="en/CSS/Understanding_z-index/Stacking_context_example_1">Stacking context example 1</a> : 2-level HTML hierarchy, z-index on the last level</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_2" title="en/CSS/Understanding_z-index/Stacking_context_example_2">Stacking context example 2</a> : 2-level HTML hierarchy, z-index on all levels</li> + <li><a href="/en/CSS/Understanding_z-index/Stacking_context_example_3" title="en/CSS/Understanding_z-index/Stacking_context_example_3">Stacking context example 3</a> : 3-level HTML hierarchy, z-index on the second level<span id="cke_bm_94E" style="display: none;"> </span></li> +</ul> + +<div class="originaldocinfo"> +<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> + +<ul> + <li>Author(s): Paolo Lombardi</li> + <li>This article is the english translation of an article I wrote in italian for <a class="external" href="http://www.yappy.it">YappY</a>. I grant the right to share all the content under <a class="external" href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons: Attribution-Sharealike license</a></li> + <li>Last Updated Date: November 3rd, 2014</li> +</ul> +</div> diff --git a/files/ru/web/css/css_селекторы/index.html b/files/ru/web/css/css_selectors/index.html index 8745681718..f3c8f7dfa7 100644 --- a/files/ru/web/css/css_селекторы/index.html +++ b/files/ru/web/css/css_selectors/index.html @@ -1,11 +1,12 @@ --- title: CSS-селекторы -slug: Web/CSS/CSS_Селекторы +slug: Web/CSS/CSS_Selectors tags: - CSS - Обзор - Селекторы translation_of: Web/CSS/CSS_Selectors +original_slug: Web/CSS/CSS_Селекторы --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index f737d2cb6d..456e350fad 100644 --- a/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html +++ b/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -1,7 +1,8 @@ --- -title: 'Использование псевдокласса :target в селекторах' -slug: 'Web/CSS/CSS_Селекторы/Using_the_:target_pseudo-class_in_selectors' -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +title: Использование псевдокласса :target в селекторах +slug: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +translation_of: Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors +original_slug: Web/CSS/CSS_Селекторы/Using_the_:target_pseudo-class_in_selectors --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/css_user_interface/index.html b/files/ru/web/css/css_user_interface/index.html deleted file mode 100644 index 2a4028644d..0000000000 --- a/files/ru/web/css/css_user_interface/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: CSS Basic User Interface -slug: Web/CSS/CSS_User_Interface -tags: - - CSS - - CSS Basic User Interface - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Basic_User_Interface -translation_of_original: Web/CSS/CSS_User_Interface ---- -<div>{{CSSRef}}</div> - -<p><strong>CSS User Interface</strong> is a CSS module that lets you define the rendering and functionality of features related to the user interface.</p> - -<h2 id="Reference">Reference</h2> - -<h3 id="Preferences">Preferences</h3> - -<div class="index"> -<ul> - <li>{{cssxref("box-sizing")}}</li> - <li>{{cssxref("cursor")}}</li> - <li>{{cssxref("outline")}}</li> - <li>{{cssxref("outline-width")}}</li> - <li>{{cssxref("outline-style")}}</li> - <li>{{cssxref("outline-color")}}</li> - <li>{{cssxref("outline-offset")}}</li> - <li>{{cssxref("resize")}}</li> - <li>{{cssxref("text-overflow")}}</li> - <li>{{cssxref("nav-down")}}</li> - <li>{{cssxref("nav-left")}}</li> - <li>{{cssxref("nav-right")}}</li> - <li>{{cssxref("nav-up")}}</li> -</ul> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property">Using URL values for the <code>cursor</code> property</a></dt> - <dd>Explains how a URL can be used with the {{cssxref("cursor")}} property to produce custom cursors.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Basic UI')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'ui.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>1.5 (1.8)</td> - <td>8.0</td> - <td>7.0</td> - <td>1.2 (125)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoMobile(1.8)}}</td> - <td>8.0</td> - <td>6.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/ru/web/css/filter-function/url/index.html b/files/ru/web/css/filter-function/url/index.html deleted file mode 100644 index 755d1adfe4..0000000000 --- a/files/ru/web/css/filter-function/url/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: url() -slug: Web/CSS/filter-function/url -tags: - - CSS - - Начинающий - - Ссылка - - Функция -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url ---- -<div>{{cssref}}</div> - -<p><strong><code>url()</code></strong> - это <a href="/en-US/docs/Web/CSS">CSS</a> функция, использующая <a href="/en-US/docs/Web/SVG/Element/filter">SVG filter</a> для измения внешнего вида у выводимого изображения.</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="syntaxbox">url(<em>расположение</em>)</pre> - -<h3 id="Параметры">Параметры</h3> - -<dl> - <dt><code>расположение</code></dt> - <dd>В {{cssxref("<URL-адрес>")}} из {{glossary("XML")}} указывается файл, который задает фильтр SVG, а также может включать в себя привязки к конкретному фильтрующему элементу.</dd> -</dl> - -<h2 id="Пример">Пример</h2> - -<pre class="brush: css">url(resources.svg#c1)</pre> - -<h2 id="Изучите_также">Изучите также</h2> - -<ul> - <li><a href="https://developer.mozilla.org/ru/docs/Web/CSS/filter-function">{{cssxref("<filter-function>")}}</a></li> -</ul> diff --git a/files/ru/web/css/grid-gap/index.html b/files/ru/web/css/grid-gap/index.html deleted file mode 100644 index 90daa7c0ea..0000000000 --- a/files/ru/web/css/grid-gap/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: grid-gap -slug: Web/CSS/grid-gap -translation_of: Web/CSS/gap -translation_of_original: Web/CSS/grid-gap ---- -<p>{{Deprecated_Header}}</p> - -<div class="note"> -<p><strong>Примечание</strong>. Свойство CSS с разделительной сеткой было переименовано в свойство prefix-less {{cssxref('gap')}}.</p> -</div> - -<p>Свойство CSS <strong><code>grid-gap</code></strong> является сокращенным свойством для {{cssxref("grid-row-gap")}} и {{cssxref("grid-column-gap")}}, определяющего желоба между строками и столбцами сетки.</p> - -<div>{{EmbedInteractiveExample("pages/css/grid-gap.html")}}</div> - -<p class="hidden">Источник этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на перенос.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers">/* Одно <length> значение */ -grid-gap: 20px; -grid-gap: 1em; -grid-gap: 3vmin; -grid-gap: 0.5cm; - -/* Одно <percentage> значение */ -grid-gap: 16%; -grid-gap: 100%; - -/* Два <length> значения */ -grid-gap: 20px 10px; -grid-gap: 1em 0.5em; -grid-gap: 3vmin 2vmax; -grid-gap: 0.5cm 2mm; - -/* Один или два <percentage> значения */ -grid-gap: 16% 100%; -grid-gap: 21px 82%; - -/* calc() значения */ -grid-gap: calc(10% + 20px); -grid-gap: calc(20px + 10%) calc(10% - 5px); - -/* Глобальные значения */ -grid-gap: inherit; -grid-gap: initial; -grid-gap: unset; -</pre> - -<p>Это свойство указывается как значение для <code><'grid-row-gap'></code> , за которым необязательно следует значение для <code><'grid-column-gap'></code>. Если <code><'grid-column-gap'></code> опущено, для него устанавливается то же значение, что и <code><'grid-row-gap'></code>.</p> - -<p>Каждое из свойств <code><'grid-row-gap'></code> и <code><'grid-column-gap'></code> указываются как <code><length></code> или <code><percentage></code>.</p> - -<h3 id="Значения">Значения</h3> - -<dl> - <dt><code><length></code></dt> - <dd>Ширина отступа, разделяющего линии сетки.</dd> - <dt><code><percentage></code></dt> - <dd>Ширина отступа, разделяющего линии сетки относительно размеров элемента.</dd> -</dl> - -<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Примеры">Примеры</h2> - -<h3 id="HTML_Контент">HTML Контент</h3> - -<pre class="brush: html"><div id="grid"> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> -</div></pre> - -<h3 id="CSS_Контент">CSS Контент</h3> - -<pre class="brush: css; highlight[5]">#grid { - display: grid; - height: 200px; - grid-template: repeat(3, 1fr) / repeat(3, 1fr); - grid-gap: 20px 5px; -} - -#grid > div { - background-color: lime; -} -</pre> - -<p>{{EmbedLiveSample("Example", "100%", "200px")}}</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("CSS3 Box Alignment", "#propdef-grid-gap", "grid-gap")}}</td> - <td>{{Spec2("CSS3 Box Alignment")}}</td> - <td>Устарело в пользу <code><a href="/en-US/docs/Web/CSS/gap">gap</a></code></td> - </tr> - <tr> - <td>{{SpecName("CSS3 Grid", "#gutters", "grid-gap")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>Начальное определение</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> - - - -<p>{{Compat("css.properties.grid-gap")}}</p> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>Prefixless CSS equivalents: {{cssxref("row-gap")}}, {{cssxref("column-gap")}}, {{cssxref("gap")}}</li> - <li>Related CSS properties: {{cssxref("grid-row-gap")}}, {{cssxref("grid-column-gap")}}</li> - <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li> -</ul> - -<section class="Quick_links" id="Quick_Links"> -<ol> - <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li data-default-state="open"><a href="#"><strong>Guides</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</strong></a> - <ol> - <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> - <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Glossary</strong></a> - <ol> - <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li> - <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> -</section> diff --git a/files/ru/web/css/способ_расположения/index.html b/files/ru/web/css/layout_mode/index.html index dcf1440cb5..eed469409b 100644 --- a/files/ru/web/css/способ_расположения/index.html +++ b/files/ru/web/css/layout_mode/index.html @@ -1,9 +1,10 @@ --- title: Способ разметки -slug: Web/CSS/Способ_расположения +slug: Web/CSS/Layout_mode tags: - CSS translation_of: Web/CSS/Layout_mode +original_slug: Web/CSS/Способ_расположения --- <p><a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a> <strong>способ разметки </strong>(или <em>раскладки,</em> или англ. <em>layout</em>) — это алгоритм определения позиции и размеров блоков, основанный на способе, которым они взаимодействуют с родственными блоками. Существует несколько типов разметки:</p> diff --git a/files/ru/web/css/размер/index.html b/files/ru/web/css/length/index.html index 4fd88f8cc2..287959e343 100644 --- a/files/ru/web/css/размер/index.html +++ b/files/ru/web/css/length/index.html @@ -1,6 +1,6 @@ --- title: <length> -slug: Web/CSS/размер +slug: Web/CSS/length tags: - CSS - CSS Тип Данных @@ -8,6 +8,7 @@ tags: - Разметка - длина translation_of: Web/CSS/length +original_slug: Web/CSS/размер --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html b/files/ru/web/css/media_queries/testing_media_queries/index.html index 878621ebd3..d7f3f0cb76 100644 --- a/files/ru/web/css/media_queries/тестирование_медиа_запросы/index.html +++ b/files/ru/web/css/media_queries/testing_media_queries/index.html @@ -1,10 +1,11 @@ --- title: Тестирование медиа-запросов программно -slug: Web/CSS/Media_Queries/Тестирование_медиа_запросы +slug: Web/CSS/Media_Queries/Testing_media_queries tags: - Запросы - медиа-запросы translation_of: Web/CSS/Media_Queries/Testing_media_queries +original_slug: Web/CSS/Media_Queries/Тестирование_медиа_запросы --- <div>{{cssref}}</div> diff --git a/files/ru/web/css/псевдо-классы/index.html b/files/ru/web/css/pseudo-classes/index.html index 2c280be32b..1b27fa85c5 100644 --- a/files/ru/web/css/псевдо-классы/index.html +++ b/files/ru/web/css/pseudo-classes/index.html @@ -1,12 +1,13 @@ --- title: Псевдоклассы -slug: Web/CSS/Псевдо-классы +slug: Web/CSS/Pseudo-classes tags: - CSS - Reference - Псевдоклассы - Селекторы translation_of: Web/CSS/Pseudo-classes +original_slug: Web/CSS/Псевдо-классы --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/замещаемый_элемент/index.html b/files/ru/web/css/replaced_element/index.html index a252cbad33..d06bd6b9b9 100644 --- a/files/ru/web/css/замещаемый_элемент/index.html +++ b/files/ru/web/css/replaced_element/index.html @@ -1,11 +1,12 @@ --- title: Замещаемый элемент -slug: Web/CSS/Замещаемый_элемент +slug: Web/CSS/Replaced_element tags: - CSS - Reference - замещаемый элемент translation_of: Web/CSS/Replaced_element +original_slug: Web/CSS/Замещаемый_элемент --- <div>{{CSSRef}}</div> diff --git a/files/ru/web/css/указанное_значение/index.html b/files/ru/web/css/specified_value/index.html index 4f143afb74..7cc26d6db9 100644 --- a/files/ru/web/css/указанное_значение/index.html +++ b/files/ru/web/css/specified_value/index.html @@ -1,10 +1,11 @@ --- title: Указанное значение -slug: Web/CSS/Указанное_значение +slug: Web/CSS/specified_value tags: - CSS - CSS Reference translation_of: Web/CSS/specified_value +original_slug: Web/CSS/Указанное_значение --- <p>{{CSSRef}}</p> diff --git a/files/ru/web/css/синтаксис/index.html b/files/ru/web/css/syntax/index.html index 1adfb2fb04..d2db52f659 100644 --- a/files/ru/web/css/синтаксис/index.html +++ b/files/ru/web/css/syntax/index.html @@ -1,7 +1,8 @@ --- title: Синтаксис -slug: Web/CSS/Синтаксис +slug: Web/CSS/Syntax translation_of: Web/CSS/Syntax +original_slug: Web/CSS/Синтаксис --- <div>{{cssref}}</div> diff --git a/files/ru/web/css/url/index.html b/files/ru/web/css/url/index.html deleted file mode 100644 index 82965bf827..0000000000 --- a/files/ru/web/css/url/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: <url> -slug: Web/CSS/url -tags: - - Адрес - - Типы данных - - относительный адрес -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -<div>{{CssRef}}</div> - -<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code><url></code></strong> обозначает указатели на ресурсы, такие как изображения или шрифты. URL-адреса могут быть использованы в многочисленных свойствах CSS, таких как {{Cssxref("background-image")}}, {{Cssxref("cursor")}} или {{cssxref("list-style")}}.</p> - -<div class="note"> -<p><strong>URI или URL?</strong> Существует разница между {{Glossary("URI")}} и {{Glossary("URL")}}. URI просто идентифицирует ресурс. URL является типом URI, и описывает <em>месторасположение</em> ресурса.URI может быть либо URL-адресом, либо именем ресурса ({{Glossary("URN")}}).</p> - -<p>В CSS Уровень 1, фунциональная нотация <code>url()</code>описывала только истинные URL-адреса. В CSS Уровень 2, определение <code>url()</code> было расширено для описания любого URI, будь то URL или URN. Неожиданно, что <code>url()</code> может быть использовано для создания типа данных CSS <code><uri></code>. Это изменение было не только неожиданным, но и ненужным, так как URN почти не используется в реальном CSS. Для избежания путанницы, CSS Уровень 3 вернулся к более узкому, первоначальному определению. Сейчас <code>url()</code> означает только истинное значение <code><url></code>.</p> -</div> - -<h2 id="Синтаксис">Синтаксис</h2> - -<p>Тип данных <code><url></code> является указанием к использованию функциональной нотации <code id="The_url()_functional_notation">url()</code>. Он может быть задан без кавычек или с использованием одинарных или двойных кавычек. Допускаются относительные URL-адреса, относящиеся к URL-адресу страницы стилей (а не к URL-адресу веб-страницы).</p> - -<pre class="syntaxbox"><a_css_property>: url("http://mysite.example.com/mycursor.png") -<a_css_property>: url('http://mysite.example.com/mycursor.png') -<a_css_property>: url(http://mysite.example.com/mycursor.png) -</pre> - -<div class="note"> -<p><strong>Примечание:</strong> Контрольные символы выше 0x7e не допустимы в URL-адресах без кавычек, начиная с Firefox 15. Смотри {{Bug(752230)}} для более детальной информации.</p> -</div> - -<h2 id="Примеры">Примеры</h2> - -<pre class="brush: css">.topbanner { - background: url("topbanner.png") #00D no-repeat fixed; -} -</pre> - -<pre class="brush: css">ul { - list-style: square url(http://www.example.com/redball.png); -} -</pre> - -<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('CSS4 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>Нет значительных изменений по сравнению с CSS Уровень 2 (Revision 1).</td> - </tr> - <tr> - <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>Нет значительных изменений по сравнению с CSS Уровень 1.</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#url', '<url>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>первое определение.</td> - </tr> - </tbody> -</table> - -<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> - - - -<div>{{Compat("css.types.url")}}</div> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("element()")}}</li> - <li>{{cssxref("_image","image()")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/ru/web/css/visual_formatting_model/index.html b/files/ru/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..b7cc6050f3 --- /dev/null +++ b/files/ru/web/css/visual_formatting_model/index.html @@ -0,0 +1,210 @@ +--- +title: Модель визуального форматирования +slug: Web/CSS/Visual_formatting_model +translation_of: Web/CSS/Visual_formatting_model +original_slug: Web/Guide/CSS/Visual_formatting_model +--- +<p>{{CSSRef}}</p> + +<p><span class="seoSummary"><em>Модель визуального форматирования </em>CSS<em> </em> - это алгоритм, используемый для обработки документа и его визуального отображения. Это базовая концепция CSS</span>. Модель визуального форматирования задаёт трансформацию каждого элемента в документе и создаёт ноль, одну или несколько боксов, согласно <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box_model">боксовой модели CSS</a>. Расположение (layout) каждого бокса определяется:</p> + +<ul> + <li>размерами бокса: точно заданными или заданными ограничениями. Если размеры не заданы, это правило игнорируется;</li> + <li>типом бокса: inline, inline-level, atomic inline-level, block box;</li> + <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Box_positioning_scheme">схемой позиционирования</a>: normal flow, float или absolute;</li> + <li>другими элементами дерева: дочерними и соседними;</li> + <li>размерами и расположением окна просмотра ({{glossary("viewport")}});</li> + <li>внутренними размерами содержащихся изображений;</li> + <li>другой внешней информацией.</li> +</ul> + +<p>Бокс отображается относительно краев <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоев, выходящих за пределы своих содержащих блоков, называется <em>переполенинем</em> (<em>overflow).</em></p> + +<h2 id="Генерация_бокса">Генерация бокса</h2> + +<p>Генерация бокса - часть алгоритма модели визуального форматирования, процедура, генерирующая блоки из элементов. Различные типы боксов определяют различное поведение в контексте форматирования. Тип бокса зависит от свойства CSS {{ cssxref("display") }}.</p> + +<h3 id="Блочные_эклементы_и_блок-боксы">Блочные эклементы и блок-боксы</h3> + +<p>Говорят, что элемент является блочным, когда вычисленное значение его CSS свойства {{ cssxref("display") }} равно: <code>block</code>, <code>list-item</code>, или <code>table</code>. Блочный элемент визуально форматируется как блок (например, параграф), предназначенный для вертикальной компоновки (в столбик).</p> + +<p>Каждый элемент блочного уровня участвует в <a href="/ru/docs/CSS/block_formatting_context" title="block formatting context">контексте блочного форматирования</a>. Каждый элемент блочного уровня генерирует как миниум один блок-бокс, названный <em>главным блок-боксом</em>. Некоторые элементы, например, такие как list-item, создают дополнительные боксы для хранения маркеров и других типографических элементов, содержащихся в list item. Большинство блочных элементов генерирует только один, главный блок-бокс.</p> + +<p>Главный блок-бокс содержит сгенериованные боксы-потомки и сгенериованный контекст. Он так же будет боксом, участвующем в <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">схеме позиционирования</a>.</p> + +<p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">Элемент блочного уровня так же может быть блоком-контейнером. Блок-контейнер - это блок, который содержит либо только другие элементы блочного уровня, либо создаёт <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контекст инлайнового форматирования</a> и, таким образом, содержит только инлайновые элементы.</p> + +<p>Важно понимать, что понятие блочного элемента и понятие блочного контейнера - это разные вещи. Первое описывает, как блок будет себя вести по отношению к своему родителю и своим соседям/братьям. А второе - описывает, как блок будет взаимодействовать со своими потомками. Некоторые элементы блочного уровня, например, таблицы, не являются содержащими блоками. И наоборот, некоторые блоки-контейнеры, например, ячейки таблицы, не являются элементами блочного уровня.</p> + +<p>Элементы блочного уровня, которые так же являются контейнерами, называются <em>блок-боксами</em>.</p> + +<h4 id="Анонимные_блок-боксы">Анонимные блок-боксы</h4> + +<p>В некоторых случаях алгоритм визуального форматирования вынужден добавлять дополнительные боксы. Так как эти боксы невозможно как-то проименовать и к ним невозможно применить css-селекторы, поэтому эти боксы называют <em>анонимными</em>.</p> + +<p>Из-за того, что к анонимным боксам невозможно применить селекторы, их невозможно изменить с помощью таблицы стилей. Это значит, что все наследуемые CSS свойства для них будут иметь значение <code>inherit</code>, а все ненаследуемые свойства будут иметь значение <code>initial</code>.</p> + +<p>Блоки-контейнеры содержат либо только инлайн-боксы, либо только элементы блочного уровня. Но, как правило, документ содержит и те и другие. В этом случае анонимные блок-боксы создаются вокруг примыкающих к ним инлайн-боксов.</p> + +<h3 id="Пример">Пример</h3> + +<p>Возьмём следующий HTML код (со стилями по умолчанию, то есть элементы {{ HTMLElement("div") }} и {{ HTMLElement("p") }} имеют значение <code>display:block</code> :</p> + +<pre class="syntaxbox"><code><div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div></code></pre> + +<p>Здесь создались два анонимных блока: один для текста перед параграфом (<code>Some inline text</code>), и второй для текста после параграфа (<code>followed by more inline text.</code>). И у нас получилась вот такая структура:</p> + +<p style="text-align: center;"><img alt="anonymous_block-level_boxes.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/5996/=anonymous_block-level_boxes.png"></p> + +<p>Выглядеть это будет так:</p> + +<pre class="line-numbers language-html"><code class="language-html">Some inline text +followed by a paragraph +followed by more inline text.</code></pre> + +<p>В отличие от параграфа {{ HTMLElement("p") }}, Web разработчик не может напрямую контролировать стили этих двух анонимных боксов. Те свойства, которые наследуются, берут своё значение от элемента {{ HTMLElement("div") }}, например {{ cssxref("color") }}, определяющий цвет текста. А другие значения, ненаследуемые, устанавливаются в значение <code>initial</code>. Например, у них не будет своего свойства {{ cssxref("background-color") }}, он всегда будет в состоянии "прозрачный" (transparent), значении по умолчанию для этого свойства, и поэтому будет видно тот background, который установлен у элемента <code><div></code>. А вот для параграфа <code><p> </code>можно установить своё свойство цвета фона. Таким образом, эти два анонимных бокса будут иметь один и тот же цвет текста.</p> + +<p>Ещё один случай, который приводит к созданию анонимных блок-боксов, это случай, когда инлайн-бокс содержит один или несколько блок-боксов. В этом случае элемент, содержащий блок-боксы, делится на два инлайн-бокса - один перед, а второй после блок-бокса. И потом инлайн-элементы перед и после блок-бокса дополнительно заключаются в <em>анонимные блок-боксы</em>. Таким образом блок-бокс становится соседом для анонимных блок-боксов, содержащих инлайн-элементы.</p> + +<p>Если есть несколько блок-боксов, идущих подряд, без инлайн-элементов между ними, то анонимные блок-боксы создаются только перед и после такого набора блок-боксов.</p> + +<h3 id="Пример_2">Пример</h3> + +<p>Возьмём следующий HTML код, где установим для элемента {{ HTMLElement("p") }} значение <code>display:inline</code> и для элемента {{ HTMLElement("span") }} значение <code>display:block</code> :</p> + +<pre class="syntaxbox"><code><p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p></code></pre> + +<p>Создадутся два анонимных блок-бокса, один для текста перед элементом span (<code>Some <em>inline</em> text</code>) и один для текста после него (<code>followed by more inline text</code>), и у нас получится вот такая структура:</p> + +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/13625/anonymous_block_box_break.png" style="height: 137px; width: 597px;"></p> + +<p>Выглядеть она будет так:</p> + +<pre class="line-numbers language-html"><code class="language-html">Some inline text +followed by a paragraph +followed by more inline text.</code></pre> + +<h3 id="Элементы_инлайн-уровня_и_инлайн-боксы">Элементы инлайн-уровня и инлайн-боксы</h3> + +<p>Элементы, которые называются <em>элементами инлайн-уровня</em> - это элементы, у которых вычисленное значение CSS свойства {{ cssxref("display") }} установлено в : <code>inline</code>, <code>inline-block</code> или <code>inline-table</code>. Визуально они не представляют собой какие-то отдельные блоки, но они они распологаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.</p> + +<p><img alt="venn_inlines.png" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p> + +<div class="warning"> +<p>Эта диаграмма использует устаревшую терминологию; см. примечания ниже. К тому же она некорректна, потому что жёлтый эллипс справа по определению должен быть изображён одинаковым по размеру с эллипсом слева или больше него (it could be a mathematical superset), потому что в спецификации сказано: "Элементв инлайн-уровня генерируют боксы инлайн-уровня, участвующие в форматировании инлайн-уровня", см. CSS 2.2, глава 9.2.2</p> +</div> + +<p>Элементы инлайн-уровня создают <em>боксы инлайн-уровня</em>, которые определены как боксы, участвующие в <a href="https://developer.mozilla.org/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контексте форматирования инлайн-уровня</a>. <em>Inline boxes</em> are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with <code>display:inline</code>. Inline-level boxes, whose contents do not participate in an inline formatting context, are called <em>atomic inline-level boxes</em>. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of <code>inline-block</code> or <code>inline-table</code>, are never split into several boxes, as is possible with inline boxes.</p> + +<div class="note"><strong>Note:</strong> Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are <strong>not</strong> inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.</div> + +<div class="note">Atomic inline boxes cannot be split into several lines in an inline formatting context. +<div style="-moz-column-width: 30em;"> +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="style token"><span class="language-css token"> + <span class="selector token">span</span> <span class="punctuation token">{</span> + <span class="property token">display</span><span class="punctuation token">:</span>inline<span class="punctuation token">;</span> <span class="comment token">/* default value*/</span> + <span class="punctuation token">}</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">width</span><span class="punctuation token">:</span><span class="number token">20</span><span class="token unit">em</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + The text in the span <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span><span class="punctuation token">></span></span>can be split in several + lines as it<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> is an inline box. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +</div> +</div> + +<p>which leads to:</p> + +<div style="width: 20em;">The text in the span <span>can be split into several lines as it</span> is an inline box.</div> + +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>style</span><span class="punctuation token">></span></span><span class="style token"><span class="language-css token"> + <span class="selector token">span</span> <span class="punctuation token">{</span> + <span class="property token">display</span><span class="punctuation token">:</span>inline-block<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>style</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">width</span><span class="punctuation token">:</span><span class="number token">20</span><span class="token unit">em</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + The text in the span <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span><span class="punctuation token">></span></span>cannot be split in several + lines as it<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> is an inline-block box. +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<div class="note"> +<div style="-moz-column-width: 30em;"> +<p>which leads to:</p> + +<div style="width: 20em;">The text in the span <span style="display: inline-block;">cannot be split into several lines as it</span> is an inline-block box.</div> +</div> +</div> + +<h4 id="Anonymous_inline_boxes">Anonymous inline boxes</h4> + +<p>As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to <code>initial</code> for all others.</p> + +<p>The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.</p> + +<div class="note">Example TBD</div> + +<h3 id="Other_types_of_boxes">Other types of boxes</h3> + +<h4 id="Line_boxes">Line boxes</h4> + +<p><em>Line boxes</em> are generated by the <a href="https://developer.mozilla.org/en-US/docs/CSS/Inline_formatting_context" title="block formatting context">inline formatting context</a> to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are <a href="https://developer.mozilla.org/en-US/docs/CSS/float" title="float">floats</a>, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.</p> + +<p>These boxes are technical, and Web authors do not usually have to bother with them.</p> + +<h4 id="Run-in_boxes">Run-in boxes</h4> + +<p><em>Run-in boxes</em>, defined using <code>display:run-in</code>, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.</p> + +<div class="note"><strong>Note:</strong> Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered <em>experimental</em>. They should not be used in production.</div> + +<h4 id="Model-induced_boxes">Model-induced boxes</h4> + +<p>Besides the inline and block formatting contexts, CSS specifies several additional <em>content models</em> that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:</p> + +<ul> + <li>The <a href="https://developer.mozilla.org/en-US/docs/CSS/table-layout" title="table-layout">table content model</a> may create a <em>table wrapper box</em> and a <em>table box</em>, but also specific boxes like <em>caption boxes</em>.</li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">multi-column content model</a> may create <em>column boxes</em> between the container box and the content<em>.</em></li> + <li>The experimental grid, or flex-box content models, also create additional types of boxes.</li> +</ul> + +<h4 id="Positioning_schemes">Positioning schemes</h4> + +<p>Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:</p> + +<ul> + <li>The <em>normal flow</em> - positions each box one after the other.</li> + <li>The <em>floats</em> algorithm - extracts the box from the normal flow and put it to the side of the containing box.</li> + <li>The <em>absolute positioning</em> scheme - positions a box within an absolute coordinate system that is established by its containing element. An absolutely positioned element can cover other elements.</li> +</ul> + +<h3 id="Normal_flow">Normal flow</h3> + +<p>In the <em>normal flow</em>, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value <code>static</code> or <code>relative</code>, and if the CSS {{ cssxref("float") }} is set to the value <code>none</code>.</p> + +<h3 id="Example">Example</h3> + +<div class="note">When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out.<br> +<br> +When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out.</div> + +<div class="note"> +<p>There are two sub-cases of the normal flow: static positioning and relative positioning:</p> + +<ul> + <li>In <em>static positioning</em>, triggered by the value <code>static</code> of the {{ cssxref("position") }} property, the boxes are drawn at the exact position defined by the normal flow layout.</li> + <li>In <em>relative</em><em> positioning</em>, triggered by the value <code>relative</code> of the {{ cssxref("position") }} property, the boxes are drawn with an offset defined by the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</li> +</ul> +</div> + +<h3 id="Floats">Floats</h3> + +<p>In the <em>float positioning scheme</em>, specific boxes (called <em>floating boxes</em> or simply <em>floats)</em> are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.</p> + +<p>The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than <code>none</code> and {{ cssxref("position") }} to <code>static</code> or <code>relative</code>. If {{ cssxref("float") }} is set to <code>left</code>, the float is positioned at the beginning of the line box. If set to <code>right</code>, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.</p> + +<h3 id="Absolute_positioning">Absolute positioning</h3> + +<p>In the <em>absolute positioning scheme</em>, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block" title="CSS/Containing block">containing block</a> using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.</p> + +<p>An element is absolutely positioned if the {{ cssxref("position") }} is set to <code>absolute</code> or <code>fixed</code>.</p> + +<p>With a <em>fixed positioned element</em>, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.</p> |