CSS – Посібник: Все, що потрібно знати про CSS за 5 хвилин

Кодування — це не лише теорія; в основному, це практика. Однак перед тим, як зануритися у світ кодування, я хочу дати вам швидкий курс по — CSS, або (Cascading Style Sheets).

У цьому 5-хвилинному посібнику ми покриємо все, що вам потрібно знати про CSS: від того, що це таке, до того, як він допомагає стилізувати веб-сторінки. Тож, давайте почнемо!

Що таке CSS?

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

3 способи написання CSS

Існує три способи написати CSS:

1. Вбудований: Ви можете додати CSS безпосередньо до елемента HTML за допомогою атрибута style.

<p style="color:blue;">Цей текст синій!</p>

1. Вбудований у документ: Ви можете вставити CSS у HTML-документ за допомогою тега <style>.

<style>
  p { color: red; }
</style>

1. Зовнішній: Ви можете підключити зовнішній CSS-файл до вашого HTML-документу за допомогою тега <link>.

<link rel="stylesheet" href="styles.css">

p { color: red; }
body { font-family: "montserrat", font-size: large; }

Селектори

У зовнішньому та вбудованому CSS ви використовуєте так звані селектори, щоб визначити, які елементи стилізувати. Існує п’ять типів селекторів:

1. Селектор елементів: Стилізує всі елементи HTML з конкретним тегом.
   
p {
color: blue;
}

2. Селектор класу: Стилізує HTML-елементи з конкретним атрибутом класу.
   
.example {
font-size: 18px;
}

3. Селектор ID: Стилізує HTML-елемент з конкретним атрибутом ID.
   
#header {
background-color: #333;
}

   4. Універсальний селектор: Стилізує всі елементи HTML.
   
* {
box-sizing: border-box;
}

   5. Псевдоселектор: Стилізує елемент залежно від його стану (наприклад, hover, focus).
   ```
   a:hover {
   color: red;
   }

input:focus {
background-color: blue;
font-size: 20px;
}
```

Бали специфічності

Що відбувається, коли два правила CSS намагаються стилізувати один і той самий елемент? Ось тут і вступає в гру бал специфічності. Він визначає, яке правило має перевагу.

Бал специфічності обчислюється залежно від типу селектора:

1. Вбудовані стилі: 1000
2. Селектори ID: 100
3. Селектори класу: 10
4. Селектори елементів: 1

Все просто: чим вищий бал специфічності, тим вищий пріоритет має відповідне CSS-правило. Стиль з вищим балом специфічності переписує стиль з нижчим балом.

Деякі порівняння специфічності:
1. вбудований CSS > внутрішній CSS > зовнішній CSS
2. # > . > елемент > *
3. дочірній елемент > батьківський елемент.

Модель блоку (Box Model)

Модель блоку — це основоположне поняття в CSS, яке допомагає зрозуміти, як елементи відображаються на веб-сторінці. Вона складається з:
- Контент
- Відступи (Padding)
- Межі (Border)
- Поля (Margin)

div {
  width: 300px;
  height: 100px;
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #000;
  margin: 10px;
}

Основні одиниці вимірювання

Ось деякі ключові одиниці вимірювання в CSS:

1. px: Пікселі (абсолютне вимірювання)
2. %: Відсотки (відносне вимірювання)
3. rem: Root em (відносне вимірювання)
4. em: Em (відносне вимірювання)

Додатково ви можете використовувати абсолютні та відносні одиниці, як-от in, cm, mm тощо.

CSS-обчислення

В CSS ви можете поєднувати два значення, використовуючи оператор +.

Наприклад:

div {
width: calc(50% + 5px);
height: calc(32px + 2rem);
}


Позиціонування в CSS

Властивість position визначає тип методу позиціонування елемента (статичне, відносне, фіксоване, абсолютне або липке).
1. static: Стандартна схема позиціонування.

div {  
 position: static;  
}

1. relative: Позиціонує елемент відносно його звичайного положення.

div {  
 position: relative;  
 top: 10px; /* переміщає div на 10px від його початкового положення */  
}

1. fixed: Виводить елемент із звичайного потоку документа та позиціонує його в певному місці на сторінці.

div {  
 position: fixed;  
 top: 0; /* розміщує div вгорі сторінки */  
}

1. absolute: Позиціонує елемент абсолютно, виводячи його з нормального потоку документа.

div {  
 position: absolute;  
 left: 10px; /* переміщає div на 10px вліво */  
}

1. sticky: Поєднує фіксоване та відносне позиціонування. Елемент залишається на своєму звичайному місці, поки не досягне певної точки, після чого стає фіксованим.

div {  
 position: sticky;  
 top: 0; /* тримає div вгорі сторінки */  
}

CSS вимірювання
В CSS вимірювання можуть бути абсолютними або відносними. Абсолютні одиниці, такі як пікселі (px), є фіксованими значеннями, що залишаються незмінними незалежно від контексту елемента. З іншого боку, відносні одиниці, такі як відсотки (%), ем (em) та рем (rem), розраховують своє значення залежно від розміру шрифта чи ширини батьківського елемента.

Давайте розглянемо кожну одиницю вимірювання:

• Пікселі (px): Фіксована одиниця вимірювання, що дорівнює точці на комп'ютерному моніторі. Приклад: width: 200px; Це встановлює ширину елемента на 200 пікселів.
• Відсотки (%): Відносне вимірювання, яке обчислює своє значення залежно від розміру шрифта чи ширини батьківського елемента. Приклад: font-size: 18%; Це встановлює розмір шрифта на 18% від розміру шрифта батьківського елемента.
• Еми (em): Відносна одиниця, що вимірює розмір шрифта, де 1 em дорівнює розміру шрифта батьківського елемента. Приклад: font-size: 2em; Це встановлює розмір шрифта в два рази більший за розмір шрифта батьківського елемента.
• Реми (rem): Схоже на em, але з фіксованим значенням кореня 16px. Приклад: font-size: 1.5rem; Це встановлює розмір шрифта на 24px (1,5 рази більше за стандартний розмір шрифта).

Псевдоселектори

Псевдоселектори допомагають вам змінювати стилі елемента залежно від його стану в HTML.

li:hover {  
 background-color: #ccc;  
}

Цей код змінює колір фону елемента <li>, коли на нього наводять курсор. Деякі поширені псевдоселектори:

1. :hover
2. :focus
3. :active
4. :nth-child()

Псевдоелементи

Псевдоелементи дозволяють стилізувати частини елемента HTML, наприклад його вміст чи коробку.

banner::after {  
 content: "Copyright 2025";  
}

Цей код додає псевдоелемент після елемента <banner> з текстом "Copyright 2025".

Ось і все! Це лише коротке введення в CSS. Для більш детальної документації звертайтесь до W3Schools.

Цей блог є частиною більшої серії "Оволодіння MERN у 2025 році", де я розглядаю все, що потрібно знати про створення сучасних веб-застосунків за допомогою MERN (MongoDB, Express, React, Node.js).

Перекладено з: CSS -Tutorial: All You Need to Know About CSS in 5 mins