1 files changed, 92 insertions, 0 deletions
diff --git a/files/uk/web/css/index.html b/files/uk/web/css/index.html
new file mode 100644
index 0000000000..50e7a47f9c
--- /dev/null
+++ b/files/uk/web/css/index.html
@@ -0,0 +1,92 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - CSS3
+  - Layout
+  - Reference
+  - Веб
+  - Дизайн
+  - Стиль
+  - ЦСС
+  - каскадна
+  - оформлення
+  - сайтів
+  - сторінок
+  - таблиця
+translation_of: Web/CSS
+---
+<p><span class="seoSummary"><strong>Каскадні таблиці стилів</strong> (<strong>CSS</strong>) - це мова стилів, яка використовується для опису представлення документу, написаного на <a href="/uk/docs/Web/HTML" title="HyperText Markup Language">HTML</a></span> чи <a href="/uk/docs/XML">XML</a> (включаючи XML діалекти такі, як <a href="/uk/docs/SVG">SVG</a> або <a href="/uk/docs/XHTML">XHTML</a>). CSS описує як елементи повинні відображатися на екрані, на папері, при озвученні, або на інших пристроях.</p>
+
+<p>CSS є одною з основних мов <em>відкритої мережі</em> і має стандартизовану <a class="external" href="http://w3.org/Style/CSS/#specs">W3C специфікацію</a>. Розроблена по рівнях, CSS1 в даний час застаріла, CSS2.1 є рекомендованою, і CSS3, яка тепер розділена на більш дрібні модулі та розвивається шляхом стандартизації.</p>
+
+<section id="sect1">
+<ul class="card-grid">
+ <li><span>CSS Посилання</span>
+
+  <p><a href="/uk/docs/Web/CSS/Reference">Ексклюзивні посилання</a> для загартованих Web розробників, які описують кожний параметр і поняття CSS.</p>
+ </li>
+ <li><span>CSS Посібник</span>
+  <p>Наша <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS сфера навчання</a> складається з безлічі посібників, щоб підняти ваш рівень з початкового, до такого, на якому ви будете себе комфортно почувати в CSS, охоплюючи всі основні принципи.</p>
+ </li>
+ <li><span>Знайомство з CSS</span>
+  <p>Якщо ви початківець у веб програмуванні, переконайтеся, що ви прочитали нашу статтю <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS Основи</a>, щоб дізнатися що таке є CSS і як їх використовувати.</p>
+ </li>
+</ul>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 id="Посібники">Посібники</h2>
+
+<p>Наша <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS сфера навчання</a> має декілька модулів, які дозволяють вивчити CSS з нуля — знання мови не вимагається.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ в CSS</a></dt>
+ <dd>Цей модуль дозволяє вам почати вивчення з базових понять як CSS працює, включаючи селектори і параметри, написання правил CSS, застосування CSS до HTML, як вказати довжину, колір та інші одиниці виміру в CSS, каскади і успадкування, основи блочної моделі та відлагоджування CSS.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text">Стилізація тексту</a></dt>
+ <dd>В даному модулі ми розглянемо основи стилізації тексту, включаючи налаштування шрифтів, товщини, курсиву, відстані між рядками і буквами, а також застосування тіней та інших можливостей стилізації тексту. Ми розглянемо в даному модулі використання власних шрифтів на вашій веб-сторінці, і стилізацію списків і посилань.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes">Стилізація блоків</a></dt>
+ <dd>Далі ми розглянемо стилізацію блоків, один з базових кроків у напрямку розбивання веб-сторінки на блоки. У данаму модулі ми підсумуємо блокову модель і тоді розглянемо методи контролю блоків, застосовуючи внутрішні відступи (padding), рамки (borders) і зовнішні відступи, застосування власних заливок фону, картинок та інших можливостей, і такої можливості, як падіння тіней і фільтрів на блоках.</dd>
+ <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout">Макети CSS</a></dt>
+ <dd>До цього моменту ми вже розглянули базові поняття CSS, як стилізувати текст, я як стилізувати і маніпулювати блоками, щоб ваш контент поміщався в середину даних блоків. Тепер час розглянути розташування ваших блоків у правильному місці, по відношенню до точки огляду, і відносно один одного. Ми розкрили необхідні передумови, тому тепер ми можемо заглибитися в шаблони CSS детальніше, подивитися на налаштування для різних дисплеїв, традиційні методи шаблонів, включаючи плавання елементів по сторінці (float) і позиціонування (positioning), і нові сучасні інструменти для шаблонів такі, як флексбокс (flexbox).</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 id="Посилання">Посилання</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">CSS Посилання</a>: Вичерпний довідник для досвідчених веб-розробників, який описує кожний параметр і кожне поняття CSS.</li>
+ <li>CSS ключові поняття:
+  <ul>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Syntax">Синтаксис і форми даної мови</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Specificity">Особливість</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/inheritance">успадкування</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/box_model">Блочна модель</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/margin_collapsing">margin collapse</a></li>
+   <li>Контексти <a href="https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="The stacking context">stacking</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/block_formatting_context" title="block formatting context">форматування блоку</a></li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/initial_value">Початкові</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/computed_value">обчислені</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/actual_value">фактичні</a> і <a href="https://developer.mozilla.org/en-US/docs/CSS/used_value">ті, які використовуються</a> значення</li>
+   <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Shorthand_properties">CSS скорочені параметри</a></li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Інструменти_для_CSS_розробки">Інструменти для CSS розробки</h2>
+
+<ul>
+ <li><a href="http://jigsaw.w3.org/css-validator/">W3C CSS Сервіс Валідації</a> перевіряє чи CSS є валідним. Даний сервіс на <a href="http://www.onlinewebcheck.com/">OnlineWebCheck.com</a> робить те ж саме. Це безцінні інструменти розробки.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox інструменти розробки</a> дозволяють переглядати і редагувати наживо CSS на сторінці за допомогою <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Iнспектора</a> і інструментів <a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor">Редагування Стилів</a>.</li>
+ <li><a href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug розширення</a> для Firefox, це популярне розширення, яке дозволяє наживо редагувати CSS на переглянутих сайтах. Дуже практично тестувати деякі зміни, хоча це розширення робить набагато більше.</li>
+ <li><a href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer розширення</a> для Firefox також дозволяє переглядати і наживо редагувати CSS на переглянутих сайтах. Простіше ніж Firebug, хоча й має менше можливостей.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Tools">Miscellaneous CSS інструменти.</a></li>
+</ul>
+</div>
+</div>
+</section>
+
+<h2 id="Дивитися_також">Дивитися також</h2>
+
+<ul>
+ <li>Mozilla's <a href="/uk/Learn/CSS">Розділ вивчення CSS</a></li>
+ <li>Веб мови CSS часто застосовуються до: <a href="/uk/docs/HTML">HTML</a>, <a href="/uk/docs/SVG">SVG</a>, <a href="/uk/docs/XHTML">XHTML</a> і <a href="/uk/docs/XML">XML</a>.</li>
+ <li>Технології Mozilla, які широко використовують CSS: <a href="/uk/docs/Mozilla/Tech/XUL">XUL</a>, <a href="/uk/Firefox">Firefox</a>, і <a href="/uk/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/uk/docs/Extensions">розширення</a> і <a href="/uk/Add-ons/Themes">теми</a>.</li>
+</ul>