Лабораторна робота № 6

Тема: Каскадування та валідація CSS стилів.

Мета: Вивчити особливості використання CSS стилів.

ТЕОРЕТИЧНА ЧАСТИНА
CSS (cascading style sheets – каскадні таблиці стилів) – одна з базових
WEB-технологій сучасного Інтернету. CSS-код – це список інструкцій для
браузера про те, – яким чином відтворювати елементи веб-сторінок.

CSS Flex
CSS Flex – це технологія для створення складних гнучких макетів для
точного розміщення елементів на сторінці. Для використання технології у блоці
прописують CSS:
display: flex;
У Flex-блока є дві осі: головна та перпендикулярна їй. За замовчуванням
усі предмети розміщені вздовж головної осі – лише направо. Властивість flex-
direction дозволяє крутити головну вісь:
flex-direction: row;
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;
Вирівнювання елементів по головній осі:
justify-content: flex-start; (flex-end, center…)
Вирівнювання елементів перпендикулярно до головної осі:
align-items: flex-start; (flex-end, center…)
Вирівнювання елементів кожного окремо перпендикулярно до головної
осі:
align-self: flex-start; (flex-end. center…)
Задання розміру елементів до того, як вони будуть змінені іншими
властивостями CSS Flexbox:
flex-basis: 200px;
Flex-basis впливає на розмір елементів уздовж головної осі. Коли вказано
flex-basis, то властивість width ігнорується.
Зміна розмірів блоку (вимірювання у фракціях відносно інших блоків,
якщо всередині даного залишається вільний простір):
flex-grow: 1;
Властивість flex-shrink (зворотна властивість до попередньої) визначає
скільки блоку можна зменшитися в розмірі (використовується, коли елементи
не вміщуються в контейнер). За замовчуванням значення flex-shrink для
кожного блоку дорівнює 1. Це означає, що блоки будуть стискатися, коли
контейнер буде зменшуватися. Якщо для якогось блоку встановити значення 0,
то він зменшуватися не буде.
Властивість flex замінює flex-grow, flex-shrink та flex-basis (саме в такому
порядку):
flex: 1 2 300px;
 CSS Grid
CSS Grid – це техніка в каскадних таблицях стилів, що дозволяє WEB-
розробникам створювати складні адаптивні макети WEB-дизайну більш легко і
послідовно у різних браузерах.
Основні властивості CSS Grid:
 grid-template-columns (grid-template-rows) – розбиття блоку на
певну кількість стовпців (рядків):
grid-template-columns: 70% 30%;
grid-template-columns: 1fr 2fr 1fr; – розбиття на три стовпця (фракції),
другий у два рази більший за перший;
grid-template-columns: repeat(4, 1fr); – скорочений запис: розбиття на
4 одинакових стовців;
 grid-column-gap (grid-row-gap) – встановлення відступів між
стовпцями (рядками):
grid-column-gap: 10px;
 grid-gap – встановлення відступів між стовпцями і рядками
одночасно;
 grid-auto-rows: minmax(x, y); – завдання висоти рядка (x –
мінімальна висота, y – максимальна висота):
grid-auto-rows: minmax(200px, auto);
 justify-items (align-items) – розтягування контенту у блоці по
горизонталі (вертикалі):
justify-items: stretch; – по ширині;
justify-items: center; – по центру;
justify-items: start; – по лівому краю;
justify-items: end; – по правому краю;
 align-self (justify-self) – розтягування контенту у блоці по
горизонталі (вертикалі) для конкретного блока;
 grid-column: n/m (grid-row: n/m) – блок починається з вертикальної
направляючої n і закінчується направляючою m:
grid-template-columns: 1fr 2fr 1fr;
grid-column: 1/3.

