Знание синтаксиса, поведения различных свойств, работы с селекторами и адаптивной верстки позволяет уверенно верстать сайты и понимать, как стили взаимодействуют с HTML-структурой. В этой статье я рассмотрю тест продвинутого уровня.

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

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

Вопрос 1.

С помощью какого селектора можно выбрать элементы с классами d и f?

HTML:

<div class="a">

<div class="b">

<p class="c">text</p>

</div>

<div class="d">

<p class="e">text</p>

</div>

<div class="f">

<span class="g">Text</span>

<div class="h">Text</div>

</div>

Варианты:

1. .a > div

2. div > div

3. .d .f

4. div + div

5. div.d.f

Обоснование:
Элементы с классами d и f являются дочерними элементами внутри div.a, каждый из них — прямой потомок.
Поэтому селектор, который точно выберет все дочерние div внутри div.a

Он захватывает и .d, и .f, и .b.

*Селектор div > div тоже работает, но он более общий и может выбрать лишние элементы, не обязательно относящиеся к a.
А .a > div — точный, семантически верный.

Выбранный ответ:
1. .a > div

Вопрос 2.

Как убрать подчеркивание у всех ссылок?

Варианты:

1. html { text-decoration: none !important; }

2. body > * { text-decoration: none !important; }

3. body { text-decoration: none; }

4. body + * { text-decoration: none; }

5. body * { text-decoration: none; }

Обоснование:
Чтобы убрать подчёркивание у всех ссылок, нужно выбрать только теги <a>, потому что text-decoration по умолчанию применяется именно к ним.

Однако среди предложенных вариантов нет селектора a, но самый приближённый способ, который сработает, — это:

body * {

text-decoration: none;

}

Он снимет подчёркивание со всех вложенных элементов, включая <a>, хотя и может повлиять на другие элементы, где text-decoration используется (например, ins).

На практике правильнее было бы написать:

a {

text-decoration: none;

}

Выбранныйответ:
5. body * { text-decoration: none; }

Вопрос 3.

Как добавить логотип (размеры изображения 40×40 пикселей) на страницу через тег <img> для адаптивной вёрстки?

Варианты:

1. Сделать img строчным тегом

2. Задать flex-basis

3. Дополнительных действий совершать не нужно

4. Ограничить ширину и высоту

5. Сделать img блочным тегом

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

img {

max-width: 100%;

height: auto;

}

Однако в случае маленького логотипа 40×40 px, чтобы он не увеличивался и не разъезжал вёрстку — нужно явно ограничить его размеры.

Выбранный ответ:
4. Ограничить ширину и высоту

Вопрос 4.

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

Варианты:

1. Использовать атрибут <style> внутри каждого HTML-тега

2. Применять JavaScript для динамического добавления CSS

3. Подключить внешний CSS-файл с помощью тега <link> в <head>

4. Использовать тег <meta> с атрибутом name

5. Выставлять стили в каждом HTML-файле внутри тега <style>

Обоснование:
На практике, если проект содержит несколько HTML-страниц, наилучший способ повторного использования CSS — это вынесение стилей во внешний файл и подключение его через:

Это позволяет:

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

Выбранный ответ:
3. Подключить внешний CSS-файл с помощью тега <link> в <head>

Вопрос 5.

Как поменять значение padding для всех ссылок, если padding задавался через rem?

Варианты:

1. Изменить font-size у body

2. Написать padding в тег body, все ссылки унаследуют padding

3. Изменить font-size у каждого непосредственного родителя каждой ссылки

4. Написать padding в тег html, все ссылки унаследуют padding

5. Изменить font-size у каждой ссылки

Обоснование:
Единица измерения rem (root em) зависит от font-size корневого элемента html, а не body или родителя.

То есть:

a {

padding: 1rem;

}

Если вы хотите, чтобы у всех ссылок изменился padding, заданный в rem, — нужно изменить font-size у html, т.к. именно он определяет, сколько пикселей в 1 rem.

Выбранный ответ:
4. Написать padding в тег html, все ссылки унаследуют padding

Хотя формулировка слегка некорректна (лучше: «изменить font-size у html»), смысл понятен — именно через html элемент rem работает.

