CSS

Найпопулярніші запитання та відповіді на співбесіді з CSS

1. Що таке CSS?

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

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

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

3. Які є способи підключення CSS до HTML-документу?

Вбудовані стилі (inline) — напряму в HTML-тегах через атрибут style.
Внутрішні стилі — у секції <style>...</style> всередині HTML-документа.
Зовнішні стилі — у CSS-файлах, підключених через <link rel=”stylesheet” href=”styles.css”> або @import.

4. Що таке CSS-селектори? Наведіть приклади.

CSS-селектори використовуються для вибору HTML-елементів, до яких застосовуються стилі.
Приклади:
- За тегом: h1 { color: red; }
- За класом: .button { background: blue; }
- За ID: #header { padding: 10px; }
Комбіновані:
- Дочірні: ul > li { margin: 5px; }
- Нащадки: div p { font-size: 14px; }
- Атрибути: [type="text"] { border: 1px solid gray; }
Псевдокласи:
- a:hover { color: green; }
- :nth-child(2) { font-weight: bold; }
Псевдоелементи:
- p::first-line { text-transform: uppercase; }

5. Як працює наслідування в CSS?

Наслідування в CSS дозволяє деяким властивостям автоматично передаватися від батьківського елемента до дочірніх.
Особливості:

Автоматично наслідуються тільки текстові та декоративні властивості:

color, font, visibility, line-height тощо.

Не наслідуються автоматично властивості, що впливають на коробку (box model):

margin, padding, border, width, height тощо.
Контроль наслідування:

Примусове наслідування: використовуйте значення inherit.
```
p {
  border: inherit;
}
```
Відміна наслідування: значення initial скидає властивість до початкового (згідно стандарту).
```
p {
  color: initial;
}
```

6. Що таке «модель коробки» (box model) в CSS і як її можна змінити?

«Модель коробки» (box model) визначає, як розміри елемента розраховуються в CSS. Вона складається з:
- Content: Вміст елемента (текст, зображення).
- Padding: Внутрішній відступ між вмістом і рамкою.
- Border: Рамка навколо padding.
- Margin: Зовнішній відступ між елементом і сусідніми елементами.
Розрахунок ширини та висоти:
- За замовчуванням:
```
Width/Height = Content + Padding + Border
```
Зміна моделі коробки:
- Використовуйте властивість box-sizing:

content-box (за замовчуванням):

Ширина/висота включає лише вміст. Padding і border додаються до загального розміру.
```
box-sizing: content-box;
```

border-box:

Ширина/висота включають вміст, padding і border (зручніше для макетів).
```
box-sizing: border-box;
```
Приклад:
```
* {
  box-sizing: border-box;
}
```
- Це допомагає уникнути помилок у розмітці.

7. У чому різниця між margin і padding?

Різниця між margin і padding:

Розташування:
- margin створює зовнішній відступ між елементом і сусідніми елементами.
- padding створює внутрішній відступ між вмістом елемента і його рамкою (border).
Вплив на фон:
- margin не впливає на фон елемента; простір залишається прозорим.
- padding є частиною елемента, тому фон розтягується на область padding.
Колізія (margin collapsing):
- margin сусідніх блоків може "зливатися" в один (найбільший).
- padding не зливається; завжди додається до внутрішнього простору.

Приклад:

div {
  margin: 20px; /* Відступ від інших елементів */
  padding: 20px; /* Відступ між вмістом і рамкою */
  background-color: lightblue;
}

8. Що таке Flexbox?

Flexbox (Flexible Box Layout) — це CSS-модель розташування елементів, яка забезпечує гнучке вирівнювання та розподіл простору в межах контейнера, навіть якщо розміри елементів невідомі або змінюються.
Основні поняття:
- Flex-контейнер: Батьківський елемент, на який застосовується display: flex;.
- Flex-елементи: Дочірні елементи flex-контейнера.
Основні властивості Flexbox:

Для контейнера:
- flex-direction: Напрямок розташування елементів (row, row-reverse, column, column-reverse).
- justify-content: Горизонтальне вирівнювання елементів (flex-start, center, space-between, space-around, space-evenly).
- align-items: Вертикальне вирівнювання елементів (stretch, center, flex-start, flex-end, baseline).
- align-content: Вирівнювання рядків у багаторядковому контейнері (stretch, center, space-between).
- flex-wrap: Дозволяє елементам переноситися (nowrap, wrap, wrap-reverse).
Для елементів:
- flex-grow: Як елемент збільшується вільним простором.
- flex-shrink: Як елемент зменшується при нестачі простору.
- flex-basis: Базовий розмір елемента перед розподілом простору.
- align-self: Вирівнювання конкретного елемента всередині контейнера.

Приклад:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1; /* Рівний розподіл простору */
}

9. Що таке Grid?

CSS Grid — це потужна система розмітки, яка дозволяє створювати двовимірні сітки для розташування елементів як по горизонталі, так і по вертикалі.
Основні поняття:
- Grid-контейнер: Елемент, на який застосовується display: grid;.
- Grid-елементи: Дочірні елементи grid-контейнера.
- Лінії сітки: Вертикальні та горизонтальні межі, що ділять сітку на осередки.
- Треки: Рядки (rows) і колонки (columns).
- Області: Прямокутні зони, об'єднані з кількох осередків.
Основні властивості Grid:

