Ответы на вопросы из коллекции "📚 Коллекция ответов по предмету Программирование на языке верстки HTML и стилей CSS в МТИ– большая база! 💯"

В проекте используется дизайн система MUI. Задача создания кастомной темы. Необходимо добавить в палитру новый ключевой цвет. При этом заранее известен только базовый вариант цвета. Укажите наиболее предпочтительный вариант создания дополнительного цвета.

Что такое переход в CSS/Tailwind?

В проекте используются CSS модули. Элемент в DOM дереве имеет класс component_icon__evvnn. Конфигурация CSS модулей имеет стандартную настройку.
Какая из частей класса содержит уникальный идентификатор класса, которая позволяет создавать уникальные изолированные стили? Запишите ответ в виде строки.

Как добавить JSS в проект на React? Напишите полностью консольную команду для установки этого пакета через пакетный менеджер Yarn.

Какого (каких) из служебных классов семейства “поля” нет по умолчанию в Tailwind?

Какое свойство устанавливает значение индикатора прогресса в процентах для детерминированного варианта компонента CircularProgress?

Какой служебный класс Tailwind позволяет создать 4 строки в Grid контейнере? Напишите полное название класса.

К какому props компонента Slider относится описание: Степень детализации, с которой ползунок (при дискретном варианте) может перемещаться по значениям? Напишите название атрибута в camelCase.

В проекте используется дизайн система MUI. На странице имеется список элементов, каждый из которых обернут в Tooltip. эти элементы должны иметь подсказки при наведении. Выберите наиболее предпочтительный вариант создания подсказок для повторяющихся элементов.

К какому props компонента Button относится описание: Указывает, должна ли кнопка занимать всю ширину родительского элемента. Если значение равно true, кнопка будет занимать всю доступную ширину. Значение по умолчанию - false. Напишите название атрибута в camelCase.

CustomButton и CustomFormButton - стилизованные компоненты в React проекте со styled-components. Что означает const CustomFormButton = styled(CustomButton)`...`

Имеется компонент списка новостных анонсов. Предположим, что у нас есть массив данных товаров, которые мы хотим отобразить в виде карточек новостных анонсов, который пришел в этот компонент посредством props. Здесь мы предполагаем, что данные о товарах будут переданы в виде массива объектов с полями order, id, title, price, imageUrl и description.
При рендеринге списков какой вариант задания ключей самый оптимальный?

Какой служебный класс Tailwind позволяет создать 3 колонки в Grid контейнере?

Какой класс позволяет контейнеру, к которому применен класс prose и действует плагин typography, активировать темную версию темы? Напишите полное название класса вместе с модификатором.

Укажите порядок, в котором стоит расположить импорты в корневой CSS файл.
1) @config “./tailwind.admin.config.js”
2) @import “tailwindcss/base” @import “tailwindcss/components” @import “tailwindcss/utilities”
3) @import “./custom-base.css” @import “./custom-components.css” @import “./custom-utilities.css”

Какой вариант является правильным для создания горизонтальной цепочки элементов с использованием Flexbox?

Укажите порядок действий при создании селекта (компонента с выпадающим списком) кнопки с MUI
1) Инициализировать компонент ˂Select˃ из MUI: import Select from '@mui/material/Select';
2) Создать экземпляр этого компонента с использованием JSX. Например: ˂Select defaultValue="None" /˃
3) При необходимости настроить параметры компонента, такие как доступные опции, стиль и т. д.
4) Добавить обработчик события изменения значения селекта, если это необходимо. Например: onchange={handleChange}.

Стандартная тема содержит следующие точки адаптивности:

К какому props компонента Avatar относится описание: Этот параметр определяет стиль аватара. Возможные значения: circle, rounded, square. Значение по умолчанию - circle. Напишите название атрибута в camelCase.

Укажите порядок действий при создании компонента кнопки с MUI.
1) Импортируйте Button компонент из Material-UI: import Button from '@mui/material/Button'
2) Создайте экземпляр Button компонента: ˂Button˃Кнопка˂/Button˃
3) Настройте свойства кнопки, такие как цвет, размер, тип содержимого и т.д. ˂Button color="primary" variant="contained" size="large"˃Кнопка˂/Button˃
4) При необходимости добавьте обработчик событий, например, onclick: ˂Button onclick={(event) =˃ {console.log('Вы нажали на кнопку')}}˃Кнопка˂/Button˃

