Wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

HTML5 та CSS

Total questions: 15

Worksheet time: 8mins

Name
Class
Date
1.

Як можна стилізувати елементи за допомогою CSS?

a)

Використовуйте HTML теги для стилізації елементів.

b)

Використовуйте JavaScript для стилізації елементів.

c)

Використовуйте PHP для стилізації елементів.

d)

Використовуйте CSS селектори та властивості для стилізації елементів.

2.

Які типи селекторів існують в CSS?

a)

Селектори шрифтів

b)

Селектори кольорів

c)

Селектори рядків

d)

Елементарні селектори, класові селектори, ідентифікаторні селектори, селектори атрибутів, селектори псевдокласів, селектори псевдоелементів та комбіновані селектори

3.

Що таке адаптивний дизайн і чому він важливий?

a)

Адаптивний дизайн не впливає на користувацький досвід

b)

Адаптивний дизайн призводить до зниження швидкості завантаження

c)

Адаптивний дизайн не підтримує різні типи пристроїв

d)

Адаптивний дизайн важливий, оскільки забезпечує оптимальне відображення контенту на різних пристроях та покращує користувацький досвід.

4.

Які властивості можна задати за допомогою CSS для зміни кольору тексту?

a)

font-style

b)

background-color

c)

color

d)

text-align

5.

Як в CSS вибрати всі елементи певного класу?

a)

element.class

b)

.class

c)

#example

d)

.example

6.

Як в CSS вибрати всі дочірні елементи певного елементу?

a)

element:nth-child(odd)

b)

element:nth-child(n)

c)

element:nth-child(2n)

d)

element:nth-child(2n+1)

e)

element:nth-child(even)

7.

Які переваги має використання медіа-запитів для адаптивного дизайну?

a)

Обмеження доступу до вмісту для користувачів

b)

Можливість оптимального відображення веб-сайту на різних пристроях

c)

Можливість відображення тільки на одному типі пристроїв

d)

Збільшення швидкості завантаження веб-сайту

8.

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

a)

Використовуйте метатег viewport з атрибутом 'width=device-width'.

b)

Використовуйте метатег viewport з атрибутом 'initial-scale=1'.

c)

Використовуйте метатег viewport без будь-яких атрибутів.

d)

Використовуйте метатег viewport з атрибутом 'height=device-height'.

9.

Які є основні принципи роботи з резиновими контейнерами в CSS?

a)

Використання відсоткових значень, flexbox або grid layout, медіа-запити

b)

Використання табличної верстки

c)

Використання inline-стилів

d)

Використання абсолютних значень

10.

Як в CSS задати різні стилі для елементів в залежності від їх стану (наприклад, hover або active)?

a)

Використовуйте селектори 'element:hover' та 'element:active', де 'element' - це назва елементу, для якого ви хочете задати стилі.

b)

Для стилізації елементів в залежності від стану використовуйте JavaScript, а не CSS

c)

Використовуйте селектори 'element:mouse-over' та 'element:press'

d)

Використовуйте селектори 'element:click' та 'element:hover'

11.

Як в CSS зробити так, щоб картинка автоматично змінювалася в залежності від розміру екрану?

a)

background-image: url('large.jpg'); @media (min-width: 768px) { background-image: url('small.jpg'); }

b)

background-image: url('small.jpg'); @media (max-width: 768px) { background-image: url('large.jpg'); }

c)

background-image: url('small.jpg'); @media (min-width: 768px) { background-image: url('large.jpg'); }

d)

background-image: url('small.jpg'); @media (min-width: 768px) { background-image: url('small.jpg'); }

12.

Як в CSS задати різні стилі для елементів в залежності від їх позиції на сторінці?

a)

Використовуйте псевдокласи :first-child, :last-child, :nth-child та інші для задання різних стилів для елементів в залежності від їх позиції на сторінці.

b)

Використовуйте псевдокласи :middle-child, :second-child, :third-child для задання різних стилів

c)

Використовуйте псевдокласи :first-element, :last-element, :nth-element для задання різних стилів

d)

Використовуйте псевдокласи :odd-child, :even-child, :random-child для задання різних стилів

13.

Як в CSS зробити так, щоб текст автоматично переносився на новий рядок, якщо він не вміщується в блок?

a)

text-wrap: auto;

b)

overflow-wrap: normal;

c)

word-wrap: break-word; або overflow-wrap: break-word;

d)

line-break: normal;

14.

Як в CSS задати різні стилі для елементів в залежності від їх типу (наприклад,

або

)?

a)

Використовуйте селектори елементів у CSS для задання різних стилів для конкретних типів елементів.

b)

Задайте стилі для кожного елементу окремо в HTML

c)

Використовуйте тільки один тип елементів у CSS для всіх стилів

d)

Використовуйте JavaScript замість CSS для стилізації елементів

15.

Як в CSS зробити так, щоб елементи на сторінці автоматично змінювали свою ширину в залежності від розміру екрану?

a)

Додайте JavaScript код для автоматичної зміни ширини елементів

b)

Використовуйте CSS властивість 'flex' для контейнера, наприклад, 'display: flex;'

c)

Встановіть фіксовану ширину для кожного елемента на сторінці

d)

Використовуйте CSS властивість 'auto-width', наприклад, 'width: auto;'