100 запитань та відповідей по темі:

CSS — Шпаргалка

▸ 1. Що таке CSS і навіщо він потрібен?

CSS (Cascading Style Sheets) — мова стилів для опису зовнішнього вигляду HTML-елементів: кольори, шрифти, відступи, позиціонування тощо.

▸ 2. Які є способи підключення CSS до HTML?
  • Inline: <h1 style="color:red">Текст</h1>
  • Internal: <style>h1 {color:red;}</style> у <head>
  • External: <link rel="stylesheet" href="style.css">
▸ 3. Що таке селектори в CSS?

Селектори визначають, до яких HTML-елементів застосовувати стиль: по тегу, класу, id або атрибуту.

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

CSS застосовує стилі за пріоритетом: Inline > Internal > External; також враховується специфічність селекторів.

▸ 6. Як працює специфічність CSS?

Специфічність визначає, який стиль переважатиме при конфлікті. Враховується тип селектора (id > клас > тег) і порядок у коді.

▸ 7. Що таке псевдокласи і псевдоелементи?
  • Псевдокласи: :hover, :focus — стиль для стану елемента
  • Псевдоелементи: ::before, ::after — створюють віртуальні елементи
▸ 8. Що таке властивості кольору в CSS?

Можна задавати кольори через назви, HEX, RGB, RGBA, HSL, HSLA:

  • color: red;
  • color: #ff0000;
  • color: rgb(255,0,0);
  • color: rgba(255,0,0,0.5);
  • color: hsl(0, 100%, 50%);
▸ 9. Що таке шрифти і як їх задавати?

Через властивості font-family, font-size, font-weight, font-style.

▸ 10. Як працюють відступи і поля (margin, padding)?

margin — зовнішній відступ, padding — внутрішній відступ елемента.

▸ 11. Що таке border і які його властивості?

Межа елемента: border-width, border-style, border-color. Можна задавати окремо або скорочено: border: 1px solid black;.

▸ 12. Як працює display?

Контролює, як елемент відображається:

  • block — блочний елемент
  • inline — вбудований елемент
  • inline-block — як inline, але з блоковими властивостями
  • none — приховати елемент
▸ 13. Що таке position і типи позиціонування?

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

  • static — за замовчуванням
  • relative — відносно звичайного місця
  • absolute — відносно найближчого позиційованого предка
  • fixed — фіксовано на екрані
  • sticky — прилипає під час прокрутки
▸ 14. Як працює float і clear?

float переміщує елемент вліво/вправо, clear зупиняє обтікання попередніх елементів.

▸ 15. Що таке flexbox і його основні властивості?

Flexbox — сучасний метод верстки:

  • display: flex
  • justify-content, align-items, align-content
  • flex-direction, flex-wrap
▸ 16. Що таке grid і його базові властивості?

CSS Grid дозволяє створювати двовимірні макети:

  • display: grid
  • grid-template-columns, grid-template-rows
  • grid-gap, grid-area
▸ 17. Що таке z-index?

Контролює порядок нашарування елементів. Вищий z-index знаходиться поверх елементів з меншим значенням.

▸ 18. Як працює opacity?

Визначає прозорість елемента: opacity: 0.5; робить елемент напівпрозорим.

▸ 19. Що таке transitions і як їх використовувати?

Додають плавні анімації при зміні властивостей:

transition: all 0.3s ease;
▸ 20. Що таке transform і основні функції?

Дозволяє змінювати елемент: translate, rotate, scale, skew.

▸ 21. Що таке animation і як її використовувати?

CSS-анімації дозволяють створювати складні ефекти за допомогою @keyframes та властивості animation.

▸ 22. Що таке @keyframes?

Визначає ключові кадри анімації, наприклад:

@keyframes slide { from {left:0;} to {left:100px;} }
▸ 23. Що таке box-sizing?

Визначає, як обчислюються ширина і висота елемента: content-box або border-box.

▸ 24. Що таке pseudo-elements ::before і ::after?

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

▸ 25. Як працюють медіа-запити (media queries)?

Дозволяють адаптувати стиль під різні пристрої:

@media (max-width: 768px) { body { font-size: 14px; } }
▸ 26. Що таке viewport і як він впливає на CSS?

Viewport — видима область браузера. Через медіа-запити і відносні одиниці стилі підлаштовуються під розмір екрану.

▸ 27. Що таке flex-wrap?

Властивість flex-wrap визначає, чи будуть елементи flex-контейнера переноситися на новий рядок.

