Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Что такое специфичность в CSS?
Специфичность в CSS — это способ определения приоритета CSS-правил, когда к одному элементу применяются несколько конфликтующих стилей. Она рассчитывается на основе количества селекторов разных типов в правиле:
Инлайн-стили (например, style="color: red;") имеют наивысший приоритет.
ID-селекторы (#id) более специфичны, чем классы (.class) или теги (div).
Универсальные селекторы (*) и каскадность имеют минимальный приоритет.
Например:
#id { color: blue; } /* более специфично, чем */
.class { color: green; }Можете объяснить концепцию CSS box model (блочная модель)?
CSS box model - это основной концепт в CSS, описывающий как элементы на веб-странице представлены в виде прямоугольных блоков, состоящих из контента, отступов, границ и внутренних полей.
Какие есть виды подключения CSS в HTML?
Существует три основных способа подключения CSS к HTML: встроенный, внутренний и внешний. Встроенный CSS применяет стили непосредственно к элементу с помощью атрибута style. Внутренний CSS размещается внутри тега <style> в <head> HTML-документа и применяется ко всем элементам на странице. Внешний CSS хранится в отдельном файле с расширением .css, который подключается к HTML через тег <link> в <head>, что позволяет использовать одни и те же стили на нескольких страницах.
Как реализовать поддержку темной темы (dark mode) с помощью HTML и CSS? Какие метатеги и медиавыражения используются?
Темную тему можно реализовать с помощью CSS-медиавыражения prefers-color-scheme, которое определяет предпочтения пользователя относительно цветовой схемы (светлой или темной). В зависимости от предпочтений браузера применяются соответствующие стили. Также можно настроить переключение темы вручную с помощью JavaScript и CSS-классов.
Работа с классами на элементах DOM?
Для работы с классами на элементах DOM используйте методы classList. Вы можете добавлять, удалять и проверять классы с помощью методов add(), remove() и contains().
Например:
const element = document.getElementById('myElement');
element.classList.add('active');Этот код добавляет класс active к элементу.
Каковы преимущества использования CSS-препроцессоров, таких как Sass или Less?
Каковы преимущества использования CSS Grid и Flexbox ?
В чем разница между inline, block и inline-block элементами в CSS?
Какие популярные CSS фреймворки вы использовали?
Какие свойства CSS вы можете использовать для управления переполнением контента?
Рейтинг:
4
Сложность:
8
CSS-препроцессоры, такие как Sass и Less, позволяют использовать переменные, вложенные правила, функции и миксины, что упрощает создание и поддержку стилей. Они способствуют модульности и повторному использованию кода, что делает стили более структурированными и удобными для изменения. Препроцессоры также добавляют возможность логических операций и циклов, что невозможно в обычном CSS.
Рейтинг:
3
Сложность:
6
CSS Grid и Flexbox упрощают создание адаптивных и сложных раскладок. Grid подходит для построения двухмерных макетов, где нужно управлять как строками, так и столбцами, в то время как Flexbox идеально подходит для одномерных раскладок, таких как выравнивание элементов в строке. Оба инструмента позволяют легко управлять выравниванием, распределением пространства и адаптивностью.
Рейтинг:
1
Сложность:
2
Элементы block занимают всю ширину родителя и начинаются с новой строки, элементы inline размещаются в одной строке и занимают только необходимую ширину, а inline-block совмещает свойства обоих — размещается в одной строке, но позволяет задавать ширину и высоту. Различие между этими типами влияет на построение и компоновку страницы.
Рейтинг:
3
Сложность:
9
Самые популярные CSS фреймворки включают Bootstrap, Foundation и Bulma. Они предоставляют готовые стили и компоненты для ускорения разработки. Знание таких фреймворков позволяет быстрее создавать адаптивные веб-страницы.
Рейтинг:
2
Сложность:
5
Для управления переполнением можно использовать свойства overflow, text-overflow и white-space. Эти свойства позволяют скрывать, добавлять прокрутку или корректно обрезать содержимое.
Рейтинг:
3
Сложность:
3
Рейтинг:
2
Сложность:
3
Рейтинг:
3
Сложность:
4
Рейтинг:
1
Сложность:
4
Рейтинг:
1
Сложность:
2