Основные свойства css
🅰️ Шрифт
font-family: Arial, sans-serif; /* семейство шрифта */
font-weight: bold; /* жирность: normal | bold | 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; /* выравнивание: left | right | center | justify */
text-indent: 30px; /* отступ первой строки */
text-transform: uppercase; /* преобразование регистра: uppercase | lowercase | capitalize */
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 | center | space-between | space-around | space-evenly */
align-items: center; /* вертикальное выравнивание: stretch | flex-start | flex-end | center | 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: gray;
}
🎨 Цвета, фон и границы
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 */
⏹ Границы
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: grab; /* рука с хватом */
📐 Размеры, отступы и позиционирование
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%); /* черно-белый */