▸ 28. Що таке justify-content?

Вирівнює елементи по головній осі flex-контейнера (start, center, space-between тощо).

▸ 29. Що таке align-items?

Вирівнює елементи по поперечній осі flex-контейнера (stretch, center, flex-start, flex-end).

▸ 30. Що таке min-width і max-width?

Обмежують мінімальну та максимальну ширину елемента, щоб він не виходив за рамки.

▸ 31. Що таке min-height і max-height?

Обмежують мінімальну та максимальну висоту елемента.

▸ 32. Що таке overflow і які значення він має?
  • visible — контент виходить за межі
  • hidden — обрізає зайве
  • scroll — додає скролл
  • auto — скролл, якщо потрібно
▸ 33. Що таке clip-path?

Властивість для обрізки елемента за формою (circle, polygon, inset тощо).

▸ 34. Що таке gradients?

Градієнти для фону: linear-gradient, radial-gradient, conic-gradient.

▸ 35. Що таке background-size?

Контролює розмір фонового зображення: cover, contain, конкретні значення px/%.

▸ 36. Що таке background-position?

Визначає позицію фонового зображення: top, center, bottom, left, right, або %/px.

▸ 37. Що таке box-shadow?

Додає тінь до елемента: box-shadow: 5px 5px 10px rgba(0,0,0,0.5);

▸ 38. Що таке text-shadow?

Додає тінь до тексту: text-shadow: 2px 2px 5px gray;

▸ 39. Що таке word-wrap і overflow-wrap?

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

▸ 40. Що таке white-space?

Визначає, як обробляються пробіли та перенос рядків: normal, nowrap, pre, pre-wrap, pre-line.

▸ 41. Що таке text-align?

Вирівнює текст по горизонталі: left, right, center, justify.

▸ 42. Що таке vertical-align?

Вирівнює inline або table-cell елементи по вертикалі: baseline, top, middle, bottom.

▸ 43. Що таке list-style?

Визначає стиль маркерів у списках: list-style-type, list-style-image, list-style-position.

▸ 44. Що таке cursor?

Змінює вигляд курсора: pointer, default, text, move, wait тощо.

▸ 45. Що таке pointer-events?

Контролює, чи реагує елемент на події миші: none або auto.

▸ 46. Що таке overflow-x та overflow-y?

Окремо контролюють горизонтальний та вертикальний скролл.

▸ 47. Що таке clip?

Старий спосіб обрізки елемента за прямокутником (deprecated, замінено на clip-path).

▸ 48. Що таке filter?

Додає ефекти до елементів: blur, brightness, contrast, grayscale, hue-rotate тощо.

▸ 49. Що таке transition-delay?

Задає затримку перед початком CSS-переходу.

▸ 50. Що таке transition-duration?

Визначає тривалість CSS-переходу.

▸ 51. Що таке transition-timing-function?

Визначає криву прискорення анімації: linear, ease, ease-in, ease-out, cubic-bezier.

▸ 52. Що таке overflow-wrap: break-word?

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

▸ 53. Що таке word-break?

Контролює перенесення слів: normal, break-all, keep-all.

▸ 54. Що таке object-fit?

Визначає, як зображення/відео вписується у контейнер: fill, contain, cover, none, scale-down.

▸ 55. Що таке object-position?

Визначає позицію зображення/відео всередині контейнера, якщо object-fit не cover/fill.

▸ 56. Що таке overflow: clip?

Обрізає зайвий контент без скролу, аналог hidden, але сучасніше.

▸ 57. Що таке resize?

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

▸ 58. Що таке list-style-position?

Визначає позицію маркера списку: inside або outside.

▸ 59. Що таке list-style-image?

Задає власне зображення маркера списку.

▸ 60. Що таке word-spacing?

Визначає відстань між словами у тексті.

▸ 61. Що таке letter-spacing?

Визначає відстань між літерами у тексті.

▸ 62. Що таке line-height?

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

▸ 63. Що таке max-lines і line-clamp?

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

▸ 64. Що таке text-overflow?

Контролює обрізання тексту всередині блоку: clip, ellipsis.

▸ 65. Що таке text-decoration?

Додає підкреслення, лінії зверху або крізь текст: underline, overline, line-through.

▸ 66. Що таке text-transform?

Контролює регістр тексту: uppercase, lowercase, capitalize, none.

▸ 67. Що таке writing-mode?

Задає напрямок письма: horizontal-tb, vertical-rl, vertical-lr.

▸ 68. Що таке direction?

