Перевірка знань по темі CSS

CSS (Cascading Style Sheets) — це мова стилів, яка визначає, як HTML-елементи відображаються на сторінці.

• Встановлює кольори, шрифти, відступи, розміри блоків
• Дозволяє робити адаптивний дизайн
• Розділяє структуру (HTML) і стиль (CSS)

• Inline: всередині тегу HTML через атрибут style

  <p style="color:red;">Текст</p>

• Internal: всередині тегу <style> в HTML

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

• External: через окремий файл CSS

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

Селектори визначають, до яких елементів застосовувати стиль.

• Тегові: p { color: blue; }
• Класові: .button { padding: 10px; }
• ID: #header { background: gray; }
• Універсальний: * { margin: 0; }
• Комбіновані: div p { font-size: 14px; }
• Псевдокласи та псевдоелементи: :hover, ::before

• Клас (.class): можна застосувати до багатьох елементів
• ID (#id): унікальний для одного елемента на сторінці
• ID має вищий пріоритет у CSS (specificity)

Універсальний селектор застосовує стиль до всіх елементів на сторінці.

* { margin: 0; padding: 0; }

Зазвичай використовується для "CSS reset".

Селектор нащадків застосовує стиль до елементів, які знаходяться всередині іншого елемента.

div p { color: blue; }

Всі p всередині div стануть синіми.

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

• :hover — коли курсор миші на елементі
• :first-child — перший елемент серед братів
• Приклад:

  button:hover { background: green; }

Груповий селектор застосовує один стиль до кількох елементів.

h1, h2, h3 { margin: 0; }

Властивість color визначає, який колір буде застосовано до тексту або елемента. Найчастіше використовується для тексту, але є й інші властивості для кольору фону, рамок тощо.

Основні способи задання кольору:

• Назви: color: red;
• HEX (шістнадцятковий код): color: #FF0000;
• RGB (Red, Green, Blue): color: rgb(255, 0, 0);
• HSL (Hue, Saturation, Lightness): color: hsl(0, 100%, 50%);

• px — фіксовані пікселі
• % — відсоток від батьківського елемента
• em — від розміру шрифту батька
• rem — від розміру шрифту кореня (html)
• vw / vh — від ширини / висоти viewport (1vw = 1% ширини)

• inherit — успадковує значення від батьківського елемента
• initial — встановлює значення за замовчуванням для властивості

CSS-селектори мають “вагу” (числовий показник):

Inline (вбудований стиль) = 1000,
ID-селектор = 100,
Клас / псевдоклас / атрибут = 10,
Тег / псевдоелемент = 1,
Універсальний селектор = 0

Браузер застосовує стиль з найвищою специфічністю.

Приклад:

p { color: blue; }          /* вага = 1 */
.button { color: green; }   /* вага = 10 */
#header { color: red; }     /* вага = 100 */

Якщо <p id="header" class="button">Текст</p>, то текст буде червоним, бо ID-селектор має більшу специфічність за клас і тег.

Коментарі допомагають пояснювати код і не виконуються браузером.

/* Це коментар */

!important примусово підвищує пріоритет стилю.

p { color: red !important; }

Використовувати рідко, лише у крайніх випадках, бо порушує логіку cascade.

Властивість background дозволяє задавати колір, зображення та інші параметри одночасно:

Деталі параметрів:

lightblue — колір фону; url('image.jpg') — зображення; no-repeat — заборона повторення; center — позиція; cover — масштабування на весь елемент

І окремі властивості фонів:

background-repeat: repeat, no-repeat, repeat-x, repeat-y;
background-position: center, top right тощо;
background-size: cover, contain, px/%;
background-attachment: scroll, fixed

body {
  background: lightblue url('image.jpg') no-repeat center/cover;
}

Визначає прозорість елемента від 0 до 1.

div { opacity: 0.5; }

0 — повністю прозорий, 1 — повністю непрозорий.

Box model описує, як елемент займає місце на сторінці:

• content — вміст
• padding — внутрішній відступ — простір між контентом і рамкою
• border — рамка
• margin — зовнішній відступ — простір навколо елемента, між іншими елементами

• Reset — обнуляє всі стилі браузера (margin, padding тощо).
• Normalize.css — робить стилі більш узгодженими між браузерами, але не повністю обнуляє.

• inline — не переносить рядок, займає лише ширину контенту
• block — займає всю ширину, починається з нового рядка
• inline-block — як inline, але можна задавати ширину та висоту

CSS reset прибирає стандартні стилі браузера, щоб усі елементи виглядали однаково на різних пристроях.

* { margin: 0; padding: 0; box-sizing: border-box; }

Властивість font-family дозволяє вказати бажаний шрифт. Можна задавати кілька шрифтів через кому: якщо перший не доступний, браузер використає наступний.

p { font-family: "Arial", "Helvetica", sans-serif; }

Варто вказувати запасний "generic" шрифт: serif, sans-serif, monospace, cursive, fantasy.

Задає розмір тексту. Можна використовувати абсолютні (px) і відносні одиниці (em, rem, %, vw):

p { font-size: 16px; }
h1 { font-size: 2em; } /* у 2 рази більше за батьківський */

Для адаптивності краще використовувати em, rem, або clamp().

Відповідає за товщину шрифту. Є ключові слова та числові значення (100–900):

p { font-weight: normal; }  /* 400 */
p { font-weight: bold; }    /* 700 */
p { font-weight: 300; }     /* тонший */

Не всі шрифти підтримують усі значення — частіше працюють normal та bold.

Визначає стиль написання:

p { font-style: normal; }
p { font-style: italic; }   /* курсив */
p { font-style: oblique; }  /* нахилений текст */

italic — справжній курсив, oblique — лише нахил.

Встановлює висоту рядка тексту, впливає на відстань між рядками.

p { line-height: 1.5; } /* 150% від розміру шрифту */

Може задаватися в одиницях (px) або як множник (1.5 = 150%).

Регулює проміжки між символами:

p { letter-spacing: 2px; }
p { letter-spacing: -1px; } /* тісніше */

Може бути корисно для логотипів чи стилізації заголовків.

Перетворює регістр тексту без зміни HTML:

p { text-transform: uppercase; }  /* ВЕЛИКІ */
p { text-transform: lowercase; }  /* маленькі */
p { text-transform: capitalize; } /* Перші Літери Великі */

Керує декоративними лініями:

a { text-decoration: underline; }
del { text-decoration: line-through; }
h1 { text-decoration: overline; }

Додатково можна змінювати стиль і колір: text-decoration-style, text-decoration-color.

Вирівнює текст по горизонталі:

p { text-align: left; }
p { text-align: center; }
p { text-align: right; }
p { text-align: justify; } /* по ширині */

Застосовується до блочного контейнера, в якому є текст.

Вирівнює елементи по вертикалі в рядковому контексті (наприклад, картинка в тексті):

img { vertical-align: middle; }

Не працює для блочних елементів — для цього використовують Flexbox або Grid.

Кожен елемент у CSS складається з 4 частин:

• content – сам вміст (текст, зображення)
• padding – внутрішні відступи
• border – рамка
• margin – зовнішні відступи

[margin] → [border] → [padding] → [content]

Визначають ширину й висоту елемента:

div { width: 200px; height: 100px; }

Значення можуть бути у px, %, vw/vh, em/rem.

Обмежують розміри елементів, щоб вони не були занадто великими чи маленькими:

div { min-width: 200px; max-width: 800px; }

Корисно для адаптивної верстки.

Вказує, як відображати вміст, який виходить за межі блока:

div { overflow: visible; } /* за замовчуванням */
div { overflow: hidden; }  /* обрізає */
div { overflow: scroll; }  /* завжди показує скрол */
div { overflow: auto; }    /* скрол при потребі */

Визначає, як елемент поводиться у потоці:

display: block;        /* блочний елемент */
display: inline;       /* у рядку */
display: inline-block; /* як inline, але з шириною/висотою */
display: none;         /* приховує */

Існують й інші значення: flex, grid, inline-flex.

Визначає спосіб позиціонування елемента:

• static – стандартне розташування
• relative – зміщення від звичайної позиції
• absolute – відносно найближчого "positioned" предка
• fixed – відносно вікна браузера
• sticky – "прилипає" при скролі

Керує накладанням елементів по осі Z (вище/нижче):

.box1 { position: absolute; z-index: 1; }
.box2 { position: absolute; z-index: 10; }

Більше значення — вище в стеку. Працює тільки для позиціонованих елементів.

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

img { float: left; }  /* картинка зліва, текст обтікає справа */

clear «очищає» обтікання і переносить елемент нижче елементів з float.

div { clear: both; }  /* не дозволяє стати поряд з елементами, що мають float */

• clear: left; — прибирає обтікання зліва
• clear: right; — справа
• clear: both; — з обох боків

Сьогодні float рідко використовується для макетів — його замінили Flexbox та Grid. Але він досі корисний для картинок у тексті.

Визначає, як рахувати ширину та висоту елемента:

• content-box – width/height враховує лише контент
• border-box – width/height включає padding + border

* { box-sizing: border-box; }

Зручніше для верстки — елементи не "вилазять" за розміри.

Є кілька способів центрувати елемент по горизонталі та/або вертикалі:

• По горизонталі (margin auto):

  .box {
    width: 200px;
    margin: 0 auto;
  }

• Flexbox (по центру по обидвох осях):

  .parent {
    display: flex;
    justify-content: center; /* горизонтально */
    align-items: center;     /* вертикально */
  }

• Grid:

  .parent {
    display: grid;
    place-items: center;
  }

• Абсолютне позиціювання:

  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

Рекомендовано використовувати Flexbox або Grid для сучасних проєктів.

Flexbox (Flexible Box Layout) — це модель розташування елементів, яка спрощує створення адаптивних макетів.

container {
  display: flex;
}

Основні можливості: вирівнювання по осях, рівномірний розподіл простору, адаптивні блоки.

Задає напрямок основної осі:

flex-direction: row;        /* за замовчуванням, зліва направо */
flex-direction: row-reverse;
flex-direction: column;     /* зверху вниз */
flex-direction: column-reverse;

Вирівнює елементи по головній осі (горизонтальній або вертикальній залежно від flex-direction):

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

Вирівнює елементи по перпендикулярній осі (для row це вертикаль):

align-items: stretch;   /* за замовчуванням */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

Дозволяє елементам переноситися на новий рядок:

flex-wrap: nowrap;   /* за замовчуванням */
flex-wrap: wrap;     /* дозволяє перенос */
flex-wrap: wrap-reverse;

Керує простором між рядками, коли є кілька flex-рядків (при flex-wrap: wrap):

align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;

order змінює порядок елемента:

.item { order: 2; }

flex — коротка форма для flex-grow, flex-shrink, flex-basis:

.item { flex: 1 1 200px; }

Grid — це двовимірна система верстки (рядки + колонки).

container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

Grid дає більше контролю над розміщенням, ніж Flexbox.

Визначають кількість і розмір колонок та рядків:

grid-template-columns: 200px 1fr 2fr;
grid-template-rows: 100px auto;

Можна використовувати repeat(), minmax(), fr.

Задає відстань між елементами без використання margin:

grid-gap: 20px;
gap: 10px 30px; /* row-gap + column-gap */

Grid має властивості для вирівнювання в кожній комірці:

justify-items: start | center | end | stretch;
align-items: start | center | end | stretch;

Ці властивості вирівнюють всю сітку в контейнері:

justify-content: space-between;
align-content: center;

Дозволяє розташувати елемент на кілька рядків/колонок:

.item {
  grid-column: 1 / 3; /* займає 2 колонки */
  grid-row: 2 / 4;    /* займає 2 рядки */
}

• relative — зміщується від своєї початкової позиції
• absolute — позиціонується відносно найближчого positioned предка
• fixed — прив’язаний до вікна браузера
• sticky — прилипає при прокрутці

Визначають зміщення позиціонованого елемента:

.box {
  position: absolute;
  top: 20px;
  left: 50px;
}

Працюють тільки якщо position ≠ static.

Обрізає елемент за заданою формою:

div {
  clip-path: circle(50%);
}

Можна робити круглі аватарки, складні фігури.

Визначає, як медіа вміщується в контейнер:

img { object-fit: cover; }
img { object-fit: contain; }

• cover — заповнює контейнер, обрізаючи
• contain — повністю вміщується, може бути з полями
• fill — розтягує

Визначає вирівнювання зображення/відео в контейнері:

img {
  object-fit: cover;
  object-position: top center;
}

• Flexbox — одномірний (працює по рядку або колонці).
• Grid — двомірний (рядки + колонки).
• Flexbox краще для дрібних компонентів, Grid — для загальної структури сторінки.

Дозволяє користувачу змінювати розмір елемента: none, both, horizontal, vertical.

transition додає плавність при зміні властивостей.

button {
  transition: background 0.3s ease, transform 0.2s;
}
button:hover {
  background: red;
  transform: scale(1.1);
}

• transition-property — які властивості анімувати
• transition-duration — час анімації
• transition-timing-function — крива швидкості (ease, linear, ease-in-out, cubic-bezier)
• transition-delay — затримка

animation дозволяє створювати багатокадрові анімації з ключовими кадрами.

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
div {
  animation: pulse 2s infinite;
}

• animation-name — назва keyframes
• animation-duration — тривалість
• animation-timing-function — тип анімації
• animation-delay — затримка
• animation-iteration-count — кількість повторів (число | infinite)
• animation-direction — напрям (normal, reverse, alternate)
• animation-fill-mode — як застосовуються стилі до/після
• animation-play-state — running | paused

• transition — запускається при зміні стану (hover, click).
• animation — може працювати без тригера, циклічно.

Дозволяє змінювати вигляд елементів (переміщати, масштабувати, обертати).

div {
  transform: translate(50px, 20px) rotate(15deg) scale(1.2);
}

Задає точку, відносно якої виконується трансформація:

transform-origin: center; 
transform-origin: top left;
transform-origin: 50% 100%;

Псевдокласи описують особливий стан елемента.

a:hover { color: red; }
input:focus { border-color: blue; }
p:first-child { font-weight: bold; }

• :hover — при наведенні
• :focus — при фокусі
• :active — під час кліку
• :first-child, :last-child
• :nth-child(n) — вибір елементів за порядком
• :not() — виняток
• :checked — вибраний чекбокс/радіо

Псевдоелементи створюють віртуальні елементи, яких немає в HTML.

p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
div::before { content: "★ "; }
div::after { content: " ✔"; }

• Псевдокласи описують стан існуючого елемента.
• Псевдоелементи створюють віртуальну частину елемента.

a:hover {}   /* псевдоклас */
p::before {} /* псевдоелемент */

Додають вміст до або після елемента (через content).

button::before { content: "👉 "; }
button::after { content: " ✅"; }

Обов’язкова властивість для ::before і ::after. Вміст може бути:

• рядок: content: "Hello";
• порожній: content: "";
• url-зображення: content: url(icon.png);

Ключові кадри визначають етапи анімації:

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

Користувацька функція швидкості для transition/animation.

transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);