Вопрос 6.

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

(Три элемента: два слева с равными отступами, третий — справа, занимает оставшееся пространство.)

Варианты:

1. Установить display: flex и добавить третьему элементу flex-grow: 1

2. Применить display: flex; justify-content: stretch

3. Задать display: flex и использовать column-gap и row-gap

4. Использовать display: flex и margin для ручной настройки

5. display: flex; gap: 5% + flex-basis: 50% у последнего элемента

Обоснование:
На изображении видно, что первый и второй элементы фиксированной ширины, а третий расширяется и прижат вправо. Такое поведение достигается, когда контейнер display: flex, а последний элемент получает flex-grow: 1.

То есть:

.container {

display: flex;

gap: 16px; /* или другой способ задать отступы */

}

.item:last-child {

flex-grow: 1;

}

Выбранный ответ:
1. Установить display: flex и добавить третьему элементу flex-grow: 1, для заполнения всего доступного пространства

Вопрос 7.

Выберите верное утверждение о Flexbox.

Варианты:

1. Флексбокс требует больше кода и сложнее в использовании, чем float и позиционирование

2. Флексбокс обеспечивает только горизонтальное выравнивание

3. Не все современные браузеры поддерживают флексбокс

4. Флексбокс не позволяет переносить элементы на несколько строк

5. Флексбокс не умеет создавать двумерные сетки

Обоснование:
Разберём по пунктам:

1. Неверно — Flexbox упрощает разметку и требует меньше кода по сравнению с float.

2. Неверно — Flexbox работает вдоль главной оси, которую можно установить как горизонтальной, так и вертикальной.

3. Устарело — Все современные браузеры поддерживают Flexbox.

4. Неверно — Flexbox позволяет переносить элементы на несколько строк с помощью flex-wrap: wrap.

5. Верно — Flexbox одномерный, он не предназначен для двумерных сеток (строки + колонки одновременно). Для этого нужен CSS Grid.

Выбранный ответ:
5. Флексбокс не умеет создавать двумерные сетки

Вопрос 8.

Создать зелёную декоративную линию, разделяющую заголовок и текст, используя только CSS

Варианты:

1. box-shadow

2. outline

3. stroke

4. after

5. border-bottom

Обоснование:
Под заголовком "Choose How Often" видно тонкую зелёную линию — это типичный декор, который удобно добавлять через псевдоэлемент ::after.

Такой приём позволяет:

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

Пример кода:

h2::after {

content: "";

display: block;

width: 60px;

height: 3px;

margin: 8px auto;

background-color: green;

}

Выбранный ответ:
4. after

Вопрос 9.

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

Варианты:

1. a:enabled

2. a:checked

3. a:visited

4. a:active

5. a:blank

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

a:enabled — относится к формам (input, textarea), не к ссылкам
a:checked — используется для radio/checkbox
a:visited — псевдокласс для уже посещённых ссылок
a:active — при нажатии мышкой, но не для состояния "посещена"
a:blank — такого псевдокласса не существует в CSS

Выбранный ответ:
3. a:visited

Вопрос 10.

Как реализовать функцию reduce motion для выключения всех анимаций и переходов на странице, используя @keyframes и CSS?

Варианты:

1. { transition-duration: 0 !important; animation: none !important; }

2. { transition-duration: 0; animation: none; }

3. { transition-delay: 0 !important; animation: none; }

4. { transition-timing-function: ease; animation: none; }

5. { transition-property: none; animation: none !important; }

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

Для реализации функции reduce motion, применяемой при пользовательском предпочтении сократить движения (например, из-за вестибулярной чувствительности), чаще всего применяется:

@media (prefers-reduced-motion: reduce) {

* {

animation: none !important;

transition-duration: 0s !important;

}

Таким образом:

animation: none !important отключает keyframes
transition-duration: 0 !important отключает плавные переходы

Правильный вариант — №1, так как он корректно отключает оба эффекта с высокой специфичностью (!important).

Выбранныйответ:
1. { transition-duration: 0 !important; animation: none !important; }

Вопрос 11.

Как можно создать 3D-эффект переворота карточки по оси X с помощью трансформации в CSS?

Варианты:

1. transform: rotateX(360deg)

2. transform: skew(360deg)

3. transform: scale3d(1, 0, 0)

4. transform: matrix3d(360, 360, 360, 360)

5. transform: perspective(360px)

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

Чтобы создать 3D-переворот по оси X, нужно:

применить transform: rotateX(...) — это позволяет вращать элемент в 3D-пространстве;
задать перспективу на родительском элементе через perspective, чтобы глубина была видна.

Пример:

.card {

transform: rotateX(180deg);

transform-style: preserve-3d;

}

.parent {

perspective: 1000px;

}

Выбранныйответ:
1. transform: rotateX(360deg)

Вопрос 12.

Выберите вариант с лучшей производительностью позиционирования.

Варианты:

1. position: absolute; left: 100px

2. display: block

3. transform: translate(20px)

4. position: fixed; right: 0px

5. position: sticky

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

Из всех представленных способов наиболее производительным при изменении позиции элемента (особенно в анимациях и динамическом перемещении) является:

transform: translate(...)

Преимущества:

Не вызывает перерисовку (reflow), только repaint или compositor layer update.
Используется GPU-ускорение, что делает анимации и перемещения плавнее.
Отлично подходит для requestAnimationFrame, интерактивных интерфейсов, drag-n-drop, и прочего UI.

Остальные варианты могут вызывать более затратные операции рендеринга и перекомпоновку DOM-дерева.

Выбранныйответ:
3. transform: translate(20px)

Вопрос 13.

Выберите вариант с наименьшим весом селекторов (приоритетом).

HTML:

Варианты:

1. p.test#test

2. p.text.sample

3. .text.sample.test

4. p#test.sample

5. p.sample#test

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

Вес CSS-селекторов рассчитывается по формуле:

1 балл за каждый элемент (тип тега)
10 баллов за каждый класс
100 баллов за каждый id

Теперь оценим вес каждого варианта:

1. p.test#test → тег (1) + класс (10) + id (100) = 111

2. p.text.sample → тег (1) + 2 класса (20) = 21

3. .text.sample.test → 3 класса (30) = 30

4. p#test.sample → тег (1) + id (100) + класс (10) = 111

5. p.sample#test → тег (1) + класс (10) + id (100) = 111

Правильный ответ:
2. p.text.sample

У этого селектора наименьший приоритет (вес) — всего 21, остальные — выше.

Вопрос 14.

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

<style>

* {

margin: 0;

padding: 0;

}

body {

height: 100vh;

}

</style>

<body>

<header class="header">header</header>

<main class="main">main</main>

<footer class="footer">footer</footer>

</body>

Варианты ответа:

.main { height: max-content; } и .footer { height: min-content; }
.footer { position: absolute; top: 100%; width: 100% }
body { display: flex; flex-direction: column } и .main { flex-grow: 1 }
.main { height: 100%; }
.footer { transform: translateY(100%) }

Обоснование:
Чтобы прижать footer к низу экрана и при этом не создавать вертикальную прокрутку, лучше всего использовать флекс-верстку на body с направлением колонкой, а main задать flex-grow: 1, чтобы он занимал всё доступное пространство между header и footer.

Выбранныйответ:
3. body { display: flex; flex-direction: column } и .main { flex-grow: 1 }

Вопрос 15.

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

.card {

width: 1200px;

height: 600px;

background-color: slateblue;

}

@media (width: 1200px) {

.card {

background-color: peachpuff;

transition: all 0.3s ease 0s;

}

Варианты ответа:

Карточка не изменится
Карточка изменит цвет
Карточка будет пропорционально уменьшаться по ширине и высоте
Карточка будет менять только свою ширину в зависимости от ширины экрана
Запустится анимация

Обоснование:
В CSS указан медиа-запрос @media (width: 1200px), но это условие сработает при ширине экрана ровно 1200px, а не меньше. То есть если ширина экрана меньше 1200px, то условия из медиа-запроса применяться не будут, и карточка останется с заданными стилями — ширина 1200px, высота 600px, цвет slateblue.

Выбранный ответ:
1. Карточка не изменится.