Визначає напрям тексту: ltr (left-to-right) або rtl (right-to-left).

▸ 69. Що таке user-select?

Контролює можливість виділення тексту: auto, none, text, all.

▸ 70. Що таке visibility?

Контролює видимість елемента: visible, hidden, collapse.

▸ 71. Що таке opacity?

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

▸ 72. Що таке z-index?

Визначає порядок накладання елементів по осі Z (верхній/нижній шар).

▸ 73. Що таке position?

Визначає метод позиціонування: static, relative, absolute, fixed, sticky.

▸ 74. Що таке top, right, bottom, left?

Задають відступи від відповідних сторін контейнера для позиціонованого елемента.

▸ 75. Що таке float?

Використовується для обтікання елементами (left, right, none), рідко потрібен у сучасному дизайні.

▸ 76. Що таке clear?

Визначає, як елементи після плаваючих блоків будуть розташовані: none, left, right, both.

▸ 77. Що таке clip-path: circle()?

Обрізає елемент по колу, наприклад: clip-path: circle(50% at 50% 50%);

▸ 78. Що таке filter: blur()?

Розмиває елемент: filter: blur(5px);

▸ 79. Що таке backdrop-filter?

Додає фільтри до елементів, що знаходяться позаду (розмиття, контраст, яскравість).

▸ 80. Що таке clip-path: polygon()?

Обрізає елемент за багатокутником, наприклад: clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

▸ 81. Що таке perspective?

Додає ефект перспективи для 3D-трансформацій: perspective: 1000px;

▸ 82. Що таке transform?

Дозволяє переміщення, обертання, масштабування та нахил елементів: translate, rotate, scale, skew.

▸ 83. Що таке transform-origin?

Визначає точку, від якої застосовується трансформація: center, top, left, right, bottom або px/%.

▸ 84. Що таке backface-visibility?

Визначає, чи видно "задню" сторону елемента під час 3D-поворотів: visible або hidden.

▸ 85. Що таке perspective-origin?

Визначає точку зору для перспективи: center, top, bottom, left, right або %/px.

▸ 86. Що таке grid-template-columns?

Визначає кількість і ширину колонок у CSS Grid: repeat(3, 1fr), 200px auto тощо.

▸ 87. Що таке grid-template-rows?

Визначає кількість і висоту рядків у CSS Grid.

▸ 88. Що таке grid-gap / gap?

Визначає відстань між рядками і колонками у CSS Grid та Flexbox.

▸ 89. Що таке justify-items?

Вирівнює елементи всередині осередків CSS Grid по горизонталі.

▸ 90. Що таке align-items (Grid)?

Вирівнює елементи всередині осередків CSS Grid по вертикалі.

▸ 91. Що таке place-items?

Скорочення для одночасного визначення align-items та justify-items у Grid.

▸ 92. Що таке grid-auto-flow?

Визначає порядок розміщення елементів у Grid: row, column, dense.

▸ 93. Що таке grid-column / grid-row?

Визначає позицію та розмір елемента у CSS Grid по колонках та рядках.

▸ 94. Що таке grid-area?

Визначає позицію та розмір елемента у Grid, об’єднуючи grid-row та grid-column.

▸ 95. Що таке place-content?

Вирівнює весь вміст Grid контейнера: скорочення для align-content + justify-content.

▸ 96. Що таке place-self?

Вирівнює окремий елемент Grid по вертикалі та горизонталі: скорочення для align-self + justify-self.

▸ 97. Що таке object-fit: cover?

Зображення або відео заповнює контейнер, обрізаючи зайве, зберігаючи пропорції.

▸ 98. Що таке object-fit: contain?

Зображення або відео поміщається всередину контейнера без обрізання, зберігаючи пропорції.

▸ 99. Що таке transition-property?

Визначає, які властивості елемента будуть анімовані при зміні: all, opacity, transform тощо.

▸ 100. Що таке will-change?

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

▸ 1. Що таке CSS?

CSS (Cascading Style Sheets) — мова для опису стилів HTML-документів.

▸ 2. Як підключити CSS до HTML?

За допомогою <link rel="stylesheet" href="style.css"> у <head>.

▸ 3. Що таке inline-стилі?

CSS, що записується прямо в атрибут style елемента.

▸ 4. Що таке internal CSS?

Стилі всередині тегу <style> у HTML.

▸ 5. Що таке external CSS?

Окремий файл зі стилями, підключений через <link>.

▸ 6. Що таке селектор у CSS?

