Топ-50 запитань і відповідей на інтерв’ю CSS (2024)

Ось питання та відповіді на співбесіді з CSS (CSS3) для новачків, а також для досвідчених кандидатів, щоб отримати роботу своєї мрії.

Безкоштовне завантаження PDF: Питання для співбесіди з CSS

1. Що таке CSS?

Повною формою CSS є каскадні таблиці стилів. Це досить проста мова стилів для HTML елементів. Він популярний у веб-дизайні, і його застосування також поширене в XHTML.


2. Яке походження CSS?

Стандартна узагальнена мова розмітки поклала початок таблицям стилів у 1980-х роках.


3. Які є різні варіанти CSS?

Варіанти CSS:

  • CSS 1
  • CSS 2
  • CSS 2.1
  • CSS 3
  • CSS 4

4. Які обмеження CSS?

Обмеження:

  •  Зростання селекторами неможливе
  • Обмеження вертикального контролю
  • Ніяких виразів
  • Немає оголошення стовпця
  • Псевдоклас не контролюється динамічною поведінкою
  • Правила, стилі, націлювання на конкретний текст неможливі

5. Які переваги CSS?

Переваги:

  • ширина смуги
  • Узгодженість на всьому сайті
  • Переформатування сторінки
  • Доступність
  • Контент відокремлений від презентації

6. Що таке фреймворки CSS?

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

Запитання CSS на співбесіді
Питання для співбесіди CSS3

7. Як елементи блоку можна центрувати за допомогою CSS1?

Елементи рівня блоку можна центрувати:

Для властивостей margin-left і margin-right можна встановити певне явне значення:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

У цьому випадку ліве та праве поля матимуть ширину п’ять ем, оскільки вони поділяють десять ем, що залишилися від (40em-30em). Це було непотрібним для встановлення явної ширини для елемента BODY; це було зроблено тут для простоти.


8. Хто підтримує специфікації CSS?

World Wide Web Consortium підтримує специфікації CSS.

Питання для співбесіди CSS3
Питання для співбесіди CSS3

9. Скількома способами CSS можна інтегрувати як веб-сторінку?

CSS можна інтегрувати трьома способами:

  • Inline: атрибут стилю можна використовувати для застосування HTML-елементів CSS.
  • Вбудований: елемент Head може мати елемент Style, у якому можна розмістити код.
  • Пов’язаний/імпортований: CSS можна розмістити у зовнішньому файлі та зв’язати через елемент посилання.

10. Які переваги та недоліки мають зовнішні таблиці стилів?

Переваги:

  • Один файл можна використовувати для керування кількома документами, що мають різні стилі.
  • Кілька елементів HTML можуть мати багато документів, які можуть мати класи.
  • Для групування стилів у складених ситуаціях використовуються такі методи, як селектор і групування.

Недоліки:

  • Для імпорту документів із інформацією про стиль потрібне додаткове завантаження.
  • Щоб відобразити документ, слід завантажити зовнішню таблицю стилів.
  • Не практично для невеликих визначень стилю.

11. Обговоріть переваги та недоліки вбудованих таблиць стилів?

Переваги вбудованих таблиць стилів:

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

Недоліки вбудованих таблиць стилів:

  • Кілька документів не можна контролювати.

12. Що означає селектор CSS?

Рядковий еквівалент елементів HTML, за допомогою якого оголошуються оголошення або їх набір, і є посиланням, на яке можна посилатися для зв’язування HTML і таблиці стилів, – це селектор CSS.


13. Перелічіть типи носіїв, які дозволяє CSS?

Дизайн і налаштування документів відображаються засобами масової інформації. Застосовуючи керування медіафайлами до зовнішніх таблиць стилів, їх можна отримати та використовувати, завантаживши їх із мережі.


14. Як відрізнити логічні теги від фізичних?

  • Хоча фізичні теги також називають презентаційною розміткою, логічні теги марні для зовнішнього вигляду.
  • Фізичні теги є новішими версіями, тоді як логічні теги старі та зосереджені на вмісті.

15. Відрізнити концепцію таблиці стилів від HTML?

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


16. Опишіть «набір правил»?

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

Він складається з двох частин:

  • Селектор, наприклад R і
  • декларація {text-indent: 11pt}

17. Прокоментуйте чутливість до регістру CSS?

Хоча CSS не враховує регістр, однак сімейства шрифтів, URL-адреси зображень тощо є. Тільки коли XML декларації разом із XHTML DOCTYPE використовуються на сторінці, CSS чутливий до регістру.


18. Визначити блок оголошення?

Каталог вказівок у дужках, що складається з властивості, двокрапки та значення, називається блоком оголошення.
наприклад: [властивість 1: значення 3]


19. Перелічіть атрибути різних шрифтів?

До них відносяться:

  • Стиль шрифту
  • Шрифт-варіант
  • Вага шрифту
  • Розмір шрифту/висота рядка
  • Сімейство шрифтів
  • Підпис
  • Іконка

 


