Основні властивості css
🅰️ Шрифт
font-family: Arial, sans-serif; /* сімейство шрифту */
font-weight: bold; / * Жирність: normal | Болд | 100-900 */
font-style: italic; /* курсив */
font-variant: small-caps; /* малі великі літери */
📏 Розмір та масштаб тексту
font-size: 16px; /* розмір шрифту */
line-height: 1.5; /* міжрядкова відстань */
letter-spacing: 0.5px; /* відстань між літерами */
word-spacing: 2px; /* відстань між словами */
🎨 Колір та оформлення
color: black; /* колір тексту: #ffffff */
text-shadow: 2px 2px 5px gray; /* Тінь тексту */
📍 Вирівнювання та оформлення
text-align: center;
text-indent: 30px; /* відступ першого рядка */
text-transform: uppercase; /* перетворення регістру: uppercase |
direction: rtl; /* напрямок тексту: ltr (зліва направо), rtl (справа наліво) */
white-space: nowrap; /* заборона перенесення рядків */
🔗 Оформлення посилань та підкреслення
text-decoration: underline; /* підкреслення: none | underline | line-through | overline */
text-decoration-color: red; /* колір підкреслення */
text-decoration-style: wavy; /* Стиль підкреслення: solid | double | dotted | dashed | wavy */
🔧 Flexbox
display: flex; /* увімкнути flex-контейнер */
flex-direction: row; / * напрямок: row | column | row-reverse | column-reverse */
flex-wrap: wrap; /* Перенесення: nowrap | wrap | wrap-reverse */
justify-content: center; /* горизонтальне вирівнювання: flex-start flex-end центр | space-between | space-around | space-evenly */
align-items: center; /* вертикальне вирівнювання: stretch | flex-start flex-end центр | baseline */
align-content: space-between;/* вирівнювання рядків (при перенесенні) */
gap: 10px; /* відступи між елементами */
🧩 Елементи (дочірні)
flex-grow: 1; / * Розтягування - скільки місця займає (1 = рівномірно) * /
flex-shrink: 0; /* стиск - чи можна стискати */
flex-basis: 100px; /* базовий розмір */
flex: 1 1 100px; /* скорочено: grow shrink basis */
align-self: center; /* індивідуальне вирівнювання */
order: 2; /* Порядок відображення */
💡 Приклад:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
🧠 Псевдокласи та псевдоелементи
:hover /* при наведенні */
:active /* при натисканні */
:focus /* при фокусі (наприклад, input) */
:visited /* відвідане посилання */
:checked /* відзначений checkbox/radio */
:disabled /* вимкнений елемент */
:enabled /* включений елемент */
:required /* обов'язкове поле форми */
:valid /* валідне значення форми */
:invalid /* невалідне */
🔁 Логічні та позиційні селектори
:first-child /* перший нащадок батька */
:last-child /* останній */
:nth-child(2) /* другий */
:nth-child(odd) /* непарні */
:not(.disabled) /* все, крім .disabled */
:has(input) /* якщо всередині є input (підтримується не скрізь) */
:empty /* елемент без вмісту */
🧩 Псевдоелементи
::before {
content: "★ ";
color: gold;
}
::after {
content: " →";
color: gray;
}
💡 Приклад:
a:hover::after {
content: "(посилання)";
color: grey;
}
🎨 Кольори, фон та межі
background-color: #f5f5f5; /* колір фону */
opacity: 0.8; /* прозорість (0 - повністю прозорий, 1 - повністю видимий) */
🖼 Фон
background-image: url("image.jpg"); /* картинка фону */
background-size: cover; /* масштабування: cover | contain */
background-repeat: no-repeat; / * Повтор: repeat | no-repeat */
background-position: center center; /* позиція */
background-attachment: fixed; /* прокручування: scroll | fixed */
⏹ Межi
border: 1px solid black; /* Універсальна властивість */
border-width: 2px; /* Товщина */
border-style: dashed; /* стиль: solid | dashed | dotted | double | none */
border-color: red; /* колір */
border-radius: 8px; /* Заокруглення кутів */
📦 Тінь
box-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* Тінь блоку */
🧱 CSS Grid
display: grid; /* увімкнути grid */
grid-template-columns: 1fr 2fr; /* ширини колонок: можна px, %, fr */
grid-template-rows: auto 100px; /* висоти рядків */
grid-template-areas: /* іменовані області */
"header header"
"sidebar main";
grid-gap: 10px; /* відступи між рядками та колонками */
column-gap: 10px; /* тільки між колонками */
row-gap: 20px; /* тільки між рядками */
justify-items: center; /* вирівнювання вмісту осередків по горизонталі */
align-items: start; /* по вертикалі */
📦 Елементи (дочірні)
grid-column: 1/3; /* від якої до якої колонки (можна span: span 2) */
grid-row: 2/4; /* аналогічно - рядки */
grid-area: header; /* Розміщення в іменованій області */
justify-self: end; /* горизонтальне вирівнювання елемента */
align-self: center; /* вертикальне вирівнювання */
💡 Приклад:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
📱 Адаптивний дизайн та медіа-запити
@media (max-width: 768px) {
body {
font-size: 16px;
}
}
🔍 Часто використовувані умови
(min-width: 600px) /* від 600px і ширше */
(max-width: 1024px) /* до 1024px */
(orientation: landscape) / * горизонтальна орієнтація * /
(pointer: coarse) /* пристрої з грубим введенням (пальці) */
💻 Комбінування умов
@media (min-width: 768px) and (max-width: 1024px) {
.menu {
display: none;
}
}
🧭 Навігація та курсори
a {
text-decoration: none; /* прибрати підкреслення */
color: inherit; /* успадкувати колір */
cursor: pointer; /* курсор "рука" */
}
button {
border: none; /* прибрати рамку */
background: transparent; /* прибрати фон */
cursor: pointer;
}
🖱️ Типи курсорів
cursor: pointer; /* Рука (на клікабельних елементах) */
cursor: default; /* Звичайний курсор */
cursor: Text; /* текстовий курсор (I-beam) */
cursor: move; /* курсор "переміщення" */
cursor: not-allowed; /* заборонено */
cursor: схильність; /* Рука з хватом */
📐 Розміри, відступи та позиціонування
width: 200px; /* ширина */
height: 100px; /* висота */
min-width: 100px; /* мінімальна ширина */
max-width: 500px; /* максимальна ширина */
box-sizing: border-box; /* включає padding та border у width/height */
📦 Внутрішні відступи (padding)
padding: 10px; /* відступ з усіх боків */
padding: 10px 20px; /* зверху/знизу, ліворуч/праворуч */
padding: 10px 15px 5px 20px; /* зверху, праворуч, знизу, зліва */
📤 Зовнішні відступи (margin)
margin: 0 auto; /* по центру по горизонталі */
margin: 10px; /* з усіх боків */
margin: 10px 20px; /* зверху/знизу, ліворуч/праворуч */
margin: 10px 15px 5px 20px; /* зверху, праворуч, знизу, зліва */
📌 Позиціювання
position: static; /* за замовчуванням */
position: relative; /* щодо звичайного становища */
position: absolute; /* абсолютно (всередині батька з relative/absolute) */
position: fixed; /* фіксовано до екрану */
position: sticky; /* "прилипає" при прокручуванні */
top: 10px; left: 20px; /* усунення */
z-index: 10; /* порядок накладання */
🧱 Відображення та тип елемента
display: block; /* Блоковий елемент */
display: inline; /* малий */
display: inline-block; /* малий, але з розмірами */
display: none; /* приховати елемент */
visibility: hidden; /* приховати, але залишити місце */
🧮 Переповнення
overflow: visible; /* за замовчуванням */
overflow: hidden; /* обрізати зайве */
overflow: scroll; /* завжди показувати прокручування */
overflow: auto; /* показувати прокручування при необхідності */
🎞️ Анімації та переходи
transition: all 0.3s ease; /* властивість, тривалість, функція */
transition-property: color, background; /* які властивості анімувати */
transition-duration: 0.5s;
transition-timing-function: ease-in-out; /* Швидкість: linear | ease | ease-in | ease-out | cubic-bezier(...) */
transition-delay: 0.2s; /* затримка */
💡 Приклад:
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: red;
}
🎬 Анімації (@keyframes + animation)
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 0.2s;
animation-iteration-count: infinite; /* або 1 */
animation-direction: alternate; /* normal | reverse | alternate */
animation-timing-function: ease-in;
animation-fill-mode: forwards; /* зберігає фінальний стан */
}
animation: fadeIn 1s ease-out forwards; /* скорочено */
🔄 Трансформації
transform: scale(1.1); /* масштаб */
transform: rotate(45deg); /* поворот */
transform: translateX(100px); /* усунення */
transform: skewX(10deg); /* нахил */
🌫️ Ефекти та фільтри
filter: blur(5px); /* розмиття */
filter: brightness(120%); /* яскравість */
filter: grayscale(100%); /* чорно-білий */