initial commit

1 files changed, 189 insertions, 0 deletions

diff --git a/files/ru/web/css/reference/index.html b/files/ru/web/css/reference/index.html
new file mode 100644
index 0000000000..2a32f7019f
--- /dev/null
+++ b/files/ru/web/css/reference/index.html
@@ -0,0 +1,189 @@
+---
+title: Руководство по CSS
+slug: Web/CSS/Reference
+tags:
+  - CSS
+  - CSSOM
+  - DOM-CSS
+  - Стили
+translation_of: Web/CSS/Reference
+---
+<p><span class="seoSummary">Данный <em>справочник по CSS</em> перечисляет все стандартные свойства, <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассы</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементы</a>, <a href="/ru/docs/Web/CSS/At-rule">@-правила</a>, единицы измерения и селекторы <a href="/ru/docs/CSS">CSS</a> в алфавитном порядке. </span> Справочник позволит вам быстро найти подробную информацию о каждом из них. <span class="seoSummary">Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства <a href="/ru/docs/Web/CSS/CSS3">CSS3</a>. Также включает в себя краткое руководство </span> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Reference$edit#DOM_CSS">DOM-CSS / CSSOM</a>.</p>
+
+<p>Заметьте, что определения CSS-правил полностью (ASCII)  <a href="https://www.w3.org/TR/css-syntax-3/#intro">тексто-ориентированы</a>, в то время как определения правил DOM-CSS / CSSOM <a href="https://www.w3.org/TR/cssom/#introduction">объектно-ориентированы</a>.</p>
+
+<p>Смотрите также  <a href="/ru/docs/Web/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> для Gecko-специфичных свойств с префиксом <code>-moz</code>; и  <a href="/ru/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a> для WebKit-специфичных свойств. Смотрите  <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Обзор CSS-префиксов для разных браузеров от Peter Beverloo</a> для всех свойств с префиксами.</p>
+
+<h2 id="Базовый_синтаксис_правил">Базовый синтаксис правил</h2>
+
+<p>Имейте в виду, что любая синтаксическая ошибка в задании правил сделает некорректным всё правило.</p>
+
+<h3 id="Стили">Стили</h3>
+
+<pre class="syntaxbox"><strong><em>selectorlist</em> { <em>property</em>: <em>value</em>; </strong><em>[more property:value; pairs]</em> <strong>}</strong>
+
+...где <em>selectorlist</em>:<code> <em>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+</em></code>
+
+Смотрите списки <a href="#Selectors"><em>селекторов</em></a>, <a href="#pelm"><em>псевдоэлементов</em></a> и <a href="#pcls"><em>псевдоклассов</em></a> ниже.
+
+</pre>
+
+<h4 id="Примеры">Примеры</h4>
+
+<pre class="brush: css">strong { color: red; }
+div.menu-bar li:hover &gt; ul { display: block; }
+</pre>
+
+<p>Больше о примерах: <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors">#1</a>, <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors#Action_Using_selectors_based_on_relationships_and_pseudo-classes">#2</a></p>
+
+<h3 id="-правила">@-правила</h3>
+
+<p>Так как у них есть много различных структурных форматов, смотрите нужный синтаксис <a href="/ru/docs/Web/CSS/At-rule">@-правил</a>.</p>
+
+<h2 id="Справочный_указатель">Справочный указатель</h2>
+
+<div>{{CSS_Ref}}</div>
+
+<h2 id="Selectors" name="Selectors">Селекторы</h2>
+
+<ul>
+ <li>Базовые селекторы
+  <ul>
+   <li><a href="/ru/docs/Web/CSS/Type_selectors">По тегу</a><code> elementname</code></li>
+   <li><a href="/ru/docs/Web/CSS/Class_selectors">По классу</a> <code>.classname</code></li>
+   <li><a href="/ru/docs/Web/CSS/ID_selectors">По ID</a> <code>#idname</code></li>
+   <li><a href="/ru/docs/Web/CSS/Universal_selectors">Универсальные</a><code> * ns|* *|*</code></li>
+   <li><a href="/ru/docs/Web/CSS/Attribute_selectors">По атрибутам</a><code> [attr=value]</code></li>
+  </ul>
+ </li>
+ <li>Комбиционные
+  <ul>
+   <li><a href="/ru/docs/Web/CSS/Adjacent_sibling_selectors">смежный селектор</a> <code>A + B</code></li>
+   <li><a href="/ru/docs/Web/CSS/General_sibling_selectors">следующего элемента</a> <code>A ~ B</code></li>
+   <li><a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a> <code>A &gt; B</code></li>
+   <li><a href="/ru/docs/Web/CSS/Descendant_selectors">потомков</a> <code>A B</code></li>
+  </ul>
+ </li>
+ <li id="pelm">Псевдоэлементы    <a href="/ru/docs/Web/CSS/Pseudo-elements">(больше информации)</a>
+  <ul>
+   <li>{{ Cssxref("::after") }}</li>
+   <li>{{ Cssxref("::before") }}</li>
+   <li>{{ Cssxref("::first-letter") }}</li>
+   <li>{{ Cssxref("::first-line") }}</li>
+   <li>{{ Cssxref("::selection") }}</li>
+   <li>{{ Cssxref("::backdrop") }}</li>
+   <li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
+   <li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
+  </ul>
+ </li>
+ <li id="pcls">Псевдоклассы    <a href="/ru/docs/Web/CSS/Псевдо-классы">(больше информации)</a>
+  <ul>
+   <li>{{ Cssxref(":active") }}</li>
+   <li>{{ cssxref(':any')}}</li>
+   <li>{{ Cssxref(":checked") }}</li>
+   <li>{{ Cssxref(":default") }}</li>
+   <li>{{ Cssxref(":dir", ":dir()")}}</li>
+   <li>{{ Cssxref(":disabled") }}</li>
+   <li>{{ Cssxref(":empty") }}</li>
+   <li>{{ Cssxref(":enabled") }}</li>
+   <li>{{ Cssxref(":first") }}</li>
+   <li>{{ Cssxref(":first-child") }}</li>
+   <li>{{ Cssxref(":first-of-type") }}</li>
+   <li>{{ Cssxref(":fullscreen") }}</li>
+   <li>{{ Cssxref(":focus") }}</li>
+   <li>{{ Cssxref(":hover") }}</li>
+   <li>{{ Cssxref(":indeterminate") }}</li>
+   <li>{{ Cssxref(":in-range") }}</li>
+   <li>{{ Cssxref(":invalid") }}</li>
+   <li>{{ Cssxref(":lang", ":lang()") }}</li>
+   <li>{{ Cssxref(":last-child") }}</li>
+   <li>{{ Cssxref(":last-of-type") }}</li>
+   <li>{{ Cssxref(":left") }}</li>
+   <li>{{ Cssxref(":link") }}</li>
+   <li>{{ Cssxref(":not", ":not()") }}</li>
+   <li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
+   <li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
+   <li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
+   <li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
+   <li>{{ Cssxref(":only-child") }}</li>
+   <li>{{ Cssxref(":only-of-type") }}</li>
+   <li>{{ Cssxref(":optional") }}</li>
+   <li>{{ Cssxref(":out-of-range") }}</li>
+   <li>{{ Cssxref(":read-only") }}</li>
+   <li>{{ Cssxref(":read-write") }}</li>
+   <li>{{ Cssxref(":required") }}</li>
+   <li>{{ Cssxref(":right") }}</li>
+   <li>{{ Cssxref(":root") }}</li>
+   <li>{{ Cssxref(":scope") }}</li>
+   <li>{{ Cssxref(":target") }}</li>
+   <li>{{ Cssxref(":valid") }}</li>
+   <li>{{ Cssxref(":visited") }}</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Полный <a href="http://www.w3.org/TR/selectors/#selectors" title="http://www.w3.org/TR/selectors/#selectors">список селекторов</a> в спецификации Selectors Level 3.</p>
+
+<h2 id="Обучение_CSS3">Обучение CSS3</h2>
+
+<p>Эти маленькие страницы описывают технологии, появившиеся в CSS3 или CSS2.1, но с плохой поддержкой браузерами до недавнего времени:</p>
+
+<ul>
+ <li><a href="/ru/docs/Web/Guide/CSS/Media_queries">Медиа-запросы</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Counters">Счётчики</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_gradients">Градиенты</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_transforms">Трансформации</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_animations">Анимации</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_transitions">Переходы</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_multiple_backgrounds">Множественные фоны</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a></li>
+ <li><a href="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts">Многоколоночные макеты</a></li>
+</ul>
+
+<h2 id="Концепции">Концепции</h2>
+
+<ul>
+ <li><a href="/ru/docs/Web/CSS/Syntax">CSS синтаксис</a></li>
+ <li><a href="/ru/docs/Web/CSS/At-rule">@-правила</a></li>
+ <li><a href="/ru/docs/Web/CSS/Comments">Комментарии</a></li>
+ <li><a href="/ru/docs/Web/CSS/Specificity">Специфичность</a></li>
+ <li><a href="/ru/docs/Web/CSS/initial_value">Начальное значение</a></li>
+ <li><a href="/ru/docs/Web/CSS/inheritance">Наследование</a></li>
+ <li><a href="/ru/docs/Web/CSS/specified_value">Указанное значение</a> </li>
+ <li><a href="/ru/docs/Web/CSS/computed_value">Высчитанное значение</a></li>
+ <li><a href="/ru/docs/Web/CSS/used_value">Используемое значение</a></li>
+ <li><a href="/ru/docs/Web/CSS/actual_value">Актуальное значение</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resolved_value">Вычисленное значение</a> (почти то же, что высчитанное)</li>
+ <li><a href="/ru/docs/Web/CSS/box_model">Box-модель</a></li>
+ <li><a href="/ru/docs/Web/CSS/Replaced_element">Замещаемый элемент</a></li>
+ <li><a href="/ru/docs/Web/CSS/Value_definition_syntax">Синтаксис определения значений</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">Сокращенные свойства</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Объединение отступов</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Модель визуального форматирования</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_mode">Слои</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<p>Важнейшие типы объектов:</p>
+
+<ul>
+ <li>document . <a href="/ru/docs/Web/API/Document/styleSheets">styleSheets</a></li>
+ <li>styleSheets[x] . <a href="/ru/docs/Web/API/CSSRuleList">cssRules</a></li>
+ <li>cssRules[x] . <a href="/ru/docs/Web/API/CSSRule/cssText">cssText</a> (селекторы и стили)</li>
+ <li>cssRules[x] . <a href="/ru/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
+ <li>elem . <a href="/ru/docs/Web/API/HTMLElement/style">style</a></li>
+ <li>elem . style . <a href="/ru/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (только стили)</li>
+ <li>elem . <a href="/ru/docs/Web/API/Element/className">className</a></li>
+ <li>elem . <a href="/ru/docs/Web/API/Element/classList">classList</a></li>
+</ul>
+
+<p>важные методы:</p>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+</ul>