From e881dd953ca0b080f7db12866e56486547b1ee18 Mon Sep 17 00:00:00 2001 From: Nazar Date: Sat, 15 Nov 2025 15:29:08 +0200 Subject: [PATCH] Initial commit --- style1.css | 18 +++++++ style3.css | 35 ++++++++++++++ style4.css | 19 ++++++++ style5.css | 21 ++++++++ task1.html | 29 +++++++++++ task2-normalize.html | 37 ++++++++++++++ task2-reset.html | 37 ++++++++++++++ task3.html | 42 ++++++++++++++++ task4.html | 25 ++++++++++ task5.html | 31 ++++++++++++ task6.html | 112 +++++++++++++++++++++++++++++++++++++++++++ 11 files changed, 406 insertions(+) create mode 100644 style1.css create mode 100644 style3.css create mode 100644 style4.css create mode 100644 style5.css create mode 100644 task1.html create mode 100644 task2-normalize.html create mode 100644 task2-reset.html create mode 100644 task3.html create mode 100644 task4.html create mode 100644 task5.html create mode 100644 task6.html diff --git a/style1.css b/style1.css new file mode 100644 index 0000000..3c01fa2 --- /dev/null +++ b/style1.css @@ -0,0 +1,18 @@ +body { + font-family: sans-serif; + padding: 20px; +} + +.block { + background-color: #f0f8ff; + border: 2px solid #00008b; + margin: 10px 0; + padding: 15px; +} + +.inline { + background-color: #fffacd; + border: 2px solid #ffd700; + padding: 5px; + margin: 5px; +} \ No newline at end of file diff --git a/style3.css b/style3.css new file mode 100644 index 0000000..7e8499f --- /dev/null +++ b/style3.css @@ -0,0 +1,35 @@ +body { font-family: sans-serif; padding: 20px; } +h3 { margin-top: 0; } + +.container { + border: 2px dashed #ccc; + margin-bottom: 20px; + padding: 10px; +} +.item { + background-color: #e0f7fa; + border: 1px solid #00796b; + padding: 10px; + width: 150px; +} + +.display-block { display: block; margin-bottom: 5px; } +.display-inline { display: inline; width: auto; } +.display-flex { display: flex; } + +.box { + width: 200px; + height: 100px; + padding: 20px; + border: 5px solid #c2185b; + margin: 15px; + background-color: #fce4ec; +} + +.content-box { + box-sizing: content-box; +} + +.border-box { + box-sizing: border-box; +} \ No newline at end of file diff --git a/style4.css b/style4.css new file mode 100644 index 0000000..697e281 --- /dev/null +++ b/style4.css @@ -0,0 +1,19 @@ +body { font-family: sans-serif; padding: 20px; line-height: 1.6; } + +.floated-box { + float: left; + width: 150px; + height: 150px; + background-color: #fff9c4; + border: 2px solid #fbc02d; + padding: 10px; + margin: 0 15px 10px 0; +} + +.cleared-box { + clear: left; + background-color: #e1f5fe; + border: 2px solid #0288d1; + padding: 10px; + margin-top: 10px; +} \ No newline at end of file diff --git a/style5.css b/style5.css new file mode 100644 index 0000000..125ddfe --- /dev/null +++ b/style5.css @@ -0,0 +1,21 @@ +body { font-family: sans-serif; padding: 20px; } +h3 { margin-bottom: 5px; } + +.box { + width: 300px; + height: 70px; + border: 3px solid #388e3c; + background-color: #e8f5e9; + margin-bottom: 40px; + padding: 10px; +} + +.box p { + width: 450px; + margin: 0; +} + +.visible { overflow: visible; } +.hidden { overflow: hidden; } +.scroll { overflow: scroll; } +.auto { overflow: auto; } \ No newline at end of file diff --git a/task1.html b/task1.html new file mode 100644 index 0000000..273acb3 --- /dev/null +++ b/task1.html @@ -0,0 +1,29 @@ + + + + + + Блокові та Інлайнові + + + +

Блокові (div) та Інлайнові (span)

+ +

Блокові елементи (div)

+
+ Це блоковий елемент div. Він займає всю доступну ширину і завжди починається з нового рядка. +
+
+ Це другий елемент div. Він також починається з нового рядка. +
+ +

Інлайнові елементи (span)

+

+ Це параграф, а всередині нього є + елемент span (інлайновий). + Він залишається в потоці тексту і займає лише необхідну йому ширину. + Ось ще один span, який продовжує той самий рядок. +

+ + + \ No newline at end of file diff --git a/task2-normalize.html b/task2-normalize.html new file mode 100644 index 0000000..3b0ac4f --- /dev/null +++ b/task2-normalize.html @@ -0,0 +1,37 @@ + + + + + + Normalize CSS + + + + + +

Заголовок H1

+

Це звичайний параграф тексту. Він містить жирний та курсивний текст.

+ + +
+ +

Опис експерименту

+

+ Порівнюючи ці дві сторінки (та сторінку взагалі без стилів), можна помітити ключову різницю. +

+

+ Reset.css (наприклад, Meyer Reset) діє "агресивно": він повністю "вбиває" абсолютно всі стилі браузера за замовчуванням. Всі відступи (margin, padding), розміри шрифтів (font-size) і навіть маркери списків (ul) зникають. Це дає "чистий аркуш", але змушує нас вручну прописувати стилі для кожного елемента з нуля (наприклад, "повертати" font-weight: bold для strong). +

+

+ Normalize.css, навпаки, діє "м'яко". Його мета — не скинути всі стилі, а привести їх до єдиного, адекватного вигляду у всіх браузерах. Він виправляє поширені помилки (наприклад, різні відступи body в Chrome та Firefox), але зберігає корисні стилі за замовчуванням. Заголовки залишаються великими, а списки мають маркери. Це дає набагато кращу початкову точку для розробки. +

+ + \ No newline at end of file diff --git a/task2-reset.html b/task2-reset.html new file mode 100644 index 0000000..07658dd --- /dev/null +++ b/task2-reset.html @@ -0,0 +1,37 @@ + + + + + + Reset CSS + + + + + +

Заголовок H1

+

Це звичайний параграф тексту. Він містить жирний та курсивний текст.

+ + +
+ +

Опис експерименту

+

+ Порівнюючи ці дві сторінки (та сторінку взагалі без стилів), можна помітити ключову різницю. +

+

+ Reset.css (наприклад, Meyer Reset) діє "агресивно": він повністю "вбиває" абсолютно всі стилі браузера за замовчуванням. Всі відступи (margin, padding), розміри шрифтів (font-size) і навіть маркери списків (ul) зникають. Це дає "чистий аркуш", але змушує нас вручну прописувати стилі для кожного елемента з нуля (наприклад, "повертати" font-weight: bold для strong). +

+

+ Normalize.css, навпаки, діє "м'яко". Його мета — не скинути всі стилі, а привести їх до єдиного, адекватного вигляду у всіх браузерах. Він виправляє поширені помилки (наприклад, різні відступи body в Chrome та Firefox), але зберігає корисні стилі за замовчуванням. Заголовки залишаються великими, а списки мають маркери. Це дає набагато кращу початкову точку для розробки. +

+ + \ No newline at end of file diff --git a/task3.html b/task3.html new file mode 100644 index 0000000..79de2dd --- /dev/null +++ b/task3.html @@ -0,0 +1,42 @@ + + + + + Display та Box-Sizing + + + +

Властивість 'display'

+

Ми застосовуємо `display` до контейнерів або їх дочірніх елементів:

+ +
+

display: block

+
Блок 1
+
Блок 2
+
+ +
+

display: inline

+ Блок 1 (width/height не працює) + Блок 2 +
+ +
+

display: flex

+
Блок 1
+
Блок 2
+
+ +

Властивість 'box-sizing'

+
+ content-box (default):
+ Width (200px) + Padding (40px) + Border (10px) = + Загальна ширина 250px +
+
+ border-box:
+ Width (200px) = + Загальна ширина 200px (Padding і Border "сховані" всередину) +
+ + \ No newline at end of file diff --git a/task4.html b/task4.html new file mode 100644 index 0000000..2ffb8a5 --- /dev/null +++ b/task4.html @@ -0,0 +1,25 @@ + + + + + Float та Clear + + + +

Float та Clear

+ +
+ +

Цей блок має float: left.

+
+ +

Цей текст обтікає "плаваючий" блок. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Він продовжує обтікати.

+

Текст продовжує обтікати. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Поки є місце, текст буде поруч.

+ +
+ Цей блок використовує clear: left, тому він не обтікає попередній елемент, а "очищує" простір і стрибає під нього. +
+ +

Цей текст з'явиться вже після "очищеного" блоку.

+ + \ No newline at end of file diff --git a/task5.html b/task5.html new file mode 100644 index 0000000..37cd10d --- /dev/null +++ b/task5.html @@ -0,0 +1,31 @@ + + + + + Overflow + + + +

Керування Overflow

+ +

overflow: visible (за замовчуванням)

+
+

Цей довгий текст виходить за межі блоку. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

+
+ +

overflow: hidden

+ + +

overflow: scroll

+
+

Цей довгий текст спричинить появу смуг прокрутки (завжди). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

+
+ +

overflow: auto

+
+

Цей довгий текст спричинить появу смуг прокрутки ЛИШЕ за потреби. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

+
+ + \ No newline at end of file diff --git a/task6.html b/task6.html new file mode 100644 index 0000000..c3bbdad --- /dev/null +++ b/task6.html @@ -0,0 +1,112 @@ + + + + + Позиціонування + + + + +
+ Я fixed. Я прикріплений до вікна браузера. +
+ +

+ Я sticky. Я "прилипну" до верху, коли ви почнете прокручувати. +

+ +
+

Прокрутіть сторінку, щоб побачити ефекти

+ +
+ Це static. Звичайний елемент у потоці. +
+ +
+ Це батьківський блок (position: relative). + +
+ А це absolute. Я позиціонуюсь відносно кутів мого 'relative' батька, а не сторінки. +
+
+ +

...просто багато тексту для прокрутки...

+

...

+

...

+

...Зверніть увагу, як 'fixed' елемент (зелений) завжди на місці...

+

...

+

...А 'sticky' елемент (червоний) "прилип" до верху екрана...

+

...

+

...

+

...

+

(...прокручуйте далі...)

+

...

+

...

+

...

+

...

+

...

+

...

+

...

+

...

+

...

+

Кінець контенту.

+
+ + + \ No newline at end of file