Дозволяє створювати «пружність», «сповільнення» тощо.

Через transition-delay або animation-delay.

div {
  animation: fade 1s;
  animation-delay: 2s;
}

animation-iteration-count: infinite; означає, що анімація повторюється безкінечно.

div { animation: spin 3s infinite linear; }

Керується властивістю animation-play-state:

div:hover {
  animation-play-state: paused;
}

Вказує браузеру, які властивості можуть змінюватися, щоб оптимізувати рендеринг.

div {
  will-change: transform, opacity;
}

Використовується для плавніших анімацій, але не варто застосовувати без потреби (може навантажувати пам’ять).

Через @keyframes та animation можна створити рух тексту.

.marquee {
  white-space: nowrap;
  overflow: hidden;
}
.marquee span {
  display: inline-block;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

CSS-змінні зберігають значення для повторного використання.

:root {
  --main-color: #3498db;
}
button {
  color: var(--main-color);
}

Змінні наслідуються і можуть бути перевизначені в межах елемента.

.dark {
  --main-color: #fff;
}

Застосовує фільтри до фону позаду елемента.

.glass {
  backdrop-filter: blur(10px);
}

Дозволяє виконувати обчислення прямо у стилях.

div { width: calc(100% - 50px); }

Задає значення між мінімумом і максимумом.

font-size: clamp(14px, 2vw, 24px);

Повертають найменше або найбільше значення.

width: min(50%, 400px);
height: max(100px, 10vh);

Дозволяє застосовувати стилі тільки якщо браузер підтримує властивість.

@supports (display: grid) {
  div { display: grid; }
}

Медіа завантажуються тільки коли з’являються у viewport.

<img src="photo.jpg" loading="lazy" alt="Фото">
<iframe src="video.mp4" loading="lazy"></iframe>

Властивості, що враховують напрямок письма (LTR/RTL).

margin-inline-start: 20px; /* замість margin-left */
padding-block-end: 10px;  /* замість padding-bottom */

Медіа-запит для темної/світлої теми.

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

Медіа-запит для користувачів, які відключають анімації.

@media (prefers-reduced-motion: reduce) {
  * { animation: none; transition: none; }
}

Дозволяють застосовувати стилі для різних розмірів екранів.

@media (max-width: 768px) {
  body { font-size: 14px; }
}

Спочатку пишуться стилі для мобільних пристроїв, а потім додаються стилі для більших екранів через min-width.

Налаштовує відображення сторінки на мобільних.

<meta name="viewport" content="width=device-width, initial-scale=1">

• em — відносно розміру шрифту батька
• rem — відносно кореневого шрифту
• vw — 1% ширини вікна
• vh — 1% висоти вікна

• Мінімізувати файли (minify)
• Видаляти невикористані стилі (purgecss)
• Об’єднувати селектори
• Зменшувати вкладеність
• Використовувати сучасні властивості замість хаків

Це стилі, потрібні для першого екрану. Їх вставляють прямо в <head>, решта підвантажується асинхронно.

Техніка, коли великі зображення фону завантажуються тільки при потребі.

.bg {
  background: none;
}
.bg[data-loaded="true"] {
  background-image: url("large.jpg");
}

document.documentElement
  .style.setProperty("--main-color", "tomato");

Адаптивність не тільки по вікну браузера, а по контейнеру.

@container (min-width: 500px) {
  .card { display: flex; }
}