nazar/web-lec8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Nazar
2025-11-15 15:29:08 +02:00
commit e881dd953c
11 changed files with 406 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
style1.css Normal file
View File

@@ -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;
}

35
style3.css Normal file
View File

@@ -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;
}

19
style4.css Normal file
View File

@@ -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;
}

21
style5.css Normal file
View File

@@ -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; }

29
task1.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Блокові та Інлайнові</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>Блокові (div) та Інлайнові (span)</h1>
<h2>Блокові елементи (div)</h2>
<div class="block">
Це блоковий елемент div. Він займає всю доступну ширину і завжди починається з нового рядка.
</div>
<div class="block">
Це другий елемент div. Він також починається з нового рядка.
</div>
<h2>Інлайнові елементи (span)</h2>
<p>
Це параграф, а всередині нього є
<span class="inline">елемент span (інлайновий)</span>.
Він залишається в потоці тексту і займає лише необхідну йому ширину.
<span class="inline">Ось ще один span</span>, який продовжує той самий рядок.
</p>
</body>
</html>

37
task2-normalize.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Normalize CSS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css">
<style>
body { padding: 20px; line-height: 1.5; }
h1 { margin-bottom: 10px; }
ul { margin-left: 20px; }
li { margin-bottom: 5px; }
</style>
</head>
<body>
<h1>Заголовок H1</h1>
<p>Це звичайний параграф тексту. Він містить <b>жирний</b> та <em>курсивний</em> текст.</p>
<ul>
<li>Перший пункт</li>
<li>Другий пункт</li>
</ul>
<hr style="margin: 20px 0;">
<h2>Опис експерименту</h2>
<p>
Порівнюючи ці дві сторінки (та сторінку взагалі без стилів), можна помітити ключову різницю.
</p>
<p>
<b>Reset.css</b> (наприклад, Meyer Reset) діє "агресивно": він повністю "вбиває" абсолютно всі стилі браузера за замовчуванням. Всі відступи (margin, padding), розміри шрифтів (font-size) і навіть маркери списків (ul) зникають. Це дає "чистий аркуш", але змушує нас вручну прописувати стилі для кожного елемента з нуля (наприклад, "повертати" font-weight: bold для strong).
</p>
<p>
<b>Normalize.css</b>, навпаки, діє "м'яко". Його мета — не скинути всі стилі, а привести їх до єдиного, адекватного вигляду у всіх браузерах. Він виправляє поширені помилки (наприклад, різні відступи body в Chrome та Firefox), але зберігає корисні стилі за замовчуванням. Заголовки залишаються великими, а списки мають маркери. Це дає набагато кращу початкову точку для розробки.
</p>
</body>
</html>

37
task2-reset.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reset CSS</title>
<link rel="stylesheet" href="https://unpkg.com/reset-css/reset.css">
<style>
body { padding: 20px; line-height: 1.5; }
h1 { font-size: 2em; font-weight: bold; margin-bottom: 10px; }
ul { list-style: disc; margin-left: 40px; }
li { margin-bottom: 5px; }
</style>
</head>
<body>
<h1>Заголовок H1</h1>
<p>Це звичайний параграф тексту. Він містить <b>жирний</b> та <em>курсивний</em> текст.</p>
<ul>
<li>Перший пункт</li>
<li>Другий пункт</li>
</ul>
<hr style="margin: 20px 0;">
<h2>Опис експерименту</h2>
<p>
Порівнюючи ці дві сторінки (та сторінку взагалі без стилів), можна помітити ключову різницю.
</p>
<p>
<b>Reset.css</b> (наприклад, Meyer Reset) діє "агресивно": він повністю "вбиває" абсолютно всі стилі браузера за замовчуванням. Всі відступи (margin, padding), розміри шрифтів (font-size) і навіть маркери списків (ul) зникають. Це дає "чистий аркуш", але змушує нас вручну прописувати стилі для кожного елемента з нуля (наприклад, "повертати" font-weight: bold для strong).
</p>
<p>
<b>Normalize.css</b>, навпаки, діє "м'яко". Його мета — не скинути всі стилі, а привести їх до єдиного, адекватного вигляду у всіх браузерах. Він виправляє поширені помилки (наприклад, різні відступи body в Chrome та Firefox), але зберігає корисні стилі за замовчуванням. Заголовки залишаються великими, а списки мають маркери. Це дає набагато кращу початкову точку для розробки.
</p>
</body>
</html>

42
task3.html Normal file
View File