Для контейнера:

grid-template-rows, grid-template-columns: Задають кількість і розміри рядків та колонок.
grid-template-areas: Іменовані області для організації елементів.
gap (або row-gap/column-gap): Відступи між рядками та колонками.
justify-items, align-items: Вирівнювання елементів у клітинках.
justify-content, align-content: Вирівнювання всієї сітки в контейнері.

Для елементів:

grid-column, grid-row: Позиціювання по колонках і рядках.
grid-area: Розміщення в іменованій області.
place-self: Індивідуальне вирівнювання елемента.

Приклад:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Дві колонки: 1 частина та 2 частини */
  grid-template-rows: 100px auto; /* Рядок фіксованої висоти і автоматичний */
  gap: 10px;
}

.item1 {
  grid-column: 1 / 3; /* Займає дві колонки */
}

.item2 {
  grid-row: 2; /* Розташований у другому рядку */
}

10. Що таке медіазапити та як їх використовувати?

Медіазапити — це умови, які дозволяють застосовувати різні стилі в залежності від характеристик пристрою (наприклад, розміру екрану, орієнтації). Вони використовуються в CSS через правило @media.

Приклад медіазапиту для адаптивного дизайну:

/* Стилі для мобільних пристроїв */
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

/* Стилі для десктопів */
@media (min-width: 769px) {
  body {
    background-color: lightgreen;
  }
}

11. Як можна приховати елемент за допомогою CSS?

Щоб приховати елемент за допомогою CSS, можна використовувати:
- display: none; — видаляє елемент з потоку документа. Він не займає місця на сторінці і з ним не можна взаємодіяти.
- visibility: hidden; — елемент стає невидимим, але зберігає своє місце на сторінці.
- opacity: 0; — робить елемент прозорим, але він залишається видимим і займає місце на сторінці.

12. Як можна зробити лого посередині екрана?

Щоб розмістити лого посередині екрана, можна використати такі способи:

Flexbox:

body,
html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  /* стилі лого */
}

Grid:

body,
html {
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
}

.logo {
  /* стилі лого */
}

Absolute позиціювання:

body,
html {
  height: 100%;
  margin: 0;
  position: relative;
}

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

13. Як розмістити хрестик для закриття справа зверху елемента?

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

.container {
  position: relative; /* щоб хрестик позиціонувався відносно контейнера */
}

.close-btn {
  position: absolute;
  top: 10px; /* відстань від верхнього краю */
  right: 10px; /* відстань від правого краю */
  cursor: pointer; /* щоб курсор змінювався при наведенні */
}

<div class="container">
  <div class="close-btn">&times;</div>
  <!-- інший контент -->
</div>

14. Як зробити останній елемент списку червоним, незалежно від довжини списку без JS?

Щоб зробити останній елемент списку червоним без JavaScript, можна використати псевдоклас :last-child:.
Це правило зробить останній елемент у будь-якому списку (незалежно від його довжини) червоним.
```
ul li:last-child {
  color: red;
}
```
Це правило зробить останній елемент у будь-якому списку (незалежно від його довжини) червоним.

15. Які є можливості задати колір?

У CSS є кілька способів задати колір:

Ім’я кольору:
```
color: red;
```
Шістнадцятковий код:
```
color: #ff0000; /* червоний */
```

RGB (Red, Green, Blue):

color: rgb(255, 0, 0); /* червоний */

RGBA (Red, Green, Blue, Alpha):

color: rgba(255, 0, 0, 0.5); /* червоний з прозорістю */

HSL (Hue, Saturation, Lightness):

color: hsl(0, 100%, 50%); /* червоний */

HSLA (Hue, Saturation, Lightness, Alpha):

color: hsla(0, 100%, 50%, 0.5); /* червоний з прозорістю */

Ключові слова прозорості:
```
color: transparent; /* прозорий */
```

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

16. Що таке z-index? Чи кожен елемент його має?

z-index — це властивість CSS, яка визначає порядок накладання елементів по осі Z (глибина, перетин елементів). Елементи з більшим z-index накладаються поверх елементів з меншим значенням.
Особливості:

Тільки для позиційованих елементів: z-index працює, якщо елемент має position: relative, absolute, fixed або sticky. Без цього z-index ігнорується.
Значення за замовчуванням: Якщо z-index не задано, значення за замовчуванням — auto. У такому випадку порядок накладання визначається порядком у DOM.
Може бути від’ємним: Елементи з від’ємним z-index можуть накладатися позаду батьківських елементів.

Приклад:

.div1 {
  position: relative;
  z-index: 10; /* цей елемент буде поверх */
}

.div2 {
  position: relative;
  z-index: 5; /* цей елемент буде під div1 */
}

17. Які переваги і недоліки використання CSS-препроцесорів?

Переваги CSS-препроцесорів:

Змінні: Легко створювати глобальні змінні для кольорів, шрифтів, розмірів.
```
$primary-color: #3498db;

body {
  color: $primary-color;
}
```
Вкладеність: Зручний запис стилів для вкладених елементів.
```
nav {
  ul {
    li {
      a {
        color: #000;
      }
    }
  }
}
```

Міксіни: Повторно використовувані блоки коду.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  @include flex-center;
}

Функції: Обчислення прямо в стилях.
```
width: calc(100% - 50px);
```
Управління кодом: Імпорт окремих файлів (@import), що полегшує підтримку великого проекту.

Недоліки CSS-препроцесорів:

Складність налаштування: Потрібно встановлювати додаткові інструменти (наприклад, компілятор для SCSS або LESS).
Продуктивність: Велика кількість вкладеностей або міксінів може ускладнити генерований CSS і вплинути на швидкість.
Залежність: Знання синтаксису препроцесора необов'язково підтримується усіма розробниками в команді.
Дебагінг: Згенерований CSS може бути складніше дебажити, якщо немає source maps.

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

18. Для чого існують різні рівні заголовків, якщо розмір можна встановити стилями?

Рівні заголовків (<h1> – <h6>) мають інше призначення, окрім визначення розміру. Їхня основна функція — структуризація контенту для семантики та доступності:

Семантика: Заголовки формують ієрархію документа. Наприклад:

<h1> — головна тема сторінки. <h2> — підрозділ теми <h1>. <h3> — підрозділ <h2>, і так далі.

SEO: Пошукові системи (Google, Bing) використовують заголовки для розуміння структури і змісту сторінки. Коректна ієрархія заголовків підвищує релевантність сторінки.
Доступність: Екранні читачі для людей із порушеннями зору використовують заголовки для навігації по сторінці.
Стандарти: Використання заголовків за призначенням робить код зрозумілим для інших розробників.

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

19. Які є варіанти позиціонування елемента на сторінці?

У CSS є кілька варіантів позиціонування елементів:

static (за замовчуванням): Елемент розташовується в потоці документа відповідно до порядку в HTML. Немає можливості змінювати його положення через властивості top, right, bottom, left.
relative: Елемент залишається в потоці документа, але його положення можна змінити відносно початкової позиції за допомогою top, right, bottom, left.
absolute: Елемент вилучається з потоку і позиціонується відносно найближчого батьківського елемента з позиціюванням (relative, absolute, fixed). Якщо такого немає, то відносно всього документа.
fixed: Елемент вилучається з потоку і закріплюється відносно вікна браузера. Його положення не змінюється при прокручуванні сторінки.
sticky: Комбінація relative і fixed. Елемент позиціонується відносно потоку документа, поки не досягне заданого порогу (top, bottom тощо), після чого "прилипає" до цього порогу при прокручуванні.
inherit, initial, unset:

inherit — наслідує значення від батьківського елемента.
initial — скидає до значення за замовчуванням (static).
unset — застосовує inherit або initial залежно від контексту.
Кожен варіант використовується залежно від завдання: від базового розташування до складного позиціонування в макетах.

20. Які бувають види display? Який використовуєте найчастіше? У чому особливість inline-block?

Основні види display в CSS:

block:
- Елемент займає всю ширину батьківського контейнера.
- Починається з нового рядка.
- Можна задавати ширину, висоту, внутрішні/зовнішні відступи.
- Приклад: <div>, <p>.
inline:
- Елемент розташовується в одному рядку з іншими елементами.
- Неможливо задавати ширину та висоту.
- Відступи (margin/padding) впливають лише на внутрішній простір.
- Приклад: <span>, <a>.
inline-block:
- Поєднує особливості block і inline.
- Елемент розташовується в рядку, але дозволяє задавати ширину, висоту, відступи.
- Зручний для створення кнопок, тегів.
flex:
- Відображає елемент як контейнер для гнучкого компонування дочірніх елементів.
- Використовується для вирівнювання та розподілу простору між елементами.
grid:
- Задає контейнер для компонування в двовимірній сітці.
- Зручний для складних макетів.
none:
- Елемент не відображається на сторінці.
inline-flex / inline-grid:
- Аналогічні flex і grid, але зберігають властивості inline.
table / table-row / table-cell:
- Елементи імітують поведінку таблиць HTML.

Найчастіше використовується:
- block, inline-block, flex, і grid — залежно від завдань.
- inline-block популярний для створення кнопок або елементів меню, які потрібно розташувати в рядок, але контролювати їх розміри.
Особливість inline-block:
- Елементи розташовуються в рядок, як inline, але поводяться як block, дозволяючи задавати ширину, висоту, та всі відступи.
- Проблема: між елементами може з’явитися проміжок (через пробіли в HTML).
Виправляється:
- Видаленням пробілів у коді.
- Встановленням font-size: 0 для батьківського контейнера.

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE.txt		LICENSE.txt
README.md		README.md
SECURITY.md		SECURITY.md

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

CSS

Найпопулярніші запитання та відповіді на співбесіді з CSS

About

Releases

Packages

License

FrontendLovers/css-interview-questions

Folders and files

Latest commit

History

Repository files navigation

CSS

Найпопулярніші запитання та відповіді на співбесіді з CSS

About

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

Packages 0

Packages