К какому props компонента Tooltip относится описание: Определяет задержку появления подсказки при наведении курсора на элемент. Значение указывается в миллисекундах. Если значение равно 0, подсказка появляется сразу при наведении. Если задать значение больше нуля, то подсказка появится через указанное количество миллисекунд. Напишите название атрибута в camelCase.

Укажите в порядке возрастания непрозрачности (от прозрачного до непрозначного) значения служебного класса opacity в Tailwind.
1) 0
2) 10
3) 50
4) 75
5) 100

К какому props компонента TextField относится описание: Это текст, который отображается в текстовом поле, пока пользователь не введет свой собственный текст. Он используется для подсказки пользователю о том, что нужно ввести в поле. Напишите название атрибута в camelCase.

В проекте используется Styled Components. Необходимо элементу CustomInput задать скругление границ углов в размере 14 пикселей. Заготовка выглядит следующим образом: const CustomInput = styled.input``. Укажите в качестве ответа полное написание необходимого CSS правила, учитывая знаки препинания и пробелы. Пример ответа: margin: 12px;

В проекте используются CSS модули. Элемент в DOM дереве имеет класс card_icon__evvnn. Конфигурация CSS модулей имеет стандартную настройку.
Какое название было у файла CSS модуля, в котором был определен этот класс? Запишите ответ в виде строки - полное название файла с раширением.

Какое свойство отвечает за количество всегда видимых страниц до и после текущей страницы в компоненте pagination?

Установите соответсвие с понятиями из React и их значениями

1. процесс отображения списка данных в пользовательском интерфейсе с использованием компонентов React.
2. позволяет рендерить различные компоненты или фрагменты кода в зависимости от выполнения определенного условия.
3. механизм передачи данных (атрибутов) от одного компонента к другому.
4. используются для определения уникальности элементов в списке.
5. lists rendering
6. conditional rendering
7. props
8. keys

Какого слова не хватает: “________: ˂выбранный цвет˃;”?

Установите соответствие условных обозначений размера и реального размера в плагине @tailwindcss/container-queries.

1. @container (min-width: 48rem /* 768px */)
2. @container (min-width: 36rem /* 576px */)
3. @container (min-width: 20rem /* 320px */)
4. @container (min-width: 24rem /* 384px */)
5. @3xl
6. @xl
7. @xs
8. @sm

В разметке компонента находится следующая структура:
{ false? ˂h1˃Заголовок1˂/h1˃ : null }.
Какой их фрагментов разметки окажется в результирующей верстки?

Как с помощью служебного класса Tailwind указать длительность перехода в 1 секунду? Классы transition и класс с указанием функции изменения уже указан. Напишите полное название класса.

Что значит “низкоуровневый” в контексте Tailwind?

В проекте используется дизайн система MUI. Для одного из элементов Button необходимо переопределить стили для состояния disabled. Укажите наиболее предпочтительный способ в соответствии с дизайн системой MUI

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

К какому props компонента Table относится описание: Управляет горизонтальным выравниванием текста в ячейке. Он может принимать значения 'left', 'center', 'right', и 'justify'. Значение по умолчанию — 'left'. Напишите название атрибута в camelCase.

Какое значение свойства максимальной ширины для компонента Container необходимо указать, если хотим ограничить ширину блока в диапазоне 1200-1536 px (при использовании темы по умолчанию)?

Какое свойство позволяет отображать элемент текстовые области вместо стандартного поля ввода в компоненте TextField?

Установите соответствие между компонентом дизайн системы MUI и группой, к которой авторы документации относят этот компонент

1. Box
2. Tabs
3. Avatar
4. Text Field
5. Layout
6. Navigation
7. Data display
8. Inputs

Какое свойство устанавливает задержку ожидания перед скрытием всплывающей подсказки, но не влияет на задержку отображение всплывающей подсказки (компонент Tooltip)??

Выберите характерные аспекты для Styled Components

Установите соответствие между названиями плагинов Tailwind и функциями, которые они выполняют

1. добавляет новые варианты размеров, которые позволяют вам стилизовать элемент на основе размеров родителя, отмеченного специальным образом.
2. добавляет набор классов, которые можно использовать для быстрого добавления разумных типографских стилей к блокам контента, которые поступают из таких источников, как маркдаун или база данных CMS.
3. добавляет упорядоченный уровень сброса формы, который упрощает стилизацию элементов формы с помощью классов утилит.
4. является альтернативой встроенной поддержке aspect-ratio, которая работает в старых браузерах, и добавляет классы , которые могут дать элементу фиксированное соотношение сторон.
5. container-queries
6. typography
7. forms
8. aspect-ratio

