CSS

Що таке CSS

CSS це абревіатура від Cascading Style Sheets і перекладається з англійської як каскадні аркуші або таблиці стилів. Що це за листи і чому вони каскадні, дізнаємося вже дуже скоро, а поки що варто згадати витоки виникнення.

Принцип закладений у CSS зародився вже як півстоліття тому, але у своєму сучасному вигляді ця технологія сформувалася в 1994-95 роках, на зорі появи організації W3C, яка займається стандартизацією багатьох технологій, що використовуються при створенні сайтів.

Тепер розберемо і розшифруємо термін CSS по шматочках. Чому стилі? CSS це мова стилізації веб-сторінок і використовується для оформлення візуальної складової сайтів. Коли ви відкриваєте в браузері будь-який сучасний веб-сайт, то, що ви бачите оформлено за допомогою CSS, іншими словами, ця технологія дозволяє створити стиль сайту: кольори, шрифти, розташування блоків інформації, різні візуальні ефекти і т.д.

Чому аркуші чи таблиці стилів? Справа в тому, що CSS це не мова програмування в ньому не описується логіка, а його код виглядає як список певних конструкцій і нагадує статичні табличні дані.

Чому каскадні аркуші стилів? Каскадні тому, що стиль того самого елемента може формуватися з різних джерел, за певним пріоритетом.

Можливості CSS

CSS поряд з HTML та JavaScript, це одна з базових складових будь-якого веб-сайту. За великим рахунком, щоб створити сайт вам потрібен лише HTML та CSS. Тому, будь-який веб-розробник починає свою кар’єру з вивченням цих технологій.

На даний момент рівень розвитку CSS і широка підтримка браузерами відкриває майже безмежні можливості для стилізації сайтів та веб-додатків.

Як я згадував вище CSS це не мова програмування, але все ж таки в ньому можна побудувати певного типу прості логічні конструкції. Наприклад, можна використовувати різні стилі в залежності від роздільної здатності екрана користувача. На цьому, до речі, і ґрунтується принцип адаптивного дизайну або адаптивної верстки. Також можна підрахувати, наприклад, висоту блоку, використовуючи прості операції, але складні математичні розрахунки CSS не дозволить провести.

Синтаксис CSS

Листи або таблиці стилів складаються з набору записів або правил, які можуть бути не пов’язані і не взаємодіють між собою безпосередньо, але їхня дія може перекриватися на цільовому елементі.

Кожен запис або правило завжди має фіксовану структуру, а саме складається з наступних елементів:

selector { property: value; }

selector визначає правило, яким дана запис прив’язується до кінцевого HTML елементу. За ним, укладені у фігурні дужки один або кілька, розділені між собою крапкою з комою, наборами property та value. property – це назва властивості елемента вибраного за допомогою селектора, а value – його значення.

Наприклад, у наступному записі задається гарнітура шрифту для всієї веб-сторінки:

body {
    font-family: Arial, sans-serif;
}

Один і той же елемент на сторінці можна вибрати декількома селекторами і задати різні набори властивостей та значень, і всі правила будуть застосовуватися до цього елемента. Якщо деякі властивості перекриватимуть один одного, то застосовується значення властивості з пріоритетним селектором. У цьому вся суть каскадування. Іноді після value використовується “!important” це підвищить пріоритет цієї властивості.

Технологія CSS розробляється не один десяток років і на сьогоднішній день все ще не досягла кінця свого розвитку. Додаються нові можливості та властивості. На даний момент активно використовується CSS3 і вже незабаром з’явиться стандарт CSS4, який надасть веб-розробникам нові інструменти для створення сайтів.