wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

HTML CSS Simple Test 2

Total questions: 18

Worksheet time: 18mins

Name
Class
Date
1.

Зачем нужен overflow: hidden?

a)

Для расположения элементов по центру

b)

Для отключения видимости элементов

c)

Для обрезания элементов внутри контейнера

d)

Для перемещение элементов за грань контейнера

2.

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

a)

В родители прописать display: flex, a в дочернем объекте position: absolute

b)

В родители прописать position: relative, a в дочернем объекте position: absolute

c)

В родители прописать display: flex, a в дочернем объекте justify-content: center

d)

В родители прописать display: flex, a в дочернем объекте align-items: center

3.

Что такое Box Model?

a)

Это идея, что каждый элемент это "коробка" из содержимого, padding, margin и border

b)

Это строгое правило, которое говорит что каждый элемент это всегда прямоугольная коробка

c)

Это идея, что каждый элемент это "коробка" из содержимого и границы

d)

Это идея, что каждый элемент это "коробка"

4.

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

a)

display: flex

b)

display: block

c)

display: gallery

d)

display: inline

5.

Как поменять направление главной оси flex режима?

a)

flex-direction: направление

b)

flex: направление

c)

flex-heading: направление

d)

нельзя 💥😢

6.

Как подсоединить CSS файл к HTML документу?

a)

через style="файл"

b)

через тег <link>

c)

это невозможно !1!1 💀

d)

через тег <css>

7.

Какой тег говорит о том, что в нем находится меню?

a)

<menu>

b)

<nav>

c)

<a>

d)

<header>

8.

Зачем вообще нужны теги header, footer, main, section, div и некоторые другие, если они фактически не дают никакого функционала как например тег <a> или <img> ?

a)

Просто так 👻

b)

Они нужны только тогда когда используется javascript

c)

Они для структуры и для смысла страницы

d)

✨Дают разнообразия✨

9.

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

a)

использовать псевдо-класс :hover, например a:hover {} для тега ссылки

b)

использовать javascript событие onhover, например onhover = background: red;

c)

использовать псевдо-класс :active, например a:active{} для тега ссылки

d)

использовать свойство hover, например hover: "background: red"

10.

какое имя лучше ему подходит?

a)

cat

b)

catto

c)

car

d)

el gato

11.

Что использовать если мы хотим менять масштаб кнопки при зажатии?

a)

Использовать :hover

b)

Использовать :active

c)

Использовать onclicked

d)

👽

12.

Как добавить адаптацию под разные размер экранов?

a)

Используя @media() и внутри либо min-width или max-width точки перехода

b)

Используя @keyframes() и внутри прописать размеры и стили для каждого

c)

Используя @media() и внутри прописать javascript условные конструкции if

d)

Используя @media() и внутри прописать screen-size

13.

Что это за штука: *{}

a)

Селектор для выделения тегов "*"

b)

Селектор для выделения всех элементов на странице и настройки им базовых стилей

c)

Функция без имени в Javascript

d)

Коренной селектор, для переменных.

14.

:root{} для чего?

a)

Для обращения к классу "root"

b)

Для хранения глобальных переменных, доступные всем классам

c)

Для обращения к корневым тегам "body" и "html"

d)

Такого не существует!!

15.

Что это такое: "--primary-color: red"

a)

Это CSS переменная которая хранит в себе красный цвет

b)

Это CSS функция которая возвращает просто красный цвет

c)

Это JS переменная которая хранит в себе красный цвет

d)

Это HTML переменная которая хранит в себе красный цвет

16.

Если есть переменная "--secondary-color: green", как ей воспользоваться в свойстве "background: ???"

a)

Используя функцию var(--secondary-color)

b)

Используя переменную напрямую --secondary-color

c)

Никак!

d)

Используя функцию url(--secondary-color)

17.

Как сделать элемент и все внутри его прозрачным на 50% ?

a)

transparency: 50%

b)

opacity: 0.5

c)

visibility: 50%

d)

hidden: 1/2

18.

Какая разница между rgb() и rgba() ?

a)

rgba() имеет дополнительный альфа канал для прозрачности цвета

b)

rgba() имеет дополнительный канал для фильтра

c)

rgba() имеет дополнительный канал для яркости

d)

rgba() не существует