Что используется для создания блочных элементов в CSS?

Чтобы переопределить стандартную палитру Tailwind, не расширяя ее, необходимо использовать этот объект. Напишите полный путь до него в конфигурации, начиная с theme.

Расставьте служебные классы по возрастанию в порядке отображения слоя от самого заднего до самого переднего.
1) 0
2) 10
3) 20
4) 30
5) 40
6) 50

Укажите служебные классы в порядке увеличения сдвига по оси X (от наименьшего по модулю к наибольшему)
1) translate-x-0
2) translate-x-px
3) translate-x-0.5
4) translate-x-1
5) translate-x-1.5

Какие свойства можно анимировать с помощью Tailwind переходов?

Выберите полное название класса, с помощью которого можно указать отступ границы (ring) блока в размере 8 пикселей.

Установите соответствие служебных классов Tailwind и CSS свойств.

1. text-overflow
2. word-break
3. letter-spacing
4. line-height
5. text-ellipsis
6. break-keep
7. tracking
8. leading

Укажите порядок действий при добавлении Tailwind в проект.
1) инициализируем проект
2) добавляем в проект пакет tailwindcss
3) создаем конфигурацию проекта
4) устанавливаем пути к файлам где будем использовать
5) В src/input.css добавляем базовые директивы
6) Запускаем процесс сборки с подпиской на изменения

Установите соответствие между выражением условного рендеринга и его результатом

1. some_string
2. some_string_1
3. some_string_2
4. null
5. {false ? “some_string_2” : some_string_1}
6. {false ? “some_string_1”: “some_string_2”}
7. {true ? null : “some_string”}
8. {true ? “some_string” : null}

К какому props компонента Grid относится описание: Позволяет указать расстояние между строками в гриде. Напишите название атрибута в camelCase.

При необходимости переопределении стилей для повторно используемых компонентов применяют:

К какому props компонента Tooltip относится описание: Определяет, где будет отображаться всплывающая подсказка относительно элемента. Возможные значения этого свойства: ‘top’ | ‘right’ | ‘bottom’ | ‘left’ | ‘auto’ (позиция подсказки определяется автоматически в зависимости от доступного пространства и ориентации экрана). Напишите название атрибута в camelCase.

К какому props компонента Breadcrumbs относится описание: Указывает максимальное количество отображаемых навигационных цепочек. Если их число превышает максимальное, будут показаны только первые itemsBeforeCollapse и последние itemsAfterCollapse с многоточием между ними? Напишите название атрибута в camelCase.

Какое свойство позволяет делать множественный выбор, сохраняя значение в массив, в компоненте Select?

Укажите порядок действий для инициализации проекта с использованием MUI.
1) npx create-react-app project
2) cd project
3) yarn add @mui/material @emotion/react @emotion/styled
4) yarn start

Какой вариант значения свойства variant в компоненте LinearProgress стоит использовать, если значение прогресса отсутствует?

Какое свойство используется для добавления тени вокруг элемента?

Установите соответствие между вариантом стилизации в React проекте и его описанием.

1. это способ стилизации компонентов, который позволяет темизировать проект, используется обычную CSS нотацию, освобождает от работы с классами.
2. способ стилизации, имеющий расширенную интеграцию с jаvascript
3. это способ организации, при котором каждому компоненту присваивается уникальный набор классов и идентификаторов, позволяет избежать конфликтов имен и улучшает изоляцию стилей.
4. привычный способ стилизации, используется в create-react-app по умолчанию
5. Styled Components
6. JSS
7. CSS modules
8. CSS

Какой вариант написания стилей используется в Styled Components?

Выберите вариант правильного неименованного импорта компонента

Какое свойство CSS используется для управления прозрачностью элемента?

Установите соответствие между директивой Tailwind и ее предназначением.

1. Подключает дополнительные классы для вариантов служебных утилит (наведение, фокус, темный режим и тд.).
2. Подключает служебные классы Tailwind и любые служебные классы, зарегистрированные подключенными к проекту плагинами.
3. Подключает базовые классы компонентов Tailwind и любые классы компонентов, зарегистрированные подключенными к проекту плагинами.
4. Подключает базовые стили Tailwind и любые базовые стили, зарегистрированные подключенными к проекту плагинами.
5. @tailwind variants
6. @tailwind utilities
7. @tailwind components
8. @tailwind base