20. Чому легко вставити файл, імпортувавши його?

Імпорт дає змогу комбінувати зовнішні аркуші для вставлення в багато аркушів. Різні файли та аркуші можна використовувати для виконання різних функцій. Синтаксис:

Нотація @import, використовується з tag.


21. Для чого використовується селектор класів?

Селектори, унікальні для певного стилю, називаються селекторами КЛАСУ. Оголошення стилю та асоціації з HTML можна зробити через це. Синтаксис:

Назва класу
це може бути AZ, az або цифри.
.top {font: 14em ;}, селектор класу
цей клас асоціюється з element


22. Відрізнити селектор класу від селектора ідентифікатора?

У той час як загальний блок надається селектору класу, селектор ID віддає перевагу лише одному елементу, що відрізняється від інших елементів. Іншими словами, ID є унікальним, а класи – ні. Можливо, що елемент має і клас, і ідентифікатор.


23. Чи можна додати більше однієї декларації в CSS?

Так, цього можна досягти за допомогою крапки з комою.


24. Що таке псевдоелементи?

Псевдоелементи використовуються для додавання спеціальних ефектів до деяких селекторів. CSS використовується для застосування стилів у розмітці HTML. У деяких випадках, коли додаткова розмітка або стиль неможливі для документа, у CSS доступна функція, відома як псевдоелементи. Це дозволить додати додаткові розмітки до документа, не порушуючи фактичний документ.


25. Як скасувати підкреслення гіперпосилань?

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

Наприклад:

B {

text-decoration: none;

}

<B href="career.html" style="text-decoration: none">link text</B>

 


26. Що станеться, якщо використовувати 100% ширину разом із плаваючими по всій сторінці?

Під час створення декларації float додається 1 піксель кожного разу, коли він використовується у формі рамки, і після цього дозволяється навіть більше float.


27. Чи можна відновити значення властивості за замовчуванням за допомогою CSS? Якщо так, то яким чином?

У CSS ви не можете повернутися до старих значень через відсутність значень за замовчуванням. Властивість можна повторно оголосити, щоб отримати властивість за замовчуванням.


28. Перелічіть різні типи носіїв, що використовуються?

Різні носії мають різні властивості, оскільки вони нечутливі до регістру.

До них відносяться:

  • Aural – для звукових синтезаторів і мови
  • Друк – надає попередній перегляд вмісту під час друку
  • Проекція – проектує CSS на проекторах.
  • Handheld - використовує портативні пристрої.
  • Екран - екрани комп'ютерів і ноутбуків.

29. Що таке CSS Box Model і які її елементи?

Цей блок визначає дизайн і компонування елементів CSS. Елементи:

Маржа: верхній шар, показана загальна структура
Кордон: показано параметри відступу та вмісту з рамкою навколо нього. Колір фону впливає на рамку.
Набивання: показано пробіл. Колір фону впливає на рамку.
зміст: відображається фактичний вміст.


30. Що таке контекстний селектор?

Селектор, який використовується для вибору спеціальних входжень елемента, називається контекстним селектором. Пробіл відділяє окремі селектори. У цьому виді селектора звертається лише до останнього елемента шаблону. Наприклад: TD P TEXT {колір: синій}


31. Порівняти значення RGB із шістнадцятковими кодами кольорів?

Колір можна вказати двома способами:

  • Колір представлений 6 символами, тобто шістнадцятковим кодуванням кольору. Це комбінація цифр і літер, якій передує #. наприклад: g {колір: #00cjfi}
  • Колір представлений сумішшю червоного, зеленого та синього. Також можна вказати значення кольору. наприклад: rgb(r,g,b): у цьому типі значення можуть бути між цілими числами від 0 до 255. rgb(r%,g%,b%): відображається червоний, зелений і синій відсотки.

32. Визначити спрайти зображення з контекстом для CSS?

Коли набір зображень об’єднується в одне зображення, це називається «спрайтами зображення». Оскільки завантаження кожного зображення на веб-сторінці займає час, використання спрайтів зображень скорочує час і швидко надає інформацію.

Кодування CSS:

img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }

 

У цьому випадку використовується тільки необхідна частина. Завдяки цьому користувач може заощадити значний запас і час.


33. Порівняйте групування та вкладення в CSS?

Групування: селектори можна групувати, маючи однакові значення властивостей, а код зменшувати.
Наприклад:

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

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

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

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 


34. Як можна визначити розмірність елемента?

Властивості розміру можна визначити:

  • висота
  • Максимальна висота
  • Максимальна ширина
  • Мінімальна висота
  • Мінімальна ширина
  • ширина

35. Визначте властивість float CSS?

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


36. Як функціонує індекс Z?

