📖
Кольори та типографіка
CSS кольори, шрифти, розміри та CSS-змінні
Кольори в CSS
CSS підтримує кілька форматів кольорів:
css
/* HEX — найпоширеніший */
color: #e44d26; /* помаранчевий */
color: #fff; /* білий (скорочення) */
/* RGB */
color: rgb(228, 77, 38);
/* RGBA — з прозорістю (0 = прозорий, 1 = непрозорий) */
background: rgba(0, 0, 0, 0.5); /* чорний 50% */
/* HSL — відтінок, насиченість, світлість */
color: hsl(14, 76%, 52%);
/* Іменовані */
color: red;
color: cornflowerblue;color — колір тексту. background-color (або background) — колір фону.
Типографіка
css
/* Шрифт */
font-family: 'Inter', Arial, sans-serif;
/* Якщо 'Inter' не завантажився — Arial, якщо ні — будь-який sans-serif */
/* Розмір */
font-size: 16px; /* пікселі */
font-size: 1rem; /* відносно кореневого елемента (16px за замовч.) */
font-size: 1.125em; /* відносно батьківського елемента */
/* Жирність */
font-weight: 400; /* normal */
font-weight: 700; /* bold */
/* Міжрядковий інтервал */
line-height: 1.6; /* в 1.6 рази більше font-size — хороший стандарт */
/* Вирівнювання */
text-align: left | center | right | justify;
/* Оформлення */
text-decoration: none | underline | line-through;
text-transform: uppercase | lowercase | capitalize;
letter-spacing: 0.05em; /* міжлітерний інтервал */CSS-змінні (Custom Properties)
Позволяють зберігати значення і використовувати їх по всьому CSS:
css
:root {
--color-primary: #6070f7;
--color-text: #1e293b;
--font-size-base: 16px;
--border-radius: 8px;
}
.btn {
background: var(--color-primary);
border-radius: var(--border-radius);
}
/* Якщо потрібно змінити основний колір — змінюємо лише в :root */Чому це круто: змінив одне значення в :root — і кольорова схема оновилась по всьому сайту. Ідеально для темної теми.
css
💬
Ось CSS який використовує ця платформа. rem + CSS-змінні — сучасний стандарт.
Надавай перевагу rem замість px для шрифтів! Якщо користувач збільшив розмір шрифту в браузері (для зручності читання), rem масштабується разом, а px — ні.