Какой класс позволяет изменить общий размер типографики на 1.25rem внутри контейнера, к которому применен класс prose и действует плагин typography? Напишите полное название класса.

На странице имеется элемента анонса новостной статьи. Элемент состоит из изображения, тегов и короткого текста. Необходимо ограничить размер текста таким образом, чтобы он занимал одинаковое количество строк. Выберите оптимальный вариант того, как это можно реализовать средствами Tailwind.

Установите соответствие между цветами палитры по умолчанию и их логическим предназначением.

1. для индикации потенциально опасных действий или важных сообщений
2. для основных элементов интерфейса
3. для вторичных элементов интерфейса
4. для выделения нейтральной информации
5. для индикации успешного завершения действия, инициированного пользователем
6. для элементов, о которых пользователь должен быть осведомлен
7. error
8. primary
9. secondary
10. warning
11. success
12. info

К какому props компонента Typography относится описание: отвечает за выравнивание текста внутри элемента. Он может принимать следующие значения: ‘left’ | ‘center’ | ‘right’ | ‘justify’. По умолчанию значение этого свойства равно ‘left’, то есть текст выравнивается по левому краю. Напишите название атрибута в camelCase.

Установите соответствие между названием props и его типом для компонента Button.

1. align
2. noWrap
3. component
4. variant
5. 'center' | 'inherit' | 'justify' | 'left' | 'right'
6. boolean
7. elementType
8. 'body1' | 'body2' | 'button' | 'caption' | 'h1' | 'h2'

Какое свойство устанавливает степень детализации, с которой ползунок можно перемещать по значениям в компоненте Slider?

В проекте используется дизайн система MUI. На главной странице расположены элементы, которые рендерятся из массивов объектов - данных, получаемых от сервера. Как правило, данные приходят с сервера дольше чем за 1 секунду. Данных о прогрессе загрузки сервер не предоставляет. Укажите наиболее предпочтительный вариант реализации интерфейса.

Установите соответствие между названием props и его типом для компонента Button.

1. 'contained' | 'outlined' | 'text' | string
2. boolean
3. string
4. elementType
5. variant
6. disabled
7. href
8. component

Какое свойство отключает эффект пульсации в компоненте Tabs?

К какому props компонента Button относится описание: Отвечает за добавление иконки в начало кнопки. Вы можете указать путь к иконке или компонент иконки, который нужно отобразить. Напишите название атрибута в camelCase.

Styled components это

В React используется специальная разновидность разметки - JSX. Напишите полное название атрибута onclick применимо к JSX разметке.

Укажите порядок, в котором выполняются консольные команды при инициализации проекта.
1) npx create-react-app my-app
2) cd my-app
3) yarn add ˂необходимые пакеты˃
4) yarn start

Расположите подстроки названия класса, сгенерированного CSS модулем component, в порядке их написания в результирующем классе.
1) component
2) _
3) select
4) __
5) axqqx

Какой подход к верстке можно охарактеризовать следующим образом: подход к организации CSS, который позволяет использовать изолированные уникальные имена классов и идентификаторов для каждого компонента?

Какого значения для утилиты aspectRatio нет в теме Tailwind по умолчанию?

За что отвечает поле theme в файле конфигурации Tailwind?

Как можно управлять порядком элементов в контейнере Flexbox?

Установите соответствие служебного класса Tailwind и CSS правила.

1. border-radius: 9999px;
2. border-radius: 0.5rem; /* 8px */
3. border-radius: 0.25rem; /* 4px */
4. border-radius: 1rem; /* 16px */
5. rounded-full
6. rounded-lg
7. rounded
8. rounded-2xl

Расставьте служебные классы по возрастанию значения высоты строки, которые они применяют к элементу.
1) leading-none
2) leading-tight
3) leading-snug
4) leading-normal
5) leading-relaxed
6) leading-loose

Какое количество символов устанавливает утилита max-w-prose в качестве максимального и оптимального для удобства чтения текста.

Какого (каких) из служебных классов семейства “ширина” нет по умолчанию в Tailwind?

Какой размер текста можно считать максимальным из предустановленных в абсолютных единицах измерения в Tailwind? Напишите полное название класса вместе с его базовой частью.