ХІД РОБОТИ
1. Створіть каталог «lr6».
2. В даному каталозі створіть нову Web-сторінку. Збережіть її під іменем
«CSS1.html».
3. У файлі «CSS1.html» задайте стандартні теги для Web-сторінки. Задайте
заголовок – Ваше ПІБ.
4. Віднайдіть в мережі Інтернет іконку для майбутнього сайту (наприклад:
https://icons8.com/icons формат при завантажені «favicon»). Збережіть її у
каталог «lr6» під іменем «favicon.png». Прикріпіть дану іконку до Web-
сторінки «CSS1.html» (допишіть код після тегу <title>):
5. Збережіть зміни та перевірте відображення іконки у заголовку Web-сторінки
«CSS1.html».
6. Виберіть довільний кириличний шрифт на https://fonts.google.com/.
7. Завантажте та розпакуйте даний шрифт у підкаталог «fonts» каталогу
«lr6».
8. Створіть новий файл стилів під іменем «style.css». Приєднайте його до
«CSS1.html».
9. У файлі стилів «style.css» під’єднайте Ваш шрифт:

10. На сторінці «CSS1.html» напишіть Ваше ПІБ заголовком другого рівня.

11. У вікні визначення правил для тегу «h2» задайте наступні властивості:
 Сім’я шрифтів – Ваш шрифт, Georgia, Times New Roman, Times,
serif (якщо Ваш шрифт відсутній, то буде Georgia і так далі);
 Регістр – верхній;
 Колір тексту;
 Стиль тексту – курсив;
 Колір фону;
 Вирівнювання тексту – по центру;
 Відступ «margin» – 0.
 Стиль границі – точкова;
12.Збережіть внесені зміни та перегляньте результат у браузері.
13. Під Вашим прізвищем напишіть Вашу спеціальність. Задайте даний текст
Заголовком 3-го рівня.
14. Самостійно створіть стиль для заголовків рівня «h3», який повинен
зберігатися у файлі «style.css». Задайте такі властивості стилю як:
 Шрифт;
 Регістр;
 Колір тексту;
 Стиль тексту;
 Колір фону;
 Вирівнювання тексту;
 Стиль границі.
15. Збережіть у папці «lr6» довільний малюнок.
16. Під назвою спеціальності вставте даний малюнок.
17. Створіть стиль для малюнків у якому задайте наступні властивості:
 Ширина малюнку – 400 пікселів.
 Висота малюнку – 200 пікселів.
 Тип рамки малюнка – суцільна.
 Колір рамки малюнка.
 Відступ від малюнка до тексту – 20 пікселів з усіх сторін.
18.Збережіть внесені зміни та перегляньте відображення рисунку у браузері.
19. Вставте на сторінку таблицю розміром 4х4. За допомого стилів у файлі
«style.css» задайте її ширину – 100 %.
20. У створеній таблиці у кожній комірці запишіть числа від 1 до 16.
21. Також за допомогою стилів у файлі «style.css» задайте наступні
властивості таблиці:
 Стиль рамки таблиці – ridge.
 Ширина границі – 10 пікселів.
 Колір границі.
 Вирівнювання тексту – по центру.
22. У файлі «style.css» самостійно створіть стиль для комірок таблиці, який
включав би: товщину, колір, стиль границь.
23. Під таблицею створіть посилання на сайт Вашої кафедри. Забезпечте
відкриття посилання у новій вкладці.
24. Створіть два стилі, які б визначали різний колір активних та раніше
відвіданих гіперпосилань («a:visited» та «a:active»).
25. Збережіть внесені зміни. Перегляньте результат.
26. Скопіюйте файл «ПрізвищеФорма.html» з лабораторної роботи №4 у
папку «lr6».
27. Відформатуйте форму за допомогою стилів. Усі стилі зберігати у файл
«forms.css».
28. Збережіть внесені зміни.
29. Перегляньте сторінку «ПрізвищеФорма.html» у браузері.

Створення блочної структури документа

(display: block)

30.Створіть сторінку блочної структури «CSS2.html» у каталозі «lr6», яка

складається із основної області сторінки з ідентифікатором «wrapper».
31.У блоці «wrapper» створіть підпорядковані блоки:
 Блок заголовку (тег <header>), з текстом 2-го рівня «Заголовок».
 Блок контенту (ідентифікатор «content»), який включає у себе:
- лівий стовпець для меню тег <nav>), з текстом 4-го рівня «Меню
сайту»;
- правий стовпець основного контенту Web-сторінки (ідентифікатор
«rightColumn»), з текстом 4-го рівня «Контент сайту».
 Нижнього колонтитула (тег <footer>), з текстом 5-го рівня
«Колонтитул».
32.У каталозі «lr6» створіть новий файл стилів «style2.css» та приєднайте
його до «CSS2.html».
33. Також приєднайте «style.css» до «CSS2.html».
34.У файлі «style2.css» запишіть наступні стилі для тегів та ідентифікаторів:
@charset "utf-8";
body {
background-color: #99CC33;
text-align: center ;
margin: 0;
padding: 0;
color: #FFFFFF;
}
#wrapper {
width: 1000px;
height: 99vh;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border-top-style: none;
border-right-style: dashed;
border-bottom-style: none;
border-left-style: dashed;
border-color: #0066FF;
background-color: #FFCCFF;
}
header {
height: 30vh;
margin- bottom: 0px;
margin-top: 5px;
background-color: #FF6600;
}
#content {
height: 60vh;
margin-top: 0px;
background-color: #0099FF;
}
nav {
float: left;
width: 30%;
background-color: #3333FF;
height: 100%;

}
#rightColumn {
float: left;
width: 70%;
text-align: justify;
background-color: #FFFF00;
color: #000000;
height: 100%;
overflow: auto;
}
footer {
clear: both;
margin-top: 0px;
background-color: #00FFFF;
color: #000000;
 height: 9vh;
}

