Основи CSS з категоризацією

Основи CSS з категоризацією

Ось категоризована шпаргалка для CSS, яка допоможе вам вивчити та зрозуміти його властивості та їх призначення. Кожна категорія містить основні властивості та приклади коду.

1. Основи налаштування CSS

/* Основний синтаксис CSS */  
selector {  
 property: value;  
}

Приклад:

body {  
 font-family: Arial, sans-serif;  
 background-color: #f0f0f0;  
 margin: 0;  
}

2. Стилізація тексту

/* Шрифт та текст */  
color: #333;  
font-size: 16px;  
font-weight: bold;  
font-style: italic;  
text-align: center;  
text-decoration: underline;  
letter-spacing: 1px;  
line-height: 1.5;  
text-transform: uppercase;  
word-spacing: 2px;

Приклад:

h1 {  
 color: #ff6347;  
 text-align: center;  
 text-transform: uppercase;  
}

3. Модель блоку

/* Марджіни, паддінги, бордери та розміри */  
margin: 10px;  
padding: 15px;  
border: 1px solid #ccc;  
border-radius: 5px;  
width: 200px;  
height: 100px;  
box-sizing: border-box;

Приклад:

div {  
 padding: 20px;  
 margin: 10px;  
 border: 2px dashed #444;  
 box-sizing: border-box;  
}

4. Фони

background-color: #eaeaea;  
background-image: url('image.jpg');  
background-repeat: no-repeat;  
background-size: cover;  
background-position: center;

Приклад:

body {  
 background-color: #f8f9fa;  
 background-image: url('pattern.png');  
 background-size: contain;  
}

5. Позиціонування

position: static; /* за замовчуванням */  
position: relative;  
position: absolute;  
position: fixed;  
top: 10px;  
left: 20px;  
z-index: 1;

Приклад:

.box {  
 position: relative;  
 top: 50px;  
 left: 100px;  
}

6. Відображення та видимість

display: block;  
display: inline;  
display: flex;  
display: grid;  
visibility: visible;  
visibility: hidden;  
overflow: hidden;

Приклад:

.container {  
 display: flex;  
 justify-content: space-around;  
 align-items: center;  
}

7. Flexbox

display: flex;  
flex-direction: row; /* або column */  
justify-content: flex-start; /* або center, space-between, space-around */  
align-items: flex-start; /* або center, flex-end */  
flex-wrap: wrap;  
gap: 10px;

Приклад:

.flex-container {  
 display: flex;  
 justify-content: center;  
 gap: 20px;  
}

8. Grid

display: grid;  
grid-template-columns: repeat(3, 1fr);  
grid-gap: 10px;  
align-items: center;  
justify-items: center;

Приклад:

.grid-container {  
 display: grid;  
 grid-template-columns: 1fr 2fr;  
 gap: 15px;  
}

9. Анімації та переходи

/* Переходи */  
transition: all 0.3s ease;

/* Анімації */  
@keyframes example {  
 from { background-color: red; }  
 to { background-color: yellow; }  
}animation: example 2s infinite;

Приклад:

.box {  
 transition: transform 0.5s;  
}

.box:hover {  
 transform: scale(1.2);  
}

10. Медіа-запити

@media (max-width: 600px) {  
 body {  
 background-color: lightblue;  
 }  
}

Приклад:

@media (max-width: 768px) {  
 .container {  
 flex-direction: column;  
 }  
}

11. Псевдокласи та псевдоелементи

/* Псевдокласи */  
a:hover {  
 color: red;  
}

/* Псевдоелементи */  
p::before {  
 content: "Note: ";  
}

Приклад:

button:hover {  
 background-color: #ff6347;  
}

p::after {  
 content: " (Кінець)";  
}

12. Користувацькі властивості (CSS змінні)

:root {  
 --main-color: #3498db;  
 --padding: 10px;  
}

div {  
 color: var(--main-color);  
 padding: var(--padding);  
}

Не соромтесь досліджувати та експериментувати з цими властивостями, щоб зміцнити свої знання з CSS.

Дайте знати, якщо вам потрібні додаткові приклади чи деталі з будь-якої теми!

Перекладено з: Basic CSS with group categorized