Частина CSS, яка визначає, до яких елементів застосовувати стилі.

▸ 7. Що таке властивість у CSS?

Атрибут стилю, який змінює вигляд елемента (наприклад, color).

▸ 8. Як задати колір у CSS?

За допомогою властивості color або background-color.

▸ 9. Які є формати задання кольорів?

Назви, HEX, RGB, RGBA, HSL, HSLA.

▸ 10. Що таке одиниці виміру у CSS?

px, em, rem, %, vh, vw тощо.

▸ 11. Що таке абсолютні та відносні одиниці?

Абсолютні (px) — фіксовані, відносні (em, rem, %) — залежать від контексту.

▸ 12. Що таке клас у CSS?

Селектор, що починається з . (наприклад, .btn).

▸ 13. Що таке id у CSS?

Селектор з # (наприклад, #header).

▸ 14. Що таке універсальний селектор?

* — вибирає всі елементи.

▸ 15. Що таке селектор тегу?

Застосовує стилі до всіх елементів конкретного тегу (наприклад, p).

▸ 16. Що таке групування селекторів?

Кілька селекторів через кому (h1, h2, h3 { color: red; }).

▸ 17. Що таке комбінатори селекторів?

Селектори для відносин: нащадок, дитина, сусід, брат.

▸ 18. Що таке псевдоклас?

Селектор для стану елемента (наприклад, :hover).

▸ 19. Що таке псевдоелемент?

Селектор для частини елемента (::before, ::after).

▸ 20. Що таке специфічність у CSS?

Правило, яке визначає пріоритет стилів (inline > id > клас > тег).

▸ 21. Що таке каскадність у CSS?

Принцип, за яким браузер вибирає стилі при конфліктах.

▸ 22. Що таке успадкування?

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

▸ 23. Як задати фон у CSS?

Через background-color, background-image тощо.

▸ 24. Що таке background-repeat?

Визначає повторення фонового зображення.

▸ 25. Що таке background-position?

Визначає розташування фонового зображення.

▸ 26. Що таке background-size?

Визначає розмір фонового зображення (cover, contain).

▸ 27. Що таке border?

Властивість для малювання рамки навколо елемента.

▸ 28. Що таке margin?

Зовнішній відступ елемента.

▸ 29. Що таке padding?

Внутрішній відступ елемента.

▸ 30. Що таке box model?

Модель, яка описує побудову блоку: content, padding, border, margin.

▸ 31. Що таке box-sizing?

Визначає, чи враховуються padding і border у розмірах елемента (content-box або border-box).

▸ 32. Що таке display у CSS?

Визначає тип відображення елемента: block, inline, flex, grid тощо.

▸ 33. Що таке inline-block?

Тип відображення, який поєднує властивості inline та block.

▸ 34. Що таке overflow?

Визначає, як відображати вміст, що виходить за межі елемента (hidden, scroll, auto).

▸ 35. Що таке position?

Визначає спосіб позиціювання елемента: static, relative, absolute, fixed, sticky.

▸ 36. Чим relative відрізняється від absolute?

relative зміщує елемент відносно його початкової позиції, а absolute — відносно найближчого позиціонованого предка.

▸ 37. Що таке fixed?

Елемент прив’язується до вікна браузера, а не до сторінки.

▸ 38. Що таке sticky?

Елемент поводиться як relative, доки не досягне заданої межі, після чого стає fixed.

▸ 39. Що таке z-index?

Визначає порядок накладання елементів.

▸ 40. Що таке float?

Старий метод вирівнювання елементів ліворуч чи праворуч.

▸ 41. Що таке clear?

Скасовує обтікання елемента (left, right, both).

▸ 42. Що таке flexbox?

CSS-модель для вирівнювання та розподілу простору між елементами.

▸ 43. Що таке display: flex?

Робить контейнер гнучким, його діти стають flex-елементами.

▸ 44. Що таке justify-content?

Вирівнювання елементів по головній осі.

▸ 45. Що таке align-items?

Вирівнювання елементів по поперечній осі.

▸ 46. Що таке flex-wrap?

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

▸ 47. Що таке flex-grow?

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

▸ 48. Що таке flex-shrink?

Визначає, як елемент стискається при нестачі простору.

▸ 49. Що таке flex-basis?

Базовий розмір елемента перед розподілом простору.

▸ 50. Що таке CSS Grid?

Система для створення двовимірних сіток.

▸ 51. Що таке grid-template-columns?

Визначає кількість і розміри колонок у сітці.

