50 лучших вопросов и ответов на собеседовании по CSS (2025 г.)

Вот вопросы и ответы на собеседовании по 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.

---

7. Как центрировать блочные элементы с помощью CSS1?

Элементы уровня блока можно центрировать следующим образом:

Свойствам Margin-Left и Margin-Right можно задать какое-то явное значение:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

В этом случае левое и правое поля будут иметь ширину по пять em, поскольку они разделяют десять em, оставшиеся от (40em-30em). В явной настройке ширины элемента BODY не было необходимости; здесь это сделано для простоты.

---

8. Кто поддерживает спецификации CSS?

Консорциум World Wide Web поддерживает спецификации CSS.

---

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

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

• Встроенный: атрибут Style можно использовать для применения CSS-элементов HTML.
• Встроенное: элемент Head может иметь элемент Style, внутри которого можно разместить код.
• Связанный/импортированный: CSS можно поместить во внешний файл и связать с ним через элемент ссылки.

---

10. Какие преимущества и недостатки имеют внешние таблицы стилей?

Бенефиты:

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

Demerits:

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

---

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. Для чего используется селектор классов?

Селекторы, уникальные для определенного стиля, называются селекторами CLASS. С помощью этого можно выполнить объявление стиля и ассоциации с HTML. Синтаксис:

Имя класса
это может быть AZ, az или цифры.
.top {font: 14em ;}, селектор классов
этот класс связан с элементом

---

22. Отличить селектор класса от селектора идентификатора?

В то время как селектору класса передается весь блок, селектор идентификатора предпочитает только один элемент, отличающийся от других элементов. Другими словами, идентификаторы уникальны, а классы — нет. Возможно, элемент имеет и класс, и идентификатор.

---

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 и каковы ее элементы?

Это поле определяет дизайн и расположение элементов CSS. Элементы:

Маржа: самый верхний слой, показана общая структура
Граница: отображается опция заполнения и содержимого с рамкой вокруг нее. Цвет фона влияет на границу.
Набивка: отображается пробел. Цвет фона влияет на границу.
Контент: отображается актуальное содержимое.

---

30. Что такое контекстный селектор?

Селектор, используемый для выбора особых вхождений элемента, называется контекстным селектором. Отдельные селекторы разделяются пробелом. В этом типе селектора адресуется только последний элемент шаблона. Например: TD P TEXT {цвет: синий}

---

31. Сравните значения RGB с шестнадцатеричными цветовыми кодами?

Цвет можно указать двумя способами:

• Цвет представлен 6 символами, т.е. шестнадцатеричным кодированием цвета. Это комбинация цифр и букв, которой предшествует #. например: г {цвет: #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. Ему предшествует @, за которым следует AZ, az или 0-9.

---

50. Как можно каскадно объединить CSS с личным листом пользователя?

Свойства могут быть установлены в рекомендуемых местах, а документ изменен с помощью CSS для смешивания с личным листом пользователя.

Эти вопросы на собеседовании также помогут вам в устной речи. В каждой отрасли использование веб-сайтов и веб-приложений растет с каждым днем, и CSS является важной частью создания привлекательных веб-сайтов. Таким образом, существует огромный спрос на UI/UX и веб-дизайнеров, хорошо знающих CSS и HTML.