Шпаргалка по CSS
Последнее обновление
Селекторы
Как выбрать элементы, которые вы хотите стилизовать.
| Селектор | Что выбирает |
|---|---|
* | Все элементы |
p | Все элементы <p> (по тегу) |
.btn | Элементы с class="btn" |
#main | Элемент с id="main" |
div p | Все <p> внутри <div> (потомки) |
div > p | Только прямые дочерние элементы |
a:hover | Ссылки при наведении (псевдокласс) |
li:first-child | Первый <li> у своего родителя |
li:nth-child(2n) | Каждый чётный <li> |
input[type="text"] | Поля ввода с этим атрибутом |
p::before | Сгенерированное содержимое перед <p> (псевдоэлемент) |
Блочная модель
Каждый элемент - это блок: содержимое, padding, border, margin.
| Свойство | Что делает |
|---|---|
width / height | Размер области содержимого |
padding | Отступ внутри границы |
border | 1px solid #333 - ширина, стиль, цвет |
margin | Отступ снаружи границы |
box-sizing: border-box | Включить padding + border в ширину |
margin: 0 auto | Центрировать блочный элемент по горизонтали |
overflow: hidden | Обрезать содержимое, выходящее за пределы |
Типографика и цвет
| Свойство | Пример |
|---|---|
color | color: #333 - цвет текста |
background | background: #fff или изображение/градиент |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (или rem, em) |
font-weight | 400 (обычный) … 700 (полужирный) |
line-height | 1.5 - расстояние между строками |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Одномерная раскладка - строки или столбцы. Задайте display: flex на родителе.
| Свойство (на контейнере) | Что делает |
|---|---|
display: flex | Сделать дочерние элементы flex-элементами |
flex-direction | row (по умолчанию) или column |
justify-content | Выравнивание по главной оси (center, space-between) |
align-items | Выравнивание по поперечной оси (center, stretch) |
gap | Расстояние между элементами, напр. gap: 16px |
flex-wrap | wrap позволяет элементам переноситься на новые строки |
flex: 1 (на дочернем) | Элемент растягивается, заполняя доступное место |
Grid
Двумерная раскладка. Задайте display: grid на родителе.
| Свойство | Что делает |
|---|---|
display: grid | Сделать дочерние элементы grid-элементами |
grid-template-columns | 1fr 1fr 1fr или repeat(3, 1fr) |
grid-template-rows | Задать размеры строк |
gap | Расстояние между строками и столбцами |
grid-column | 1 / 3 - растянуть элемент на несколько столбцов |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) для адаптивных сеток |
place-items: center | Центрировать каждый элемент в его ячейке |
Позиционирование и display
| Свойство / значение | Что делает |
|---|---|
position: static | По умолчанию - в обычном потоке |
position: relative | Смещение от обычного места |
position: absolute | Позиционирование относительно ближайшего позиционированного предка |
position: fixed | Закреплён относительно области просмотра |
position: sticky | Прилипает при прокрутке до порога |
top / right / bottom / left | Смещения для позиционированных элементов |
z-index | Порядок наложения (больше = выше) |
display: none | Убирает элемент из раскладки |
display: inline-block | Располагается в строке, но принимает width/height |
Переходы и трансформации
| Свойство | Пример |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0) - сдвиг |
transform: scale | scale(1.1) - изменение размера |
transform: rotate | rotate(45deg) |
opacity | 0 (невидимый) … 1 (непрозрачный) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px - скруглённые углы |
Единицы и адаптивный дизайн
| Единица / возможность | Значение |
|---|---|
px | Абсолютные пиксели |
% | Относительно родителя |
rem | Относительно корневого размера шрифта |
em | Относительно текущего размера шрифта |
vw / vh | 1% ширины / высоты области просмотра |
fr | Доля свободного пространства (grid) |
@media (max-width: 600px) { … } | Применить правила ниже контрольной точки |
Селекторы, блочная модель, flexbox, grid и свойства, которые вы всегда забываете, - на одной странице. Эта шпаргалка по CSS - быстрый справочник по стилизации и вёрстке веб-страниц, от выбора элементов до их центрирования.
Всё здесь - стандартный CSS, который работает в современных браузерах. Скопируйте правило или попробуйте его вживую в playground для HTML, где можно редактировать CSS с мгновенным предпросмотром.
Часто задаваемые вопросы по шпаргалке CSS
Эта шпаргалка по CSS бесплатна?
Да. Эта шпаргалка по CSS бесплатна и без регистрации. Добавьте её в закладки и используйте, когда нужно посмотреть селектор, свойство или паттерн раскладки.
Что использовать - flexbox или grid?
Используйте flexbox для одномерных раскладок - ряд кнопок, навбар, элементы в одну строку или столбец. Используйте grid для двумерных раскладок, где вы управляете и строками, и столбцами одновременно, например раскладкой страницы или галереей карточек. Они хорошо работают вместе: сетка карточек, где каждая карточка внутри использует flexbox, - распространённый приём.
Как центрировать div с помощью CSS?
Самый простой современный способ - flexbox на родителе:
display: flex; justify-content: center; align-items: center; центрирует дочерний элемент и по горизонтали, и по вертикали. Для только горизонтального центрирования блочного элемента с заданной шириной по-прежнему работает margin: 0 auto.Можно ли практиковать CSS онлайн?
Да. Откройте playground для HTML, чтобы писать HTML и CSS вместе с живым предпросмотром. А если нужна структура, бесплатный интерактивный курс CSS от Coddy шаг за шагом разбирает селекторы, блочную модель, flexbox и grid.
Подходит ли эта шпаргалка для начинающих?
Да. Она движется от селекторов и блочной модели (основ) к flexbox, grid и переходам, так что можно начать с верхних разделов и постепенно осваивать современную вёрстку.
Связанные ресурсы
Другие шпаргалки