@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Display та Box-Sizing</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<h2>Властивість 'display'</h2>
<p>Ми застосовуємо `display` до контейнерів або їх дочірніх елементів:</p>
<div class="container">
<h3>display: block</h3>
<div class="item display-block">Блок 1</div>
<div class="item display-block">Блок 2</div>
</div>
<div class="container">
<h3>display: inline</h3>
<span class="item display-inline">Блок 1 (width/height не працює)</span>
<span class="item display-inline">Блок 2</span>
</div>
<div class="container display-flex">
<h3>display: flex</h3>
<div class="item">Блок 1</div>
<div class="item">Блок 2</div>
</div>
<h2>Властивість 'box-sizing'</h2>
<div class="box content-box">
<b>content-box (default):</b><br>
Width (200px) + Padding (40px) + Border (10px) =
<b>Загальна ширина 250px</b>
</div>
<div class="box border-box">
<b>border-box:</b><br>
Width (200px) =
<b>Загальна ширина 200px</b> (Padding і Border "сховані" всередину)
</div>
</body>
</html>

25
task4.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Float та Clear</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Float та Clear</h1>
<div class="floated-box">
<img src="https://i.ytimg.com/vi/BwSQyuUxYfI/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBSh-1FNkCXWq0LfQwk-xxOy_BZqA" width="150">
<p>Цей блок має <b>float: left</b>.</p>
</div>
<p>Цей текст обтікає "плаваючий" блок. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Він продовжує обтікати.</p>
<p>Текст продовжує обтікати. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Поки є місце, текст буде поруч.</p>
<div class="cleared-box">
Цей блок використовує <b>clear: left</b>, тому він не обтікає попередній елемент, а "очищує" простір і стрибає під нього.
</div>
<p>Цей текст з'явиться вже після "очищеного" блоку.</p>
</body>
</html>

31
task5.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Overflow</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<h1>Керування Overflow</h1>
<h3>overflow: visible (за замовчуванням)</h3>
<div class="box visible">
<p>Цей довгий текст виходить за межі блоку. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
</div>
<h3>overflow: hidden</h3>
<div class="box hidden">
<p>Цей довгий текст буде просто обрізаний. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
</div>
<h3>overflow: scroll</h3>
<div class="box scroll">
<p>Цей довгий текст спричинить появу смуг прокрутки (завжди). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
</div>
<h3>overflow: auto</h3>
<div class="box auto">
<p>Цей довгий текст спричинить появу смуг прокрутки ЛИШЕ за потреби. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.</p>
</div>
</body>
</html>

112
task6.html Normal file
View File

@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Позиціонування</title>
<style>
body {
font-family: sans-serif;
line-height: 1.6;
margin: 0;
}
.box {
padding: 15px;
border: 2px solid #333;
margin: 10px;
}
.static {
position: static;
background-color: #f0f0f0;
}
.relative-parent {
position: relative;
background-color: #e0e0e0;
height: 150px;
}
.absolute-child {
position: absolute;
top: 20px;
right: 20px;
background-color: #fff3cd;
border-color: #856404;
width: 50%;
}
.fixed-box {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #d4edda;
border: 2px solid #155724;
padding: 15px;
z-index: 100;
}
.sticky-header {
position: sticky;
top: 0;
background-color: #f8d7da;
border: 2px solid #721c24;
padding: 10px;
margin: 0;
z-index: 50;
}
.scroll-content {
height: 2000px;
background: #fafafa;
padding: 20px;
}
</style>
</head>
<body>
<div class="fixed-box">
Я <b>fixed</b>. Я прикріплений до вікна браузера.
</div>
<h2 class="sticky-header">
Я <b>sticky</b>. Я "прилипну" до верху, коли ви почнете прокручувати.
</h2>
<div class="scroll-content">
<h1>Прокрутіть сторінку, щоб побачити ефекти</h1>
<div class="box static">
Це <b>static</b>. Звичайний елемент у потоці.
</div>
<div class="box relative-parent">
Це батьківський блок (<b>position: relative</b>).
<div class="box absolute-child">
А це <b>absolute</b>. Я позиціонуюсь відносно кутів мого 'relative' батька, а не сторінки.
</div>
</div>
<p>...просто багато тексту для прокрутки...</p>
<p>...</p>
<p>...</p>
<p>...Зверніть увагу, як 'fixed' елемент (зелений) завжди на місці...</p>
<p>...</p>
<p>...А 'sticky' елемент (червоний) "прилип" до верху екрана...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>(...прокручуйте далі...)</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>Кінець контенту.</p>
</div>
</body>
</html>