CSS: Средний уровень(11/13)

CSS (Cascading Style Sheets) — это язык, который управляет внешним видом веб-страниц. От правильного понимания базовых принципов CSS зависит не только красота интерфейса, но и удобство сопровождения и масштабирования кода. Этот материал создан на основе личного опыта прохождения теста по основам CSS. Ответы не претендуют на абсолютную истину, а демонстрируют рассуждение обычного пользователя.

🔔 Важно! Вопросы и варианты ответов в тестах могут регулярно меняться. Не исключено, что вы столкнётесь с другими формулировками, структурами или логикой. Тем не менее, изложенное ниже поможет освежить и систематизировать ваши знания перед прохождением собственного теста.

Вопрос 1.

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

Варианты:

1.     [attribute]

2.     #attribute

3.     .attribute

4.     ::attribute

5.     element:attribute

Обоснование:
В CSS для выбора элементов по атрибуту используется атрибутный селектор, записываемый в квадратных скобках.
Пример:

input[type="text"] {

border: 1px solid gray;

}

Это позволяет применить стиль к элементам, имеющим определённый атрибут (и его значение).

Выбранный ответ:
1. [attribute]

Вопрос 2.

Как выбрать все элементы внутри div с id="container"?

Варианты:

1.     #container *

2.     #container

3.     #container:all

4.     .container +

5.     .container *

Обоснование:
Чтобы выбрать все вложенные элементы внутри div с id="container", используется селектор:

#container * {

/* стили для всех вложенных элементов */

}

#container — это сам контейнер. Звёздочка * после него означает «все потомки».

Выбранный ответ:
1. #container *

Вопрос 3.

Выберите вариант ответа, в котором содержатся только ненаследуемые свойства.

Варианты:

1.     padding, list-style, box-shadow

2.     letter-spacing, margin, vertical-align

3.     text-align, animation, transform

4.     text-decoration, opacity, background-image

5.     margin, padding, display

Обоснование:
Наследуемыми являются в основном текстовые свойства (color, font-family, line-height, letter-spacing, text-align, text-decoration и др.).

Свойства вроде padding, margin, box-shadow, background-image, opacity, display, transform — ненаследуются.

Вариант 1 (padding, list-style, box-shadow) содержит только ненаследуемые свойства.

Выбранныйответ:
1. padding, list-style, box-shadow

Вопрос 4.

Как задать шрифт на странице, чтобы можно было его быстро переопределить или заменить во всех местах сразу?

Варианты:

1.     Записать font-свойства в универсальный селектор all

2.     Использовать CSS-переменные для задания шрифта

3.     Переопределять для всех элементов font-свойства через !important

4.     Применять font-свойства к каждому элементу через классы

5.     Подключать шрифты через Google Fonts и задавать их для каждого блока

Обоснование:
Наиболее гибкий и современный способ централизованного управления шрифтами — это CSS-переменные.
Пример:

:root {

--main-font: 'Roboto', sans-serif;

}

body {

font-family: var(--main-font);

}

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

Выбранный ответ:
2. Использовать CSS-переменные для задания шрифта

Вопрос 5.

На какие теги не применяются свойства width и height в CSS?

Варианты:

1.     <span>

2.     <input>

3.     <table>

4.     <div>

5.     <img>

Обоснование:
Тег <span> — это строчный элемент, и по умолчанию к нему не применяются width и height. Эти свойства работают только если изменить тип отображения, например:

span {

display: inline-block;

}

Остальные элементы (div, table, input, img) — блочные или заменяемые, и свойства ширины/высоты к ним применяются.

Выбранный ответ:
1. <span>

Вопрос 6.

Какой способ подключения CSS соответствует общепринятым стандартам веб-разработки для обеспечения удобства поддержки кода?

Варианты:

1.     Импорт CSS из файлов

2.     Подключение внешнего файла со стилями

3.     Создание внутреннего файла со стилями

4.     Использование встроенных стилей

5.     Использование инлайн-стилей

Обоснование:
Подключение внешнего CSS-файла через тег <link> — это стандартный и рекомендуемый подход.
Он:

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

Пример:

<link rel="stylesheet" href="styles.css">

Выбранный ответ:
2. Подключение внешнего файла со стилями

Вопрос 7.

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

Варианты:

1.     Указывать padding в rem

2.     Указывать padding в пикселях

3.     Указывать padding в em

4.     Указывать padding в %

5.     Задать высоту и ширину кнопки в %