▸ 52. Що таке grid-template-rows?

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

▸ 53. Що таке grid-gap?

Відстань між рядками та колонками (тепер gap).

▸ 54. Що таке grid-area?

Визначає область сітки, яку займає елемент.

▸ 55. Що таке grid-template-areas?

Описує шаблон розміщення областей сітки.

▸ 56. Що таке minmax() у Grid?

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

▸ 57. Що таке auto-fit та auto-fill у Grid?

Ключові слова для автоматичного заповнення сітки.

▸ 58. Що таке media queries?

Умови для адаптивних стилів залежно від ширини, висоти екрана тощо.

▸ 59. Що таке @media?

Правило для написання медіа-запитів.

▸ 60. Що таке responsive design?

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

▸ 61. Що таке transition?

Властивість для створення плавних змін стилів.

▸ 62. Що таке animation?

Використовується для складних анімацій з ключовими кадрами.

▸ 63. Що таке keyframes?

Опис проміжних станів анімації (@keyframes).

▸ 64. Що таке transform?

Застосовує обертання, масштабування, зсув та інші перетворення.

▸ 65. Що таке translate?

Переміщення елемента по осях X та Y.

▸ 66. Що таке rotate?

Обертання елемента.

▸ 67. Що таке scale?

Масштабування елемента.

▸ 68. Що таке skew?

Нахил елемента.

▸ 69. Що таке will-change?

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

▸ 70. Що таке clip-path?

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

▸ 71. Що таке filter?

Застосовує графічні ефекти (blur, grayscale, contrast).

▸ 72. Що таке backdrop-filter?

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

▸ 73. Що таке variables у CSS?

Кастомні властивості, що починаються з --.

▸ 74. Як використовувати CSS-змінні?

Оголосити: --main-color: red;, використати: color: var(--main-color);.

▸ 75. Що таке calc()?

Функція для математичних розрахунків у CSS.

▸ 76. Що таке clamp()?

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

▸ 77. Що таке min() і max()?

Функції для обрання мінімального чи максимального значення.

▸ 78. Що таке viewport units?

Одиниці vw і vh, що залежать від розміру вікна.

▸ 79. Що таке ch у CSS?

Одиниця виміру, що відповідає ширині символу "0".

▸ 80. Що таке ex у CSS?

Одиниця виміру, що відповідає висоті маленької літери "x".

▸ 81. Що таке print styles?

Стилі для друку, що задаються через @media print.

▸ 82. Що таке prefers-color-scheme?

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

▸ 83. Що таке prefers-reduced-motion?

Медіа-запит для вимкнення або зменшення анімацій.

▸ 84. Що таке container queries?

Медіа-запити, що базуються на розмірах контейнера, а не вікна.

▸ 85. Що таке CSS Houdini?

API для створення кастомних CSS-функцій і властивостей.

▸ 86. Що таке @supports?

Умова, яка перевіряє підтримку властивостей у браузері.

▸ 87. Що таке @layer?

Система каскадування стилів із різних шарів.

▸ 88. Що таке @import?

Правило для підключення інших CSS-файлів.

▸ 89. Що таке inline critical CSS?

Вбудовування критичних стилів у HTML для швидшого рендерингу.

▸ 90. Що таке CSS specificity?

Визначає пріоритет застосування стилів: inline > id > class/attribute/pseudo-class > element/pseudo-element.

▸ 91. Що таке pseudo-classes?

Класи, що застосовуються в певних станах елемента, наприклад :hover, :focus, :nth-child().

▸ 92. Що таке pseudo-elements?

Віртуальні елементи, наприклад ::before та ::after, для додавання контенту через CSS.

▸ 93. Що таке CSS cascade?

Правила каскадування стилів: порядок, специфічність і важливість визначають фінальний стиль елемента.

▸ 94. Що таке important?

Позначка !important робить стиль пріоритетним над іншими.

▸ 95. Що таке CSS containment?

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

▸ 96. Що таке CSS isolation?

Властивість isolation: isolate; створює новий контекст змішування для елементів.

▸ 97. Що таке CSS object-fit?

Визначає, як вміст (зображення, відео) заповнює контейнер: cover, contain, fill.

▸ 98. Що таке CSS object-position?

Визначає позицію вмісту всередині контейнера при використанні object-fit.

▸ 99. Що таке CSS scroll-snap?

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

▸ 100. Що таке CSS logical properties?

Властивості, які адаптуються до напрямку тексту та мови, наприклад margin-inline-start, padding-block-end.