Укажіть, яка властивість керує розташуванням (вирівнюванням) flex-елементів вздовж поперечної осі

Укажіть, як зробити елемент flex-контейнером

Завдання

Виконайте верстку web-сторінки на базі макета, так як показано на рисунку 5.6. Спозиціонуйте зображення, використовуючи властивість position.

Рис. 5.6. Вигляд web-сторінки в браузері

Рис. 5.7. Структура коду web-сторінки 

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку.
2. Розархівуйте в дану папку Додаткові матеріали_ПЗ5, що містить зображення, які необхідно буде розмістити на web-сторінці.
3. Відкрийте редактор коду Visual Studio Code, а в ньому — папку pr5_position.
4. У папці pr5_position створіть новий html-документ з ім’ям index.html і файл style.css, де будемо прописувати css-правила.
5. У файлі index.html cтворіть структуру коду, указану на рисунку 5.7., і підключіть відразу зовнішню таблицю стилів, файл style.css.
6. Виконайте верстку на базі макета, так як показано на рисунку 5.6.
7. Застосуйте властивості, для блоку .canvas: ширина — 800 пікселів, висота — 1000 пікселів. Колір фону — білий , а малюнок фону png (властивість background-image: url(../images/bg.png).
8. Для зображень .img-1, .img-2, .img-3 задайте властивість position, що рівна absolute. Відступ зверху — 250 пікселів. Вирівняйте зображення, щоб вони були  рівномірно розміщені по ширині так, як показано на рисунку. Для цього розрахуйте left для кожного зображення.
9. Заголовок slogan розмістіть із лівим відступом 50px, і  зверху — 150px. Позиціювання — абсолютне.
10. Заголовок second-slogan розмістіть із правим відступом 38px, і зверху — 722px. Позиціювання — абсолютне.
11. Перевірте роботу, відкривши створену web-сторінку в браузері. Запакуйте папку pr5_position в архів з ім’ям pr5_position -Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).

Укажіть властивість left

Укажіть, які з властивостей top, left, bottom, right мають більший пріоритет при їх суперечності

Укажіть, як розмістити кнопку На гору у правій нижній частині екрана

Укажіть, якого виду позиціювання елементів web-сторінки НЕ існує в CSS

Завдання

Cтворити й оформити web-сторінку за зразком рис. 4.4, використовуючи можливості HTML і CSS.

Рис. 4.4. Вигляд web-сторінки після застосування стилів

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку pr4_css.

2. Розархівуйте в дану папку Додаткові матеріали_ПЗ4, яка містить текст і зображення, що необхідно буде розмістити на web-сторінці.

3. Відкрийте редактор коду Visual Studio Code, а в ньому —  папку pr4_css.

4. У папці pr4_css створіть новий html-документ з ім’ям index.html і файл style.css, де будемо прописувати css-правила.

5. У файлі index.html cтворіть структуру коду, вказану на зображенні, і підключіть відразу зовнішню таблицю стилів, файл style.css.

6. Додайте мета-теги charset і viewport. Заповніть title (назва статті).

7. Заповніть текстом і зображеннями на основі рис. 4.4. Текст візьміть із файлу text.txt. Вивчіть, як виглядає сторінка сайту без застосування css.

8. Додайте в CSS файл наступні стилі:

• Для всіх елементів(*{}) margin установіть — рівний нулю.
• Для класу .container задайте максимальну ширину 1000px, і відступи( margin) зверху і знизу — 20px, по боках — автоматично.
• Для всіх заголовків задайте розмір шрифту 24px, жирний, сімейство — Impact, вирівнювання по центру, margin зверху і знизу — по 30px.
• Для заголовка h1 задайте розмір шрифту 32px.
• Для параграфів задайте Arial, sans-serif. Розмір шрифту — 18px, висота рядка —150 %.
• Для зображень задайте максимальну ширину 80 %. Відображення(display) — block, margin зверху і знизу — 20px, справа і зліва — auto.
• Параграф із класом img-description вирівнювання тексту — по центру, курсив, відступ зверху — 20px, знизу — 40px.
• Для ul списку шрифти Arial, sans-serif, 18px, висота рядка —  150 %.

9. Стилі для .text-green і .text-bold додати самостійно.

10. Перевірте роботу, відкривши створену web-сторінку в браузері. Запакуйте папку pr4_css в архів з ім’ям pr4_css -Прізвище і завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).

CSS -властивість border-radius: дає можливість для елемента встановити...

CSS-властивість font-weight: дає можливість для тексту задати...