1 files changed, 189 insertions, 0 deletions
diff --git a/files/uk/web/css/reference/index.html b/files/uk/web/css/reference/index.html
new file mode 100644
index 0000000000..1eb6730f98
--- /dev/null
+++ b/files/uk/web/css/reference/index.html
@@ -0,0 +1,189 @@
+---
+title: CSS довідник
+slug: Web/CSS/Reference
+translation_of: Web/CSS/Reference
+original_slug: Web/CSS/Довідник
+---
+<p><span class="seoSummary">This <em>CSS Reference</em> shows the basic syntax of a CSS rule; lists all standard <a href="/uk/docs/CSS">CSS</a> properties, <a href="/uk/docs/Web/CSS/Pseudo-classes">pseudo-classes</a> and <a href="/uk/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/uk/docs/Web/CSS/At-rule">@-rules</a>, <a href="/uk/docs/Web/CSS/length">units</a>, and <a href="/uk/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a>, all together in <a href="#Keyword_index">alphabetical order</a>, as well as just the <a href="#Selectors">selectors by type</a>; and allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any <a href="/uk/docs/Web/CSS/CSS3">CSS3</a> property and concept standardized, or already stabilized.  Also included is a brief <a href="#DOM_CSS">DOM-CSS / CSSOM reference</a>.</span></p>
+
+<p>Note that CSS rule-definitions are entirely (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">text-based</a>, whereas DOM-CSS / CSSOM, the rule-management system, is <a href="https://www.w3.org/TR/cssom/#introduction">object-based</a>.</p>
+
+<p>See also <a href="/uk/docs/Web/CSS/Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> for Gecko-specific properties prefixed with <code>-moz</code>; and <a href="/uk/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a> for WebKit-specific properties. See <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS Property Overview</a> by Peter Beverloo for all prefixed properties.</p>
+
+<h2 id="Basic_rule_syntax">Basic rule syntax</h2>
+
+<p>Be warned that any syntax error in a rule definition will invalidate the entire rule.</p>
+
+<h3 id="Style_rules">Style rules</h3>
+
+<pre class="syntaxbox"><strong><var>selectorlist</var> { <var>property</var>: <var>value</var>;</strong> <var>[more property:value; pairs]</var> <strong>}</strong>
+
+...where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var>
+
+See <a href="#Selectors"><em>selector</em></a>, <a href="#pelm"><em>pseudo-element</em></a>, <a href="#pcls"><em>pseudo-class</em></a> lists below.
+</pre>
+
+<h4 id="Examples">Examples</h4>
+
+<pre class="brush: css">strong { color: red;}
+div.menu-bar li:hover &gt; ul { display: block; }
+</pre>
+
+<p>More about examples: <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors">#1</a>, <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Action_Using_selectors_based_on_relationships_and_pseudo-classes">#2</a></p>
+
+<h3 id="rules">@rules</h3>
+
+<p>As these have so many different structure-formats, see the desired <a href="/uk/docs/Web/CSS/At-rule">At-rule</a> for syntax.</p>
+
+<h2 id="Keyword_index">Keyword index</h2>
+
+<div>{{CSS_Ref}}</div>
+
+<div class="column-container">
+<div class="column-half">
+<h2 id="Selectors">Selectors</h2>
+
+<ul>
+ <li>Basic Selectors
+  <ul>
+   <li><a href="/uk/docs/Web/CSS/Type_selectors">Type selectors</a><code> elementname</code></li>
+   <li><a href="/uk/docs/Web/CSS/Class_selectors">Class selectors</a> <code>.classname</code></li>
+   <li><a href="/uk/docs/Web/CSS/ID_selectors">ID selectors</a> <code>#idname</code></li>
+   <li><a href="/uk/docs/Web/CSS/Universal_selectors">Universal selectors</a><code> * ns|* *|*</code></li>
+   <li><a href="/uk/docs/Web/CSS/Attribute_selectors">Attribute selectors</a><code> [attr=value]</code></li>
+  </ul>
+ </li>
+ <li>Combinators    <a href="/uk/docs/Web/Guide/CSS/Getting_started/Selectors#Information_Selectors_based_on_relationships">(more info)</a>
+  <ul>
+   <li><a href="/uk/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent sibling selectors</a> <code>A + B</code></li>
+   <li><a href="/uk/docs/Web/CSS/General_sibling_selectors">General sibling selectors</a> <code>A ~ B</code></li>
+   <li><a href="/uk/docs/Web/CSS/Child_selectors">Child selectors</a> <code>A &gt; B</code></li>
+   <li><a href="/uk/docs/Web/CSS/Descendant_selectors">Descendant selectors</a> <code>A B</code></li>
+  </ul>
+ </li>
+ <li id="pelm">Pseudo-elements    <a href="/uk/docs/Web/CSS/Pseudo-elements">(more info)</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">Standard pseudo-classes    <a href="/uk/docs/Web/CSS/Pseudo-classes">(more info)</a>
+  <div class="index">
+  <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>
+  </div>
+ </li>
+</ul>
+
+<p>A complete <a href="https://www.w3.org/TR/selectors/#selectors">list of selectors</a> in the Selectors Level 3 specification.</p>
+
+<h2 id="CSS3_Tutorials">CSS3 Tutorials</h2>
+
+<p>These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:</p>
+
+<ul>
+ <li><a href="/uk/docs/Web/Guide/CSS/Media_queries">Using CSS media queries</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Counters">Using CSS counters</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_gradients">Using CSS gradients</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_transforms">Using CSS transforms</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_animations">Using CSS animations</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_multiple_backgrounds">Using CSS multiple backgrounds</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+</ul>
+
+<h2 id="Concepts">Concepts</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/CSS/Syntax">CSS syntax</a></li>
+ <li><a href="/uk/docs/Web/CSS/At-rule">At-rule</a></li>
+ <li><a href="/uk/docs/Web/CSS/Comments">Comments</a></li>
+ <li><a href="/uk/docs/Web/CSS/Specificity">Specificity</a></li>
+ <li><a href="/uk/docs/Web/CSS/initial_value">Initial value</a></li>
+ <li><a href="/uk/docs/Web/CSS/inheritance">Inheritance</a></li>
+ <li><a href="/uk/docs/Web/CSS/specified_value">Specified value</a></li>
+ <li><a href="/uk/docs/Web/CSS/computed_value">Computed value</a></li>
+ <li><a href="/uk/docs/Web/CSS/used_value">Used value</a></li>
+ <li><a href="/uk/docs/Web/CSS/actual_value">Actual value</a></li>
+ <li><a href="/uk/docs/Web/CSS/resolved_value">Resolved value</a></li>
+ <li><a href="/uk/docs/Web/CSS/box_model">Box model</a></li>
+ <li><a href="/uk/docs/Web/CSS/Replaced_element">Replaced element</a></li>
+ <li><a href="/uk/docs/Web/CSS/Value_definition_syntax">Value definition syntax</a></li>
+ <li><a href="/uk/docs/Web/CSS/Shorthand_properties">Shorthand properties</a></li>
+ <li><a href="/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Mastering margin collapsing</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Visual_formatting_model">Visual formatting model</a></li>
+ <li><a href="/uk/docs/Web/CSS/Layout_mode">Layout mode</a></li>
+</ul>
+
+<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
+
+<p>Major object types:</p>
+
+<ul>
+ <li>document . <a href="/uk/docs/Web/API/Document/styleSheets">styleSheets</a></li>
+ <li>styleSheets[x] . <a href="/uk/docs/Web/API/CSSRuleList">cssRules</a></li>
+ <li>cssRules[x] . <a href="/uk/docs/Web/API/CSSRule/cssText">cssText</a> (selector &amp; style)</li>
+ <li>cssRules[x] . <a href="/uk/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
+ <li>elem . <a href="/uk/docs/Web/API/HTMLElement/style">style</a></li>
+ <li>elem . style . <a href="/uk/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li>
+ <li>elem . <a href="/uk/docs/Web/API/Element/className">className</a></li>
+ <li>elem . <a href="/uk/docs/Web/API/Element/classList">classList</a></li>
+</ul>
+
+<p>Important methods:</p>
+
+<ul>
+ <li>{{domxref("CSSStyleSheet.insertRule")}}</li>
+ <li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
+</ul>
+</div>
+</div>