wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

Основи веб-дизайну

Total questions: 26

Worksheet time: 13mins

Name
Class
Date
1.

Яка роль тегів у HTML?

a)

Теги в HTML використовуються лише для стилізації тексту.

b)

Теги в HTML визначають кольори фону веб-сторінки.

c)

Теги в HTML служать для створення анімацій на сайті.

d)

Теги в HTML визначають структуру та зміст веб-сторінки.

2.

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

a)

Типи селекторів у CSS: селектори елементів, класів, ідентифікаторів, атрибутів, псевдокласів, псевдоелементів, групові селектори.

b)

Селектори зображень

c)

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

d)

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

3.

Що таке клас у CSS?

a)

Клас у CSS - це атрибут для визначення імені документа.

b)

Клас у CSS - це метод програмування.

c)

Клас у CSS - це атрибут для групування елементів HTML для застосування стилів.

d)

Клас у CSS - це тип елемента HTML.

4.

Як використовувати ID у CSS?

a)

ID у CSS використовується для стилізації групи елементів, звертаючись до них через '.class'.

b)

ID у CSS використовується для стилізації конкретного елемента, звертаючись до нього через '#ID'.

c)

ID у CSS використовується для стилізації всіх елементів на сторінці, звертаючись до них через '*'.

d)

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

5.

Що таке адаптивний дизайн?

a)

Адаптивний дизайн - це технологія для покращення швидкості завантаження сайтів.

b)

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

c)

Адаптивний дизайн - це метод створення графіки для друку.

d)

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

6.

Які переваги адаптивного дизайну?

a)

Збільшення часу на завантаження сайту

b)

Погіршення SEO

c)

Зменшення зручності використання

d)

Переваги адаптивного дизайну включають покращений користувацький досвід, зменшення відмов, підвищення SEO, та економію часу на розробку.

7.

Що таке медіазапити в CSS?

a)

Медіазапити в CSS - це інструкції, які дозволяють змінювати стилі в залежності від характеристик пристрою.

b)

Медіазапити в CSS - це методи оптимізації зображень.

c)

Медіазапити в CSS - це інструменти для створення анімацій.

d)

Медіазапити в CSS - це правила для зміни шрифтів на веб-сторінках.

8.

Як написати медіазапит у CSS?

a)

@media (min-width: 600px) { /* CSS стилі */ }

b)

@media (max-width: 600px) { /* CSS стилі */ }

c)

@media screen and (orientation: landscape) { /* CSS стилі */ }

d)

@media (hover: none) { /* CSS стилі */ }

9.

Що таке сітка GRID у CSS?

a)

Сітка GRID у CSS - це інструмент для оптимізації зображень.

b)

Сітка GRID у CSS - це метод для стилізації тексту.

c)

Сітка GRID у CSS - це система для створення одновимірних макетів.

d)

Сітка GRID у CSS - це система для створення двовимірних макетів.

10.

Які основні властивості сітки GRID?

a)

Використання тільки пікселів для розміщення

b)

Обмежена гнучкість у розміщенні

c)

Визначення кольорів і шрифтів

d)

Основні властивості сітки GRID: визначення рядків і стовпців, гнучкість у розміщенні, адаптивність, використання фракційних одиниць, легкість вирівнювання.

11.

Як створити просту сітку за допомогою CSS?

a)

Використовуйте CSS: .container { display: flex; }

b)

Використовуйте CSS: .container { display: block; }

c)

Використовуйте CSS: .container { display: inline; }

d)

Використовуйте CSS: .container { display: grid; grid-template-columns: repeat(3, 1fr); }

12.

Що таке анімація в CSS?

a)

Анімація в CSS - це метод для створення текстових ефектів без руху.

b)

Анімація в CSS - це техніка для зміни кольору тексту без анімації.

c)

Анімація в CSS - це статичний ефект для фонових зображень.

d)

Анімація в CSS - це техніка для створення рухомих ефектів на веб-сторінках за допомогою стилів.

13.

