🎨 Каскадні стилі (CSS): Основи та можливості
📌 Що таке CSS?
CSS (Cascading Style Sheets) — це мова для опису зовнішнього вигляду HTML-сторінки. Вона дозволяє відокремити структуру (HTML) від оформлення (стилі).
👉 Завдяки CSS сайт стає: красивим, зручним і адаптивним.
⚙️ Основні принципи
Каскадність — застосування кількох стилів, де пріоритет мають останні або конкретніші правила.
Селектори — вказують, до яких елементів застосовуються стилі (p, .class, #id).
Властивості та значення — визначають вигляд елементів (color: red; font-size: 16px;).
🎭 Можливості CSS
🔹 Робота з текстом
Кольори, шрифти, розміри, вирівнювання.
Створення акцентів: жирний, курсив, підкреслення.
🔹 Кольори та фони
Задання кольору у форматах HEX, RGB, HSL.
Фонові зображення, градієнти, прозорість.
🔹 Розташування елементів
Відступи (margin, padding).
Рамки (border).
Вирівнювання через flexbox та grid.
🔹 Адаптивний дизайн
Media queries для різних екранів (ПК, планшет, телефон).
Відсоткові значення та відносні одиниці (em, rem, vh, vw).
🔹 Анімації та переходи
Плавні зміни стилів (transition).
Створення руху (@keyframes для анімацій).
🛠️ Приклади коду
/* Загальні стилі */ body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #74ebd5, #ACB6E5);
color: #333;
}
/* Стиль заголовка */ h1 {
text-align: center;
color: #2c3e50;
}
/* Кнопка */ button {
background: #3498db;
color: white;
padding: 10px 20px;
border-radius: 8px;
transition: 0.3s;
}
button:hover {
background: #2980b9;
}
🎯 Висновок
CSS — це основа веб-дизайну. Він дозволяє створювати не просто текстові сторінки, а динамічні, стильні та адаптивні сайти, які працюють на всіх пристроях.
