Skip to content

Instantly share code, notes, and snippets.

@dmytro-ndp

dmytro-ndp/CSS-lengths.html

Last active March 6, 2025 12:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dmytro-ndp/0608f4107d5dbed6ac5ea607c6a894c0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dmytro-ndp/0608f4107d5dbed6ac5ea607c6a894c0 to your computer and use it in GitHub Desktop.
Download ZIP
Демонстрація стилів CSS
Raw
css-combinators.html
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Селектори</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
text-align: left;
max-width: 700px;
margin: auto;
padding: 20px;
border: 1px solid black;
}
/* "div p" - вибирає всі <p>, які знаходяться всередині <div> */
div p {
color: blue;
font-size: 14px;
}
/* "div > p" - вибирає тільки ті <p>, які є безпосередніми дочірніми елементами <div> */
div > p {
color: green;
font-size: 18px;
}
/* "span + p" - вибирає перший <p>, який знаходиться безпосередньо після <span> */
span + p {
color: red;
font-size: 22px;
}
/* "h3 ~ p" - вибирає всі <p>, які знаходяться після <h3> на тому ж рівні вкладеності */
h3 ~ p {
color: purple;
font-size: 26px;
}
</style>
</head>
<body class="container">
<h1>Приклад CSS селекторів - комбінаторів</h1>
<div>
<p>Цей параграф є дочірнім елементом div (вибирається "div > p").</p>
<p>Ще один дочірній параграф у div.</p>
<span>
<p>Цей параграф вкладений у ще один span (вибирається "div p", але не "div > p").</p>
</span>
</div>
<hr>
<span>Це span.</span>
<p>Цей параграф знаходиться безпосередньо після span (вибирається "span + p").</p>
<p>Ще один параграф, який не вибирається як "span + p".</p>
<hr>
<h3>Це h3.</h3>
<p>Цей параграф вибирається "h3 ~ p" (усі &lt;p&gt; після &lt;h3&gt; на тому ж рівні вкладеності).</p>
<p>Цей параграф знову вибирається як "h3 ~ p" (усі &lt;p&gt; після &lt;h3&gt; на тому ж рівні вкладеності).</p>
</body>
</html>
Raw
CSS-lengths.html
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Довжини</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 20px;
}
.box {
background-color: gray;
text-align: center;
padding: 10px;
margin-top: 20px;
color: white;
}
.main-box {
padding: 20px;
background-color: gray;
color: white;
margin-bottom: 20px;
width: 100%; /* Основний блок займає всю ширину контейнера */
}
/* Контейнер для px, pt та pc (порівняння абсолютних одиниць) */
.px-pt-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.px { width: 50px; } /* 50 пікселів (основна одиниця екрану) */
.pt { width: 50pt; } /* 50 пунктів (використовується у друкованих матеріалах) */
.pc { width: 50pc; } /* 50 піків (1 пік = 12 пунктів) */
.cm { width: 5cm; } /* 5 сантиметрів */
.mm { width: 50mm; } /* 50 міліметрів */
.in { width: 2in; } /* 2 дюйми (1 дюйм = 2.54 см) */
/* Контейнер для em та rem (відносні одиниці вимірювання) */
.parent {
font-size: 20px; /* Розмір шрифту для батьківського елемента */
border: 2px solid black;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.em { width: 10em; font-size: 1.5em; } /* Відносно розміру шрифту батьківського елемента */
.rem { width: 10rem; font-size: 1.5rem; } /* Відносно розміру шрифту кореневого елемента */
.percent { width: 50%; } /* Відносно батьківського контейнера */
/* Порівняння vw та vh (відносно розміру вікна перегляду) */
.vw-vh-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.vw { width: 50vw; } /* 50% ширини вікна перегляду (viewport width) */
.vh { height: 50vh; } /* 50% висоти вікна перегляду (viewport height) */
/* Порівняння vmin та vmax (відносно меншої або більшої сторони екрану) */
.vmin-vmax-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.vmin { width: 50vmin; } /* 50% меншої сторони вікна перегляду */
.vmax { width: 50vmax; } /* 50% більшої сторони вікна перегляду */
</style>
<script>
function updateDimensions() {
const mainBox = document.querySelector(".main-box");
const dimensions = document.querySelector(".dimensions");
const widthPx = mainBox.offsetWidth;
const widthPt = (widthPx * 0.75).toFixed(2); // Конвертація у пункти
const widthPc = (widthPx / 16).toFixed(2); // Конвертація у піки
const widthMm = (widthPx * 0.26458).toFixed(2); // Конвертація у міліметри
const widthIn = (widthPx * 0.01042).toFixed(2); // Конвертація у дюйми
// Відображення значень у відповідному елементі
dimensions.innerHTML = `Ширина: ${widthPx}px | ${widthPt}pt | ${widthPc}pc | ${widthMm}mm | ${widthIn}in`;
}
// Виклик функції при завантаженні сторінки та зміні розміру вікна
window.onload = updateDimensions;
window.onresize = updateDimensions;
</script>
</head>
<body>
<h1>Демонстрація різних одиниць вимірювання в CSS</h1>
<div class="container">
<div class="main-box">Основний блок</div>
<div class="dimensions">Ширина: Обчислення...</div>
</div>
<div class="container">
<!-- Порівняння px, pt та pc -->
<div class="px-pt-container">
<div class="box px">px (50px)</div>
<div class="box pt">pt (50pt)</div>
<div class="box pc">pc (50pc)</div>
</div>
<!-- Абсолютні одиниці вимірювання -->
<div class="box cm">cm (5cm)</div>
<div class="box mm">mm (50mm)</div>
<div class="box in">in (2in)</div>
<!-- Відносні одиниці: em, rem, % -->
<div class="parent">
<p>Батьківський елемент (font-size: 20px)</p>
<div class="box em">em (10em, font-size: 1.5em)</div>
<div class="box rem">rem (10rem, font-size: 1.5rem)</div>
<div class="box percent">% (50%)</div>
</div>
<!-- Порівняння vw та vh
vw визначає ширину елемента відносно ширини вікна перегляду,
vh визначає висоту елемента відносно висоти вікна перегляду.
Це означає, що якщо змінюється ширина або висота вікна, відповідно змінюється і розмір елементів з vw та vh. -->
<div class="vw-vh-container">
<div class="box vw">vw (50vw)</div>
<div class="box vh">vh (50vh)</div>
</div>
<!-- Порівняння vmin та vmax
vmin - мінімальне значення з vw і vh, а vmax - максимальне значення з vw і vh -->
<div class="vmin-vmax-container">
<div class="box vmin">vmin (50vmin)</div>
<div class="box vmax">vmax (50vmax)</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment