top 30 popular css interview questions
Список найбільш популярних запитань щодо інтерв’ю CSS із відповідями:
CSS питання, що охоплюють майже всі основні та вдосконалені категорії CSS, пояснюються на прикладах.
CSS - одна з найважливіших особливостей веб-розробки. Це мова, якою ми можемо описати зовнішній вигляд веб-сторінок.
Отже, важливо охопити всі основні та вдосконалені частини CSS. Щоб стати хорошим веб-розробником і успішно зламати інтерв’ю веб-розробника, вам потрібно вивчити CSS.
Найчастіші запитання щодо інтерв’ю CSS
Нижче наведено перелік найпоширеніших запитань та відповідей на інтерв’ю в CSS простими словами для Вашого легкого розуміння.
Давайте розпочнемо!!
Q # 1) Що таке CSS?
Відповідь: CSS окреслює стиль веб-сторінки HTML. Це мова, за допомогою якої ми можемо встановити поведінку веб-сторінки HTML. Він описує, як вміст HTML буде відображатися на екрані.
CSS контролює розміщення декількох веб-сторінок HTML. CSS називається каскадним таблицею стилів.
Q # 2) Назвіть усі модулі, які використовуються в поточній версії CSS.
Відповідь: У CSS є кілька модулів, як зазначено нижче:
- Селектори
- Модель коробки
- Фони та межі
- Текстові ефекти
- 2D / 3D Transformations
- Анімація
- Макет кількох стовпців
- Користувацький інтерфейс.
Q # 3) Розрізняють CSS2 та CSS3.
Відповідь: Відмінності між CSS2 та CSS3 такі:
- CSS3 розділений на два різні розділи, які називаються модулями. Тоді як у CSS2 все є єдиним документом із усією інформацією.
- Модулі CSS3 підтримуються майже в кожному браузері, а з іншого боку, модулі CSS і CSS2 підтримуються не в кожному браузері.
- У CSS3 ми виявимо, що було введено багато характеристик, пов’язаних із графікою, таких як Border-radius або box-shadow, flexbox.
- У CSS3 користувач може точно визначити кілька фонових зображень на веб-сторінці, використовуючи такі властивості, як стилі фонового зображення, фонового положення та фонового повторення.
Q # 4) Наведіть різні типи CSS.
Відповідь: Існує три типи CSS, як зазначено нижче:
- Зовнішні: Вони записані в окремих файлах.
- Внутрішні: Вони цитуються у верхній частині документа коду веб-сторінки.
- В лінію: Вони написані безпосередньо біля тексту.
Q # 5) Чому корисна зовнішня таблиця стилів?
Відповідь: Зовнішня таблиця стилів дуже корисна, оскільки ми пишемо всі коди стилів в одному файлі, і її можна використовувати де завгодно, просто посилаючись на посилання на цей зовнішній файл таблиці стилів.
Отже, якщо ми внесемо якісь зміни у цей зовнішній файл, тоді зміни також можна буде спостерігати на веб-сторінці. Таким чином, ми можемо сказати, що це дуже корисно і полегшує вашу роботу під час роботи з великими файлами.
Q # 6) Яке використання вбудованої таблиці стилів ?
Відповідь: Вбудована таблиця стилів дає нам привілей визначати стилі в одному місці в документі HTML.
Ми можемо генерувати кілька класів, використовуючи вбудовану таблицю стилів для використання на різних типах тегів веб-сторінки, а також не потрібно додаткове завантаження для імпорту інформації.
Приклад:
p { font-family: georgia, serif; font-size: x-large; color:#ff9900; } a:hover { color: LimeGreen; text-decoration: none; } Embedded style sheet gives us the privilege to define styles at one place in a HTML document. We can generate multiple classes using embedded style sheet to use on multiple tag types a web page and also there is no extra downloading required importing the information.
Q # 7) Як використовувати селектор CSS?
Відповідь: Використовуючи селектор CSS, ми можемо вибрати вміст, який ми хочемо стилізувати, щоб сказати, що це міст між таблицею стилів і файлами HTML.
Синтаксис селектора CSS - це елементи «select» HTML, створені на основі їх ідентифікатора, класу, типу тощо.
Q # 8) Поясніть поняття Твінінг.
Відповідь: Твінінг - це процес, при якому ми створюємо проміжні кадри між двома зображеннями, щоб отримати вигляд першого зображення, яке переростає у друге зображення.
В основному він використовується для створення анімації.
Q # 9) Визначте сценарії зображень CSS.
Відповідь: Сценарії зображень CSS - це група зображень, які розміщуються в одному зображенні. Це зменшує час завантаження та номер запиту на сервер під час проектування декількох зображень на одну веб-сторінку.
Q # 10) Поясніть термін Адаптивний веб-дизайн.
Відповідь: Це метод, при якому ми розробляємо та розробляємо веб-сторінку відповідно до дій користувача та умов, які базуються на різних компонентах, таких як розмір екрану, портативність веб-сторінки на різних пристроях тощо. Це робиться за допомогою різні гнучкі макети та сітки.
Q # 11) Що таке лічильники CSS?
Відповідь: Лічильники CSS - це змінні, які можна збільшити за правилами CSS, які інспектору відстежують, скільки разів була використана змінна.
Q # 12) Що таке специфіка CSS?
Відповідь: Специфіка CSS - це оцінка або рейтинг, який визначає, який декларація стилю повинна бути використана для елемента. (*) цей універсальний селектор має низьку специфічність, тоді як селектори ID мають високу специфічність.
У CSS є чотири категорії, які дозволяють рівень конкретності селектора.
- Вбудований стиль
- Посвідчення особи
- Класи, атрибути та псевдокласи.
- Елементи та псевдоелементи.
Q # 13) Як ми можемо розрахувати конкретність?
Відповідь: Для обчислення конкретності ми почнемо з 0, тоді нам потрібно додати 1000 для кожного ідентифікатора, і ми повинні додати 10 до атрибутів, класів або псевдокласів з кожним іменем елемента або псевдоелементом, а пізніше до них потрібно додати 1 .
Приклад:
h2 #content h2 heading
Питання # 14) Як зробити закруглений кут за допомогою CSS?
Відповідь: Ми можемо зробити закруглений кут, використовуючи властивість “радіус-межа”. Ми можемо застосувати цю властивість до будь-якого елемента.
Приклад:
#rcorners1 { border-radius: 25px; background: #715751; padding: 20px; width: 200px; height: 150px; } Rounded corners for an element with a specified background color:
Rounded corners!
Q # 15) Як ви будете додавати обрамлені межі до елемента HTML?
Відповідь: Ми можемо встановити зображення, яке буде використовуватися як зображення-межу поряд з елементом, використовуючи властивість CSS “border-image”.
Приклад:
#borderimg { border: 15px solid transparent; padding: 20px; border-image: url(border.png) 30 round; }Q # 16) Що таке градієнти в CSS?
Відповідь: Це властивість CSS, яке дозволяє відображати плавне перетворення між двома або більше, ніж двома заданими кольорами.
У CSS є два типи градієнтів. Вони є:
- Лінійний градієнт
- Радіальний градієнт
Q # 17) Що таке CSS flexbox?
Відповідь: Це дозволяє розробляти гнучку адаптивну структуру макета, не використовуючи властивості плаваючого або позиціонування CSS. Для використання CSS flexbox потрібно спочатку визначити flex-контейнер.
Приклад:
.flex-container { display: flex; background-color: #f4b042; } .flex-container > div { background-color: #d60a33; margin: 10px; padding: 20px; font-size: 30px; } 1 2 3 Example of flex box.
Q # 18) Напишіть усі властивості flexbox.
Відповідь: Існує кілька властивостей flexbox, які використовуються на веб-сторінці HTML.
Вони є:
- flex-direction
- гнучке обгортання
- flex-flow
- виправданий зміст
- вирівнювання елементів
- align-content
Q # 19) Як вирівняти зображення по вертикалі в розділі, який охоплює вертикально всю веб-сторінку?
Відповідь: Це можна зробити, використовуючи синтаксис verticle-align: middle в елементі, і навіть ми можемо зв’язати два проміжки тексту навколо іншого інтервалу, а після цього ми повинні використовувати verticle-align: middle у вмісті #icon.
Q # 20) Яка різниця між заповненням та полями?
Відповідь: У CSS поле - це властивість, за допомогою якої ми можемо створювати простір навколо елементів. Ми навіть можемо створити простір для зовнішніх визначених меж.
У CSS ми маємо властивість margin наступним чином:
- margin-top
- поле вправо
- поле внизу
- Поле-ліворуч
Властивість Margin має деякі визначені значення, як показано нижче.
- Авто - За допомогою цієї властивості браузер обчислює маржу.
- Довжина - Він встановлює значення полів у px, pt, cm тощо.
- % - Він встановлює ширину% елемента.
- Успадкувати - За цією властивістю ми можемо успадкувати властивість margin від батьківського елемента.
У CSS відступ - це властивість, за допомогою якої ми можемо генерувати простір навколо вмісту елемента, а також всередині будь-якої відомої межі.
Заповнення CSS також має такі властивості, як,
- Накладка
- Оббивка вправо
- Прокладка-дно
- Заповнення ліворуч
Негативні значення не допускаються в заповнення.
div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }Питання # 21) Яка користь Box-моделі у CSS?
Відповідь: У CSS модель вікна - це вікно, яке пов'язує всі елементи HTML, і воно включає такі функції, як поля, межі, відступи та фактичний вміст.
За допомогою віконної моделі ми отримаємо повноваження додавати межі навколо елементів, а також можемо визначити простір між елементами.
Q # 22) Як ми можемо додавати піктограми на веб-сторінку?
Відповідь: Ми можемо додавати піктограми на веб-сторінку HTML, використовуючи бібліотеку значків, наприклад, awesome.
Ми повинні додати ім'я даного класу піктограм до будь-якого вбудованого елемента HTML. ( або). Піктограми в бібліотеках піктограм - це масштабовані вектори, які можна налаштувати за допомогою CSS.
Q # 23) Що таке псевдо-клас CSS?
Відповідь: Це клас, який використовується для визначення особливого стану елемента HTML.
Цей клас можна використовувати, стилізуючи елемент, коли користувач переглядає його, а також він може стилізувати елемент HTML, коли він отримує фокус.
selector:pseudo-class { property:value; }Q # 24) Поясніть поняття псевдоелементів у CSS.
Відповідь: Це особливість CSS, яка використовується для стилізації заданих частин елемента.
Наприклад ,ми можемо стилізувати першу літеру або рядок елемента HTML.
selector::pseudo-element { property:value; }Q # 25) Що таке непрозорість CSS?
Відповідь: Це властивість, яка визначає прозорість елемента.
За цією властивістю ми можемо прозорити зображення, яке може приймати значення від 0,0-1,0. Якщо значення нижче, то зображення є більш прозорим. IE8 та попередні версії браузера можуть приймати значення від 0-100.
img { opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */}Q # 26) Напишіть усі стани позицій, що використовуються в CSS.
Відповідь: У CSS є чотири стани позицій, як зазначено нижче:
- Статичний (за замовчуванням)
- Відносна
- Виправлено
- Абсолютна
Q # 27) Що таке навігаційні панелі в CSS?
Відповідь: Використовуючи навігаційні панелі, ми можемо перетворити звичайну HTML-сторінку в специфічну для користувача та більш динамічну веб-сторінку. В основному це список посилань, отже, використання
- і
- елементи має цілковитий сенс.
ul { list-style-type: none; margin: 0; padding: 0; }Q # 28) Які відмінності між відносним та абсолютним у CSS?
Відповідь: Основна відмінність між відносним і абсолютним полягає в тому, що “відносний” використовується для одного і того ж тегу в CSS, і це означає, що якщо ми напишемо лівий: 10px, тоді відступ зміститься до 10px зліва, тоді як абсолютний повністю відносно не- статичний батько.
Це означає, що якщо ми напишемо left: 10px, то результат буде 10px далеко від лівого краю батьківського елемента.
Q # 29) Визначте 'важливі' декларації, що використовуються в CSS.
Відповідь: Важливі декларації визначаються як декларації, що мають більше значення, ніж звичайні декларації.
Під час виконання ці декларації замінюють декларацію, яка має менш важливе значення.
Наприклад, якщо у двох користувачів є важлива декларація, тоді одна з декларацій замінить декларацію іншого користувача.
Наприклад:
Тіло {background: # FF00FF! Important; колір: синій}зразок плану тесту для веб-додатку
У цьому тілі фон має більшу вагу, ніж колір.
Q # 30) Визначте різні каскадні методи, які можна використовувати всередині каскадного порядку.
Відповідь: Каскадне замовлення саме по собі є методом сортування, що дозволяє застосовувати багато інших методів сортування:
а) Сортувати за походженням: Є кілька правил, які можуть запропонувати альтернативний спосіб, який визначається як:
- Звичайна вага таблиці стилів певного постачальника буде замінена збільшеною вагою таблиці стилів користувача.
- Правила таблиць стилів певного користувача будуть замінені звичайною шириною таблиці стилів постачальника.
b) Сортувати за специфікою селектора: Менш конкретний селектор замінено більш конкретним селектором.
Наприклад , Контекстний селектор є менш конкретним у порівнянні з селектором ID, який є більш конкретним, і за допомогою цього контекстного селектора перевизначається селектором ID.
в) Сортувати за вказаним порядком: Це трапляється у сценарії, коли обидва селектори мають однакову вагу та інші властивості, ніж специфікація, що буде видно для заміщення.
Приклад:
Усі інші стилі будуть помічені заміненими, якщо атрибут style використовується для вбудованого стилю.
А також, якщо елемент посилання використовується для зовнішнього стилю, він замінить імпортований стиль.
Q # 31) Розмежувати між вбудованим та блочним елементом.
Відповідь: Вбудований елемент не має елемента для встановлення ширини та висоти, а також не має розриву рядка.
Приклад: ем, сильний тощо.
Специфікація елемента блоку:
- У них є розрив рядка.
- Вони визначають ширину, встановлюючи контейнер, а також дозволяють встановлювати висоту.
- Він також може містити елемент, який зустрічається у вбудованому елементі.
Приклад:
ширина та висота
макс. ширина та макс. висота
мінімальна ширина та мінімальна висота
hi (i = 1-6) - елемент заголовка
p- Елемент абзацу.Q # 32) Як застосовується концепція успадкування в CSS?
Відповідь: Спадкування - це концепція, в якій дочірній клас успадкує властивості свого батьківського класу. Це поняття, яке використовується багатьма мовами, і є простим способом визначити ту саму властивість знову.
Він використовується в CSS для визначення ієрархії від верхнього до нижнього рівня. Спадкові властивості можуть бути замінені дитячим класом, якщо дитина використовує те саме ім'я.
Приклад:
Текст {font-size: 15pt;}
І ще одне визначення визначається в дочірньому класі
Текст {font-size: 15pt;}
H1 {розмір шрифту: 18pt;}Весь текст абзацу відображатиметься за допомогою властивості та визначатиметься в основному тексті, за винятком стилю H1, який відображатиме текст лише шрифтом 18.
Q # 33) Диференціюйте ID та клас.
Відповідь: І ID, і клас використовуються в HTML і призначають значення з CSS.
Нижче наведено відмінності:
- Ідентифікатор - це свого роду елемент, який однозначно присвоює ім'я певному елементу, тоді як клас має елемент з певним набором властивостей, який можна використовувати для повного блоку.
- Ідентифікатор можна використовувати як елемент, оскільки він може однозначно його ідентифікувати, тоді як клас також визначений для блокування елементів і застосовує занадто багато тегів, де б він не використовувався.
- ID надає обмеження на використання його властивостей для одного конкретного елемента, тоді як у класі успадкування застосовується до певного блоку або групи елемента.
Висновок
Цей список запитань та відповідей на інтерв’ю допоможе вам зламати інтерв’ю веб-розробника на більш свіжий, а також рівень досвіду. Це найчастіші запитання під час співбесіди.
Сподіваємось, ця стаття допоможе зламати будь-яке інтерв’ю, пов’язане з CSS, для веб-розробника.
Пропоноване читання = >> Запитання та відповіді на інтерв’ю веб-розробника
Бажаємо вам усіх успіхів !!
Рекомендована література