35. Збережіть внесені зміни. Перегляньте сторінку «CSS2.html» у браузері.

36. Біля кожного рядка коду у файлі «style2.css» запишіть пояснення у
вигляді коментарів, наприклад:

37. Збережіть внесені зміни.

Створення блочної структури з використанням CSS Flex

(display: flex)
38.Створіть сторінку блочної структури «CSS3.html» у каталозі «lr6», яка
складається із основної області сторінки з ідентифікатором «wrapper».
39.У блоці «wrapper» створіть підпорядковані блоки:
 Блок заголовку (тег <header>), з текстом 2-го рівня «Заголовок».
 Блок контенту (ідентифікатор «content»), який включає у себе:
- лівий стовпець для меню тег <nav>), з текстом 4-го рівня «Меню
сайту»;
- середній стовпець основного контенту Web-сторінки
(ідентифікатор «cont»), з текстом 4-го рівня «Контент сайту».
- правий стовпець для розміщення гіперпосилань на Web-сторінці
(ідентифікатор «url_web»), з текстом 4-го рівня
«Гіперспосилання».
 Нижнього колонтитула (тег <footer>), з текстом 5-го рівня
«Колонтитул».
40.У каталозі «lr6» створіть новий файл стилів «style3.css» та приєднайте
його до «CSS3.html».
41. У файлі «style4.css» запишіть наступні стилі для тегів та ідентифікаторів:

body {
background-color: beige;
color: white;

* {padding: 0; margin: 0} /* щоб не було невеликих відступів, що

встановлюються браузером */

#wrapper {
background-color: coral;
min-height: 100vh;
height: auto;

}
 header {
background-color: blueviolet;
display: flex;
flex-basis: 100%;
height: 25vh;
}

#content {
min-height: 50vh;
height: auto;
display: flex;
}

nav {
background-color: darkcyan;
flex: 1 1 25%;

#cont {
background-color: #4260ff;
flex: 2 1 50%;
}

#url_web {
background-color: #ff359f;
flex: 1 1 25%;
}

footer {
background-color: #3dff48;
display: flex;
flex-basis: 100%;
height: 25vh;
}

42. Збережіть внесені зміни. Перегляньте сторінку «CSS3.html» у браузері.

43. Біля кожного рядка коду у файлі «style3.css» запишіть пояснення у
вигляді коментарів.
 Створення блочної структури з використанням CSS Grid
(display: grid)

44.Створіть сторінку блочної структури «CSS4.html» у каталозі «lr6», яка

складається із основної області сторінки з ідентифікатором «wrapper».
45.У блоці «wrapper» створіть підпорядковані блоки:
 Блок заголовку (тег <header>), з текстом 2-го рівня «Заголовок».
 Блок меню (тег <nav>) з текстом 4-го рівня «Меню сайту».
 Блок основного контенту Web-сторінки (ідентифікатор «cont»), з
текстом 4-го рівня «Контент сайту».
 Блок гіперпосилань (ідентифікатор «url_web») з розміщеними
гіперпосиланнями на Google, НУВГП та сайту кафедри.
 Нижнього колонтитула (тег <footer>), з текстом 5-го рівня
«Колонтитул».
46.У каталозі «lr6» створіть новий файл стилів «style4.css» та приєднайте
його до «CSS4.html».
47. У файлі «style4.css» запишіть наступні стилі для тегів та ідентифікаторів:

body {
background-color: beige;
color: white;

* {padding: 0; margin: 0}

#wrapper {
background-color: coral;
min-height: 100vh;
height: auto;
display: grid; /* використовуємо CSS Grit */
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-column-gap: 5px;
grid-row-gap: 10px;
}

header {
background-color: blueviolet;
grid-column: 1/13;
grid-row: 1/3;
}
 nav {
background-color: darkcyan;
grid-column: 1/4;
grid-row: 3/8;

#cont {
background-color: #4260ff;
grid-column: 4/10;
grid-row: 3/8;
}

#url_web {
background-color: #ff359f;
grid-column: 10/13;
grid-row: 3/8;
}

footer {
background-color: #3dff48;
grid-column: 1/13;
grid-row: 8/9;
}

48. Збережіть внесені зміни. Перегляньте сторінку «CSS4.html» у браузері.

49. Біля кожного рядка коду у файлі «style4.css» запишіть пояснення у
вигляді коментарів.
50. Відредагуйте код файлів «CSS3.html», «CSS4.html», «style3.css»,
«style4.css» для відображення контенту про Ваше улюблене місце
відпочинку.
51. Показати та захистити виконану роботу викладачеві.