---
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>