Обоснование:
Единица em привязана к размеру шрифта текущего элемента.
То есть если изменить font-size у кнопки — padding, заданный в em, тоже изменится пропорционально. Это идеально подходит, чтобы сделать отступы зависимыми от размера текста внутри.

Пример:

button {

font-size: 16px;

padding: 0.5em 1em;

}

Выбранный ответ:
3. Указывать padding в em

Вопрос 8.

Что произойдёт с элементами, если размер экрана будет уменьшаться?
CSS:

.card {

display: flex;

}

.center {

flex-grow: 1;

}

.left,

.right {

flex-basis: 300px;

}

HTML:

<div class="card">

<div class="left">left</div>

<div class="center">center</div>

<div class="right">right</div>

</div>

Варианты:

1.     Сначала будет уменьшаться center, затем — left и right

2.     Сначала будет уменьшаться right и left, затем — center

3.     Все элементы начнут уменьшаться одновременно

4.     Уменьшится только center, left и right останутся неизменными

5.     Уменьшатся только left и right, center не изменится

Обоснование:

• Элементы .left и .right имеют фиксированный flex-basis: 300px — они не сжимаются по умолчанию.
• Элемент .center имеет flex-grow: 1 — он будет занимать всё свободное место.
• При уменьшении ширины экрана свободного места становится меньше, и сжиматься будет только .center, так как .left и .right жестко заданы.

Выбранный ответ:
4. Уменьшится только center, left и right останутся неизменными

Вопрос 9.

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

Варианты:

1.     flex-grow

2.     flex-wrap

3.     align-content

4.     justify-content

5.     flex-direction

Обоснование:
Свойство justify-content управляет распределением элементов вдоль главной оси в контейнере Flexbox.
Оно отвечает за выравнивание элементов, а также распределение свободного пространства между ними.
Примеры значений:

justify-content: flex-start;

justify-content: center;

justify-content: space-between;

Выбранныйответ:
4. justify-content

Вопрос 10.

Как можно прижать .logo к левому краю, а .links — к правому?

HTML:

<div class="parent" style="display: flex">

<div class="logo"></div>

<div class="links"></div>

</div>

Варианты:

1.     Задать parent min-width: max-content

2.     Задать logo width: max-content

3.     Задать logo flex: 1

4.     Задать parent justify-content: stretch

5.     Задать links align-items: center

Обоснование:
Чтобы разнести два элемента по краям в flex-контейнере, проще всего использовать margin-left: auto у второго элемента (.links).
Но если выбирать из предложенного — правильный способ — задать .logo flex: 1.
Это заставит .logo занять всё доступное пространство, а .links прижмётся к правому краю.

Выбранный ответ:
3. Задать logo flex: 1

Вопрос 11.

К какому типу относятся псевдоэлементы ::before и ::after?

Варианты:

1.     block

2.     table-cell

3.     inline-flex

4.     inline-block

5.     inline

Обоснование:
По умолчанию псевдоэлементы ::before и ::after имеют тип отображения inline. Это значит, что они ведут себя как обычный строчный элемент, пока не будет задан другой display.

Если нужно изменить поведение — задают явно display: block, inline-block и т.д.

Выбранный ответ:
5. inline

Вопрос 12.

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

Варианты:

1.     button:hover

2.     button::before:hover

3.     button *:hover

4.     button:active:hover

5.     button::after:hover

Обоснование:
Чтобы изменить внешний вид кнопки при наведении, используется псевдокласс :hover, применяемый напрямую к элементу.
Пример:

button:hover {

background-color: blue;

}

Остальные варианты относятся к дочерним или псевдоэлементам, и не управляют самим button.

Выбранный ответ:
1. button:hover

Вопрос 13.

Как отменить или прервать CSS-переход?

Варианты:

1.     Установить transition: none; на элементе для отмены переходов

2.     Установить свойство animation-play-state: paused; для отмены анимации

3.     Применить animation: none; для прекращения всех анимаций

4.     Использовать псевдокласс :no-transition для отмены переходов

5.     Использовать transition-property: none; для отмены всех переходов на элементе

Обоснование:
Для отмены CSS-переходов (transitions) используется свойство:

transition: none;

Это отключает все эффекты плавного перехода на элементе.
Остальные варианты относятся к анимациям (animation), а не transition, или не существуют вовсе (например, :no-transition — несуществующий псевдокласс).

Выбранный ответ:
1. Установить transition: none; на элементе для отмены переходов