├── assets ├── code.png └── css.svg ├── .github ├── FUNDING.yml ├── CONTRIBUTING.md └── PULL_REQUEST_TEMPLATE.md ├── .prettierrc ├── SECURITY.md ├── LICENSE.txt ├── .gitignore ├── CODE_OF_CONDUCT.md └── README.md /assets/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevLoversTeam/css-interview-questions/HEAD/assets/code.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # FUNDING.yml 2 | # Налаштування можливостей підтримки проєкту 3 | 4 | github: ViktorSvertoka 5 | buy_me_a_coffee: viktor.svertoka 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "useTabs": false, 4 | "semi": true, 5 | "singleQuote": true, 6 | "trailingComma": "es5", 7 | "bracketSpacing": true, 8 | "arrowParens": "avoid", 9 | "proseWrap": "always" 10 | } 11 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # 🧠 Як зробити внесок у DevLovers 2 | 3 | Дякуємо, що хочете зробити внесок у наш проєкт! Нижче описано кілька простих 4 | правил, які допоможуть вам підготувати якісний pull request. 5 | 6 | ## 🔧 Формат доповнення 7 | 8 | - Кожне питання повинне бути оформлене в HTML-елементі `

` зі 9 | структурою: 10 | 11 | ![Code](../assets/code.png) 12 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Чекліст: 6 | 7 | - [ ] Я ознайомився з [CONTRIBUTING.md](CONTRIBUTING.md) і дотримувався 8 | вказівок. 9 | - [ ] Моє доповнення не дублює вже існуюче питання чи відповідь. 10 | - [ ] Я додав(ла) нове запитання у відповідному форматі (див. існуючі приклади). 11 | - [ ] Я додав(ла) нове запитання **в кінець файлу** з **наступним за порядком 12 | номером**. 13 | 14 | --- 15 | 16 | 17 | 18 | ... 19 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # 🔒 Security Policy 2 | 3 | ## Reporting a Vulnerability 4 | 5 | If you discover a security issue in any of my projects, I would greatly appreciate your help in resolving it responsibly. Here's how you can report it: 6 | 7 | 1. **Contact me:** 8 | Please send an email to **[devlovers.net@gmail.com](mailto:devlovers.net@gmail.com)** with: 9 | 10 | - A clear description of the issue. 11 | - Steps to reproduce the vulnerability. 12 | - Any relevant code or logs for better understanding. 13 | 14 | 2. **Handling process:** 15 | 16 | - I will acknowledge your report within **48 hours**. 17 | - Together, we will work on resolving the issue as quickly as possible. 18 | 19 | 3. **Confidentiality:** 20 | Please keep the details of the vulnerability private until it has been resolved. 21 | 22 | Your cooperation helps ensure the safety and security of my work. Thank you for contributing to a safer tech environment! 🙌 23 | -------------------------------------------------------------------------------- /assets/css.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 DevLovers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | #Junk 2 | .DS_Store 3 | .vscode/ 4 | .idea/ 5 | 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # TypeScript v1 declaration files 50 | typings/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Microbundle cache 62 | .rpt2_cache/ 63 | .rts2_cache_cjs/ 64 | .rts2_cache_es/ 65 | .rts2_cache_umd/ 66 | 67 | # Optional REPL history 68 | .node_repl_history 69 | 70 | # Output of 'npm pack' 71 | *.tgz 72 | 73 | # Yarn Integrity file 74 | .yarn-integrity 75 | 76 | # dotenv environment variables file 77 | .env 78 | .env.test 79 | 80 | # parcel-bundler cache (https://parceljs.org/) 81 | .parcel-cache 82 | 83 | # Next.js build output 84 | .next 85 | 86 | # Nuxt.js build / generate output 87 | .nuxt 88 | 89 | 90 | # Gatsby files 91 | .cache/ 92 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 93 | # https://nextjs.org/blog/next-9-1#public-directory-support 94 | # public 95 | 96 | # vuepress build output 97 | .vuepress/dist 98 | 99 | # Serverless directories 100 | .serverless/ 101 | 102 | # FuseBox cache 103 | .fusebox/ 104 | 105 | # DynamoDB Local files 106 | .dynamodb/ 107 | 108 | # TernJS port file 109 | .tern-port 110 | 111 | 112 | .venv 113 | venv 114 | __pycache__ -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | - Demonstrating empathy and kindness toward other people 21 | - Being respectful of differing opinions, viewpoints, and experiences 22 | - Giving and gracefully accepting constructive feedback 23 | - Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | - Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | - The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | - Trolling, insulting or derogatory comments, and personal or political attacks 33 | - Public or private harassment 34 | - Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | - Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | [devlovers.net@gmail.com](mailto:devlovers.net@gmail.com). 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | CSS 3 |

4 | 5 |

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

6 | 7 |

8 |

1. Що таке CSS? І навіщо він використовується?

9 | 10 | #### CSS 11 | 12 | - CSS (Cascading Style Sheets) — це мова стилів для опису вигляду веб-сторінок. 13 | Використовується для розмітки елементів на сторінці, таких як шрифти, кольори, 14 | відступи, позиціонування та інші візуальні аспекти. CSS дозволяє відокремити 15 | контент (HTML) від стилів, що полегшує підтримку та зміну вигляду сайту. 16 | 17 |

18 | 19 |

20 |

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

21 | 22 | #### CSS 23 | 24 | - Каскадність у CSS — це механізм, який визначає, як застосовуються стилі до 25 | елементів веб-сторінки, якщо для одного елемента задано кілька різних стилів із 26 | різних джерел або рівнів. Вона дозволяє браузеру вирішити, які стилі будуть мати 27 | вищий пріоритет і застосовуватися в кінцевому результаті. 28 |

29 | 30 |

31 |

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

32 | 33 | #### CSS 34 | 35 | - Вбудовані стилі (inline) — напряму в HTML-тегах через атрибут `style`. 36 | - Внутрішні стилі — у секції ` ` всередині HTML-документа. 37 | - Зовнішні стилі — у CSS-файлах, підключених через 38 | `` або `@import`. 39 | 40 |

41 | 42 |

43 |

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

44 | 45 | #### CSS 46 | 47 | - CSS-селектори використовуються для вибору HTML-елементів, до яких 48 | застосовуються стилі. 49 | 50 | - **Приклади:** 51 | 52 | - За тегом: `h1 { color: red; }` 53 | - За класом: `.button { background: blue; }` 54 | - За ID: `#header { padding: 10px; }` 55 | 56 | - **Комбіновані:** 57 | 58 | - Дочірні: `ul > li { margin: 5px; }` 59 | - Нащадки: `div p { font-size: 14px; }` 60 | - Атрибути: `[type="text"] { border: 1px solid gray; }` 61 | 62 | - **Псевдокласи:** 63 | 64 | - `a:hover { color: green; }` 65 | - `:nth-child(2) { font-weight: bold; }` 66 | 67 | - **Псевдоелементи:** 68 | 69 | - `p::first-line { text-transform: uppercase; }` 70 | 71 |

72 | 73 |

74 |

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

75 | 76 | #### CSS 77 | 78 | - Наслідування в CSS дозволяє деяким властивостям автоматично передаватися від 79 | батьківського елемента до дочірніх. 80 | 81 | - **Особливості:** 82 | 83 | 1. Автоматично наслідуються тільки текстові та декоративні властивості: 84 | 85 | - `color`, `font`, `visibility`, `line-height` тощо. 86 | 87 | 2. Не наслідуються автоматично властивості, що впливають на коробку (box model): 88 | 89 | - `margin`, `padding`, `border`, `width`, `heigh`t тощо. 90 | 91 | - **Контроль наслідування:** 92 | 93 | 1. **Примусове наслідування:** використовуйте значення inherit. 94 | 95 | ```css 96 | p { 97 | border: inherit; 98 | } 99 | ``` 100 | 101 | 2. **Відміна наслідування:** значення initial скидає властивість до початкового 102 | (згідно стандарту). 103 | 104 | ```css 105 | p { 106 | color: initial; 107 | } 108 | ``` 109 | 110 |

111 | 112 |

113 | 114 |

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

115 | 116 | #### CSS 117 | 118 | - «Модель коробки» (box model) визначає, як розміри елемента розраховуються в 119 | CSS. Вона складається з: 120 | 121 | - **Content:** Вміст елемента (текст, зображення). 122 | - **Padding:** Внутрішній відступ між вмістом і рамкою. 123 | - **Border:** Рамка навколо padding. 124 | - **Margin:** Зовнішній відступ між елементом і сусідніми елементами. 125 | 126 | - Розрахунок ширини та висоти: 127 | 128 | - За замовчуванням: 129 | 130 | ```css 131 | Width/Height = Content + Padding + Border 132 | ``` 133 | 134 | - Зміна моделі коробки: 135 | 136 | - Використовуйте властивість box-sizing: 137 | 138 | 1. content-box (за замовчуванням): 139 | 140 | - Ширина/висота включає лише вміст. Padding і border додаються до загального 141 | розміру. 142 | 143 | ```css 144 | box-sizing: content-box; 145 | ``` 146 | 147 | 2. border-box: 148 | 149 | - Ширина/висота включають вміст, padding і border (зручніше для макетів). 150 | 151 | ```css 152 | box-sizing: border-box; 153 | ``` 154 | 155 | - Приклад: 156 | 157 | ```css 158 | * { 159 | box-sizing: border-box; 160 | } 161 | ``` 162 | 163 | - Це допомагає уникнути помилок у розмітці. 164 | 165 |

166 | 167 |

168 |

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

169 | 170 | #### CSS 171 | 172 | - Різниця між margin і padding: 173 | 174 | 1. Розташування: 175 | 176 | - `margin` створює зовнішній відступ між елементом і сусідніми елементами. 177 | - `padding` створює внутрішній відступ між вмістом елемента і його рамкою 178 | (border). 179 | 180 | 2. Вплив на фон: 181 | 182 | - `margin` не впливає на фон елемента; простір залишається прозорим. 183 | - `padding` є частиною елемента, тому фон розтягується на область padding. 184 | 185 | 3. Колізія (margin collapsing): 186 | 187 | - `margin` сусідніх блоків може "зливатися" в один (найбільший). 188 | - `padding` не зливається; завжди додається до внутрішнього простору. 189 | 190 | - Приклад: 191 | 192 | ```css 193 | div { 194 | margin: 20px; /* Відступ від інших елементів */ 195 | padding: 20px; /* Відступ між вмістом і рамкою */ 196 | background-color: lightblue; 197 | } 198 | ``` 199 | 200 |

201 | 202 |

203 |

8. Що таке Flexbox?

204 | 205 | #### CSS 206 | 207 | - Flexbox (Flexible Box Layout) — це CSS-модель розташування елементів, яка 208 | забезпечує гнучке вирівнювання та розподіл простору в межах контейнера, навіть 209 | якщо розміри елементів невідомі або змінюються. 210 | 211 | - **Основні поняття:** 212 | 213 | - **Flex-контейнер:** Батьківський елемент, на який застосовується 214 | `display: flex;`. 215 | - **Flex-елементи:** Дочірні елементи flex-контейнера. 216 | 217 | - **Основні властивості Flexbox:** 218 | 219 | 1. Для контейнера: 220 | 221 | - `flex-direction`: Напрямок розташування елементів (`row`, `row-reverse`, 222 | `column`, `column-reverse`). 223 | - `justify-content`: Горизонтальне вирівнювання елементів (`flex-start`, 224 | `center`, `space-between`, `space-around`, `space-evenly`). 225 | - `align-items`: Вертикальне вирівнювання елементів (`stretch`, `center`, 226 | `flex-start`, `flex-end`, `baseline`). 227 | - `align-content`: Вирівнювання рядків у багаторядковому контейнері 228 | (`stretch`, `center`, `space-between`). 229 | - `flex-wrap`: Дозволяє елементам переноситися (`nowrap`, `wrap`, 230 | `wrap-reverse`). 231 | 232 | 2. Для елементів: 233 | 234 | - `flex-grow`: Як елемент збільшується вільним простором. 235 | - `flex-shrink`: Як елемент зменшується при нестачі простору. 236 | - `flex-basis`: Базовий розмір елемента перед розподілом простору. 237 | - `align-self`: Вирівнювання конкретного елемента всередині контейнера. 238 | 239 | - Приклад: 240 | 241 | ```css 242 | .container { 243 | display: flex; 244 | justify-content: center; 245 | align-items: center; 246 | } 247 | 248 | .item { 249 | flex: 1; /* Рівний розподіл простору */ 250 | } 251 | ``` 252 | 253 |

254 | 255 |

256 |

9. Що таке Grid?

257 | 258 | #### CSS 259 | 260 | - CSS Grid — це потужна система розмітки, яка дозволяє створювати двовимірні 261 | сітки для розташування елементів як по горизонталі, так і по вертикалі. 262 | 263 | - **Основні поняття:** 264 | 265 | - **Grid-контейнер:** Елемент, на який застосовується `display: grid;`. 266 | - **Grid-елементи:** Дочірні елементи grid-контейнера. 267 | - **Лінії сітки:** Вертикальні та горизонтальні межі, що ділять сітку на 268 | осередки. 269 | - **Треки:** Рядки (`rows`) і колонки (`columns`). 270 | - **Області:** Прямокутні зони, об'єднані з кількох осередків. 271 | 272 | - **Основні властивості Grid:** 273 | 274 | 1. Для контейнера: 275 | 276 | - `grid-template-rows`, `grid-template-columns`: Задають кількість і розміри 277 | рядків та колонок. 278 | - `grid-template-areas`: Іменовані області для організації елементів. 279 | - `gap` (або `row-gap/column-gap`): Відступи між рядками та колонками. 280 | - `justify-items`, `align-items`: Вирівнювання елементів у клітинках. 281 | - `justify-content`, `align-content`: Вирівнювання всієї сітки в контейнері. 282 | 283 | 2. Для елементів: 284 | 285 | - `grid-column`, `grid-row`: Позиціювання по колонках і рядках. 286 | - `grid-area`: Розміщення в іменованій області. 287 | - `place-self`: Індивідуальне вирівнювання елемента. 288 | 289 | - Приклад: 290 | 291 | ```css 292 | .container { 293 | display: grid; 294 | grid-template-columns: 1fr 2fr; /* Дві колонки: 1 частина та 2 частини */ 295 | grid-template-rows: 100px auto; /* Рядок фіксованої висоти і автоматичний */ 296 | gap: 10px; 297 | } 298 | 299 | .item1 { 300 | grid-column: 1 / 3; /* Займає дві колонки */ 301 | } 302 | 303 | .item2 { 304 | grid-row: 2; /* Розташований у другому рядку */ 305 | } 306 | ``` 307 | 308 |

309 | 310 |

311 |

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

312 | 313 | #### CSS 314 | 315 | - Медіазапити — це умови, які дозволяють застосовувати різні стилі в залежності 316 | від характеристик пристрою (наприклад, розміру екрану, орієнтації). Вони 317 | використовуються в CSS через правило @media. 318 | 319 | - Приклад медіазапиту для адаптивного дизайну: 320 | 321 | ```css 322 | /* Стилі для мобільних пристроїв */ 323 | @media (max-width: 768px) { 324 | body { 325 | background-color: lightblue; 326 | } 327 | } 328 | 329 | /* Стилі для десктопів */ 330 | @media (min-width: 769px) { 331 | body { 332 | background-color: lightgreen; 333 | } 334 | } 335 | ``` 336 | 337 |

338 | 339 |

340 |

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

341 | 342 | #### CSS 343 | 344 | - Щоб приховати елемент за допомогою CSS, можна використовувати: 345 | - `display: none;` — видаляє елемент з потоку документа. Він не займає місця 346 | на сторінці і з ним не можна взаємодіяти. 347 | - `visibility: hidden;` — елемент стає невидимим, але зберігає своє місце на 348 | сторінці. 349 | - `opacity: 0;` — робить елемент прозорим, але він залишається видимим і 350 | займає місце на сторінці. 351 | 352 |

353 | 354 |

355 |

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

356 | 357 | #### CSS 358 | 359 | - Щоб розмістити лого посередині екрана, можна використати такі способи: 360 | 361 | 1. Flexbox: 362 | 363 | ```css 364 | body, 365 | html { 366 | height: 100%; 367 | margin: 0; 368 | display: flex; 369 | justify-content: center; 370 | align-items: center; 371 | } 372 | 373 | .logo { 374 | /* стилі лого */ 375 | } 376 | ``` 377 | 378 | 2. Grid: 379 | 380 | ```css 381 | body, 382 | html { 383 | height: 100%; 384 | margin: 0; 385 | display: grid; 386 | place-items: center; 387 | } 388 | 389 | .logo { 390 | /* стилі лого */ 391 | } 392 | ``` 393 | 394 | 3. Absolute позиціювання: 395 | 396 | ```css 397 | body, 398 | html { 399 | height: 100%; 400 | margin: 0; 401 | position: relative; 402 | } 403 | 404 | .logo { 405 | position: absolute; 406 | top: 50%; 407 | left: 50%; 408 | transform: translate(-50%, -50%); 409 | } 410 | ``` 411 | 412 |

413 | 414 |

415 |

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

416 | 417 | #### CSS 418 | 419 | - Щоб розмістити хрестик для закриття в правому верхньому куті елемента, можна 420 | використати абсолютне позиціювання: 421 | 422 | ```css 423 | .container { 424 | position: relative; /* щоб хрестик позиціонувався відносно контейнера */ 425 | } 426 | 427 | .close-btn { 428 | position: absolute; 429 | top: 10px; /* відстань від верхнього краю */ 430 | right: 10px; /* відстань від правого краю */ 431 | cursor: pointer; /* щоб курсор змінювався при наведенні */ 432 | } 433 | ``` 434 | 435 | ```html 436 |

437 |

438 | 439 |

440 | ``` 441 | 442 |

443 | 444 |

445 |

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

446 | 447 | #### CSS 448 | 449 | - Щоб зробити останній елемент списку червоним без JavaScript, можна використати 450 | псевдоклас `:last-child:`. 451 | - Це правило зробить останній елемент у будь-якому списку (незалежно від його 452 | довжини) червоним. 453 | 454 | ```css 455 | ul li:last-child { 456 | color: red; 457 | } 458 | ``` 459 | 460 | - Це правило зробить останній елемент у будь-якому списку (незалежно від його 461 | довжини) червоним. 462 | 463 |

464 | 465 |

466 |

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

467 | 468 | #### CSS 469 | 470 | - У CSS є кілька способів задати колір: 471 | 472 | 1. Ім’я кольору: 473 | 474 | ```css 475 | color: red; 476 | ``` 477 | 478 | 2. Шістнадцятковий код: 479 | 480 | ```css 481 | color: #ff0000; /* червоний */ 482 | ``` 483 | 484 | 3. RGB (Red, Green, Blue): 485 | 486 | ```css 487 | color: rgb(255, 0, 0); /* червоний */ 488 | ``` 489 | 490 | 4. RGBA (Red, Green, Blue, Alpha): 491 | 492 | ```css 493 | color: rgba(255, 0, 0, 0.5); /* червоний з прозорістю */ 494 | ``` 495 | 496 | 5. HSL (Hue, Saturation, Lightness): 497 | 498 | ```css 499 | color: hsl(0, 100%, 50%); /* червоний */ 500 | ``` 501 | 502 | 6. HSLA (Hue, Saturation, Lightness, Alpha): 503 | 504 | ```css 505 | color: hsla(0, 100%, 50%, 0.5); /* червоний з прозорістю */ 506 | ``` 507 | 508 | 7. Ключові слова прозорості: 509 | 510 | ```css 511 | color: transparent; /* прозорий */ 512 | ``` 513 | 514 | - Ці способи дозволяють вибирати колір за різними параметрами: від прямого опису 515 | кольору до використання прозорості або відтінків. 516 | 517 |