Які основні властивості для анімації в CSS?

a)

animation-speed

b)

animation-style

c)

animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode

d)

animation-color

14.

Як створити анімацію за допомогою ключових кадрів?

a)

Змініть лише кольори об'єкта без анімації.

b)

Створіть ключові кадри для початкового та кінцевого станів об'єкта, змініть властивості між ними.

c)

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

d)

Створіть анімацію без використання ключових кадрів.

15.

Що таке CSS маска?

a)

CSS маска - це інструмент для створення форм на сайті.

b)

CSS маска - це метод анімації елементів на веб-сторінці.

c)

CSS маска - це спосіб управління видимістю елементів за допомогою зображень або градієнтів.

d)

CSS маска - це спосіб зміни кольору тексту на веб-сторінці.

16.

Як використовувати маски в CSS?

a)

Використовуйте властивість 'clip' для обрізки елементів.

b)

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

c)

Використовуйте властивості 'mask' або 'mask-image' для застосування масок до елементів.

d)

Застосовуйте 'background-image' для створення масок.

17.

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

a)

Приклади використання масок у веб-дизайні: обмеження видимості зображень, створення форм, анімації, інтерактивні елементи.

b)

Використання масок для зміни кольору тексту

c)

Застосування масок для SEO-оптимізації

d)

Створення фонових музичних ефектів

18.

Які основні принципи роботи з Flexbox у CSS?

a)

Flexbox дозволяє створювати лише одновимірні макети.

b)

Flexbox забезпечує гнучке вирівнювання елементів у контейнері.

c)

Flexbox використовується тільки для стилізації тексту.

d)

Flexbox не підтримує адаптивний дизайн.

19.

Які переваги використання CSS-перемикачів?

a)

CSS-перемикачі дозволяють змінювати стилі без JavaScript.

b)

CSS-перемикачі використовуються тільки для анімацій.

c)

CSS-перемикачі ускладнюють структуру коду.

d)

CSS-перемикачі не можуть бути використані для адаптивного дизайну.

20.

Які основні властивості для роботи з градієнтами в CSS?

a)

background-color, background-image, background-repeat

b)

background-size, background-attachment, background-position

c)

background-image, background-size, background-repeat, background-position

d)

background-opacity, background-clip, background-origin

21.

Що таке псевдокласи в CSS?

a)

Псевдокласи в CSS - це атрибути для визначення кольору тексту.

b)

Псевдокласи в CSS - це типи елементів HTML.

c)

Псевдокласи в CSS - це селектори, які дозволяють стилізувати елементи на основі їхнього стану.

d)

Псевдокласи в CSS - це методи для створення анімацій.

22.

Які основні властивості для роботи з Flexbox?

a)

grid-template-columns, grid-template-rows, grid-area

b)

background-color, color, font-size

c)

display, position, margin, padding

d)

flex-direction, justify-content, align-items, flex-wrap

23.

Як використовувати градієнти в CSS?

a)

Використовуйте 'background-image' з функцією 'linear-gradient' або 'radial-gradient'.

b)

Використовуйте 'background-color' для створення градієнтів.

c)

Використовуйте 'opacity' для створення градієнтів.

d)

Градієнти не підтримуються в CSS.

24.

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

a)

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

b)

Анімації не підтримуються в CSS.

c)

Використовуйте 'animation' без ключових кадрів.

d)

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

25.

Які основні властивості для роботи з фоновими зображеннями в CSS?

a)

background-color, background-image, background-repeat, background-size

b)

background-image, background-color, background-opacity

c)

background-clip, background-origin, background-attachment

d)

background-position, background-opacity, background-filter

26.

Що таке псевдоелементи в CSS?

a)

Псевдоелементи в CSS - це селектори для стилізації частин елементів.

b)

Псевдоелементи в CSS - це елементи, які не існують в HTML.

c)

Псевдоелементи в CSS - це атрибути для зміни кольору тексту.

d)

Псевдоелементи в CSS - це методи для створення анімацій.