CSS: Базовый уровень(10/10)

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

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

Важно! Материалы ниже представлены исключительно в образовательных целях и отражают личную практику прохождения теста обычным пользователем. Приведённые ответы не являются эталонными — они демонстрируют лишь ход рассуждений при решении.

Учтите, что вопросы в тестах регулярно обновляются, и структура или формулировки заданий могут отличаться. Будьте готовы к разнообразию формулировок и подходов!

Вопрос 1.

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

1.     #class

2.     class

3.     .class

4.     :class

5.     /class/

Обоснование:
В CSS для выбора элемента по классу используется точка (.) перед именем класса.
Пример: .button { color: red; }

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

Вопрос 2.

Выберите вариант, в котором селекторы расположены в порядке увеличения их приоритета.
Варианты:

1.     p, #text, .text

2.     p, .text, #title

3.     .text, p, #title

4.     #text, .text, p

5.     .text, #text, p

Обоснование:
CSS-селекторы по приоритету: элемент (p) < класс (.text) < id (#title).
Правильный порядок: p, .text, #title

Выбранный ответ:
2. p, .text, #title

Вопрос 3.

Какой из перечисленных селекторов используется для применения стилей ко всем элементам параграфов (<p>), которые находятся внутри элемента с классом content?
Варианты:

1.     .content > p

2.     #content p

3.     .content p

4.     p > .content

5.     p .content

Обоснование:
.content p выбирает все <p>, вложенные в элемент с классом content, независимо от глубины вложенности.

Выбранный ответ:
3. .content p

Вопрос 4.

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

1.     list-style-type, display, line-height

2.     width, border, height

3.     font-family, color, background-color

4.     border-radius, display, color

5.     color, font-family, line-height

Обоснование:
Наследуемыми являются свойства, касающиеся текста и шрифта: color, font-family, line-height.
Остальные не наследуются по умолчанию.

Выбранныйответ:
5. color, font-family, line-height

Вопрос 5.

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

1.     Для родительского элемента указать !important

2.     Переопределить свойство на уровне дочернего элемента

3.     Глубоко вложить дочерний элемент в родительский

4.     Воспользоваться псевдоэлементом ::after

5.     Задать значение inherit для дочернего элемента

Обоснование:
Чтобы не унаследовать стиль, его нужно переопределить в дочернем элементе.

Выбранный ответ:
2. Переопределить свойство на уровне дочернего элемента

Вопрос 6.

Как упростить стилизацию дочерних элементов без явного определения их свойств?
Варианты:

1.     Использовать !important

2.     Использовать наследуемые свойства

3.     Использовать вложенные и комбинированные селекторы

4.     Использовать селектор *

5.     Вынести стили в отдельные файлы, а не писать в одном

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

Выбранный ответ:
2. Использовать наследуемые свойства

Вопрос 7.

Какие теги по умолчанию занимают 100% от ширины родителя?
Варианты:

1.     li, table, input, form, strong

2.     ol, span, h1, img, option, a

3.     textarea, button, select, video, hr

4.     aside, code, i, nav, ins, label

5.     div, p, h2, ul, body, section

Обоснование:
Блочные элементы (например, div, p, ul, body, section) по умолчанию растягиваются на всю ширину родителя.

Выбранныйответ:
5. div, p, h2, ul, body, section

Вопрос 8.

Что нужно сделать, чтобы при явном указании ширины и высоты внутренние отступы и рамки не увеличивали размеры элемента?
Варианты:

1.     flex: 1;

2.     display: block

3.     max-width: auto; max-height: auto

4.     box-sizing: border-box

5.     border-width: auto; padding: auto

Обоснование:
box-sizing: border-box заставляет padding и border входить в указанную ширину/высоту, не расширяя элемент.

Выбранныйответ:
4. box-sizing: border-box

Вопрос 9.

Какой тег используется для подключения стиля из файла style.css напрямую в HTML-файл?
Варианты:

1.     link

2.     style

3.     use

4.     import

5.     connect

Обоснование:
Тег <link> используется для подключения внешнего CSS-файла в <head> HTML-документа.

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

Вопрос 10.

Что нужно сделать, чтобы сместить элемент по горизонтали вправо ровно на свою ширину?
Варианты:

1.     right: 100%

2.     left: 50%

3.     transform: translate(100%)

4.     text-align: right

5.     flex-basis: 100%

Обоснование:
transform: translate(100%) смещает элемент вправо на 100% от собственной ширины, без выхода за пределы контейнера.

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