518 | 519 |

520 |

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

521 | 522 | #### CSS 523 | 524 | - `z-index` — це властивість CSS, яка визначає порядок накладання елементів по 525 | осі Z (глибина, перетин елементів). Елементи з більшим `z-index` накладаються 526 | поверх елементів з меншим значенням. 527 | 528 | - **Особливості:** 529 | 530 | 1. Тільки для позиційованих елементів: `z-index` працює, якщо елемент має 531 | `position`: `relative`, `absolute`, `fixed` або `sticky`. Без цього `z-index` 532 | ігнорується. 533 | 534 | 2. Значення за замовчуванням: Якщо `z-index` не задано, значення за 535 | замовчуванням — `auto`. У такому випадку порядок накладання визначається 536 | порядком у DOM. 537 | 538 | 3. Може бути від’ємним: Елементи з від’ємним `z-index` можуть накладатися позаду 539 | батьківських елементів. 540 | 541 | - Приклад: 542 | 543 | ```css 544 | .div1 { 545 | position: relative; 546 | z-index: 10; /* цей елемент буде поверх */ 547 | } 548 | 549 | .div2 { 550 | position: relative; 551 | z-index: 5; /* цей елемент буде під div1 */ 552 | } 553 | ``` 554 | 555 |

556 | 557 |

558 |

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

559 | 560 | #### CSS 561 | 562 | - **Переваги CSS-препроцесорів:** 563 | 564 | 1. **Змінні:** Легко створювати глобальні змінні для кольорів, шрифтів, 565 | розмірів. 566 | 567 | ```css 568 | $primary-color: #3498db; 569 | 570 | body { 571 | color: $primary-color; 572 | } 573 | ``` 574 | 575 | 2. **Вкладеність:** Зручний запис стилів для вкладених елементів. 576 | 577 | ```css 578 | nav { 579 | ul { 580 | li { 581 | a { 582 | color: #000; 583 | } 584 | } 585 | } 586 | } 587 | ``` 588 | 589 | 3. **Міксіни:** Повторно використовувані блоки коду. 590 | 591 | ```css 592 | @mixin flex-center { 593 | display: flex; 594 | justify-content: center; 595 | align-items: center; 596 | } 597 | 598 | div { 599 | @include flex-center; 600 | } 601 | ``` 602 | 603 | 4. **Функції:** Обчислення прямо в стилях. 604 | 605 | ```css 606 | width: calc(100% - 50px); 607 | ``` 608 | 609 | 5. **Управління кодом:** Імпорт окремих файлів (`@import`), що полегшує 610 | підтримку великого проекту. 611 | 612 | - **Недоліки CSS-препроцесорів:** 613 | 614 | 1. **Складність налаштування:** Потрібно встановлювати додаткові інструменти 615 | (наприклад, компілятор для SCSS або LESS). 616 | 617 | 2. **Продуктивність:** Велика кількість вкладеностей або міксінів може 618 | ускладнити генерований CSS і вплинути на швидкість. 619 | 620 | 3. **Залежність:** Знання синтаксису препроцесора необов'язково підтримується 621 | усіма розробниками в команді. 622 | 623 | 4. **Дебагінг:** Згенерований CSS може бути складніше дебажити, якщо немає 624 | source maps. 625 | 626 | - Використання залежить від розміру проекту та необхідності складних стилів. Для 627 | великих проектів переваги переважують недоліки. 628 | 629 |

630 | 631 |

632 |

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

633 | 634 | #### CSS 635 | 636 | - Рівні заголовків (`

–

`) мають інше призначення, окрім визначення 637 | розміру. Їхня основна функція — структуризація контенту для семантики та 638 | доступності: 639 | 640 | 1. Семантика: Заголовки формують ієрархію документа. Наприклад: 641 | 642 | `

` — головна тема сторінки. `

` — підрозділ теми `

`. `

` — 643 | підрозділ `