Під час використання CSS для позиціонування елементів HTML може виникнути перекриття. Індекс Z допомагає визначити елемент, що перекривається. Це число, яке може бути додатним або від’ємним, стандартним значенням є нуль.


37. Що таке витончена деградація?

Якщо компонент виходить з ладу, він продовжуватиме працювати належним чином за наявності плавного погіршення. Під час розробки веб-сторінки використовується остання програма браузера. Оскільки він доступний не всім, є базовий функціонал, який дає змогу використовувати його ширшій аудиторії. Якщо зображення недоступне для перегляду, текст відображається з тегом alt.


38. Що таке прогресивне покращення?

Це альтернатива витонченій деградації, яка зосереджена на матерії Інтернету. Функціональність така сама, але вона забезпечує додаткову перевагу для користувачів, які мають найновішу пропускну здатність. Останнім часом він широко використовується, оскільки мобільні підключення до Інтернету розширюють свою базу.


39. Як можна створити зворотну сумісність у CSS?

Методи аркуша HTML співпрацюють із CSS і використовуються відповідно.


40. Як можна усунути розрив під зображенням?

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

CSS

img { display: block ; }

 


41. Чому @import лише вгорі?

@import бажано використовувати лише вгорі, щоб уникнути будь-яких переважних правил. Як правило, порядок ранжирування дотримується в більшості мов програмування, таких як Java, Modula тощо. У C # є яскравим прикладом того, що @import знаходиться вгорі.


42. Що з наведеного є більш прецедентним: властивості CSS чи процедури HTML?

CSS має більший прецедент, ніж процедури HTML. Браузери, які не підтримують CSS, відображають атрибути HTML.


43. Що таке вбудований стиль?

Вбудований стиль у CSS використовується для додавання стилю до окремих елементів HTML.


44. Як можна додавати коментарі в CSS?

Коментарі в CSS можна додавати за допомогою /* і */.


45. Визначити селектор атрибутів?

Визначається набором елементів, величиною та її частинами.


46. ​​Дайте визначення властивості?

Стиль, який допомагає впливати на CSS. Наприклад, ШРИФТ. Вони мають відповідні значення або властивості всередині них, наприклад, FONT має інший стиль, наприклад жирний, курсив тощо.


47. Що таке альтернативна таблиця стилів?

Альтернативні таблиці стилів дозволяють користувачеві вибрати стиль, у якому відображатиметься сторінка, за допомогою меню «Перегляд>Стиль сторінки». За допомогою альтернативної таблиці стилів користувач може переглядати кілька версій сторінки відповідно до своїх потреб і вподобань.


48. Чи обов’язкові лапки в URL-адресах?

Лапки необов’язкові для URL-адрес, і вони можуть бути одинарними або подвійними.


49. Що таке at-rule?

Правило, яке застосовується до всього аркуша, а не частково, називається at-rule. Йому передує @, а потім AZ, az або 0-9.


50. Як можна каскадувати CSS для змішування з особистим аркушем користувача?

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

Ці запитання для співбесіди також допоможуть у вашій віва (усній). У кожній галузі використання веб-сайтів і веб-додатків зростає з кожним днем, і CSS є важливою складовою створення привабливих веб-сайтів. Отже, існує величезний попит на UI/UX та веб-дизайнерів, які добре знають CSS з HTML.

Поділитись

10 Коментарі

  1. Аватара harmeek каже:

    неповна інформація, якщо ви збираєтеся дати відповідь, поясніть це. Такого роду питання інтерв'юер dosent aks!!.

  2. Аватара Кавана Шива Кумар каже:

    Дякую, дуже корисна інформація

  3. Аватара синій каже:

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

  4. Аватара Техніка кмітливість каже:

    Відповідь нижче неповна
    «22. Відрізнити селектор класу від селектора ідентифікатора?
    У той час як загальний блок надається селектору класу, селектор ідентифікатора надає перевагу лише одному елементу, який відрізняється від інших елементів».

    Я ціную великі зусилля.

    Дякую

  5. Аватара Ashish каже:

    Будь ласка, визначте float, фонове рухоме зображення та елемент tAg перегляду кліпу в CSS.
    Дякую
    Попелястим

  6. Аватара сухий каже:

    Дякую за стрижки, це чудово. Будь ласка, напишіть більше про цю тему..

    1. Аватара Бен каже:

      Привіт, сер, мій живий сервер не працює належним чином. Я натискаю кнопку «Запустити», щоб запустити свій проект, і він працює. Основна проблема полягає в тому, що якщо я зміню щось у тегах або словах, я не можу запустити свій проект. Тільки якщо Я зупиняю цей живий сервер і запускаю його, він знову працює. Я не знаю, як із цим впоратися. Якщо у вас є час, дайте відповідь на моє запитання. Дякую.

  7. Аватара Абхіджит Сапкале каже:

    Дуже дякую за чудове запитання

залишити коментар

Ваша електронна адреса не буде опублікований. Обов'язкові поля позначені * *