`, і так далі. 644 | 645 | 2. SEO: Пошукові системи (Google, Bing) використовують заголовки для 646 | розуміння структури і змісту сторінки. Коректна ієрархія заголовків підвищує 647 | релевантність сторінки. 648 | 649 | 3. Доступність: Екранні читачі для людей із порушеннями зору використовують 650 | заголовки для навігації по сторінці. 651 | 652 | 4. Стандарти: Використання заголовків за призначенням робить код зрозумілим 653 | для інших розробників. 654 | 655 | - Розмір заголовків можна стилізувати за допомогою CSS, але правильне 656 | використання тегів забезпечує краще розуміння і роботу сторінки. 657 | 658 |

659 | 660 |

661 |

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

662 | 663 | #### CSS 664 | 665 | - У CSS є кілька варіантів позиціонування елементів: 666 | 667 | 1. `static` (за замовчуванням): Елемент розташовується в потоці документа 668 | відповідно до порядку в HTML. Немає можливості змінювати його положення через 669 | властивості top, right, bottom, left. 670 | 671 | 2. `relative`: Елемент залишається в потоці документа, але його положення можна 672 | змінити відносно початкової позиції за допомогою top, right, bottom, left. 673 | 674 | 3. `absolute`: Елемент вилучається з потоку і позиціонується відносно 675 | найближчого батьківського елемента з позиціюванням (relative, absolute, 676 | fixed). Якщо такого немає, то відносно всього документа. 677 | 678 | 4. `fixed`: Елемент вилучається з потоку і закріплюється відносно вікна 679 | браузера. Його положення не змінюється при прокручуванні сторінки. 680 | 681 | 5. `sticky`: Комбінація relative і fixed. Елемент позиціонується відносно потоку 682 | документа, поки не досягне заданого порогу (top, bottom тощо), після чого 683 | "прилипає" до цього порогу при прокручуванні. 684 | 685 | 6. `inherit`, `initial`, `unset`: 686 | 687 | - inherit — наслідує значення від батьківського елемента. 688 | - initial — скидає до значення за замовчуванням (static). 689 | - unset — застосовує inherit або initial залежно від контексту. 690 | 691 | - Кожен варіант використовується залежно від завдання: від базового розташування 692 | до складного позиціонування в макетах. 693 | 694 |

695 | 696 |

697 |

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

698 | 699 | #### CSS 700 | 701 | - Основні види display в CSS: 702 | 703 | 1. `block`: 704 | 705 | - Елемент займає всю ширину батьківського контейнера. 706 | - Починається з нового рядка. 707 | - Можна задавати ширину, висоту, внутрішні/зовнішні відступи. 708 | - Приклад: `

`, `

764 | 765 |

766 |

21. Що таке CSS-правило?

767 | 768 | #### CSS 769 | 770 | - CSS-правило складається з селектора та блоку декларацій. Селектор визначає, до 771 | яких елементів на сторінці застосовуються стилі, а блок декларацій містить 772 | властивості та їх значення, що визначають вигляд цих елементів. Наприклад: 773 | 774 | ```css 775 | p { 776 | color: red; 777 | font-size: 16px; 778 | } 779 | ``` 780 | 781 | - Тут `p` — селектор (вибирає всі абзаци), а в блоці декларацій вказано, що 782 | текст буде червоним і розмір шрифту 16px. 783 | 784 |

785 | 786 |

787 |

22. Варіанти додавання CSS стилів на сторінку?

788 | 789 | #### CSS 790 | 791 | 1. **Inline CSS:** Стилі додаються безпосередньо до HTML елементів через атрибут 792 | `style`. 793 | 794 | ```html 795 |

Text

796 | ``` 797 | 798 | 2. **Internal CSS:** Стилі додаються в ` 808 | ``` 809 | 810 | 3. **External CSS:** Стилі прописуються в окремому CSS файлі, який підключається 811 | до HTML через тег ``. 812 | 813 | ```html 814 | 815 | ``` 816 | 817 | - Ці варіанти відрізняються за пріоритетом і зручністю для масштабування 818 | проектів. 819 | 820 |

821 | 822 |