Emmet Cheatsheet — Шпаргалка по Emmet

🔗 Синтаксис Emmet операторы и модификаторы

div

.class

#id

div.class#id

a>b

Вложенность (child)

a+b

Соседние (sibling)

a>b^c

Подъем на уровень (climb-up)

a*3

Умножение (3 элемента)

a+(b>c)+d

Группировка

ul>li.item$*3

Нумерация (item1, item2...)

ul>li.item$$*3

Нумерация с нулем (item01...)

ul>li.item$@3*3

Нумерация с 3 (item3, item4...)

ul>li.item$@-*3

Обратная нумерация

p{Текст}

<p>Текст</p>

a[href=#]

div[data-x=y]

🌐 HTML: Основные элементы теги и сокращения

!

<!DOCTYPE html> <html lang="en"> <head>...</head> <body>...</body> </html>

html:5

То же что и !

a

a:link

a:mail

a:tel

img

img:s

picture

figure

figc

ifr

link

link:css

link:favicon

link:rss

meta:utf

meta:vp

meta:desc

meta:kw

script

script:src

style

btn

btn:s

btn:r

btn:d

ol

ul

dl

table+

Таблица с заголовком и строками

tr

td

📝 Формы input, form, textarea

form

form:get

form:post

input

inp

input:t / input:text

input:p / input:password

input:e / input:email

input:n / input:number

input:d / input:date

input:c / input:checkbox

input:r / input:radio

input:f / input:file

input:s / input:submit

input:b / input:button

input:h / input:hidden

input:search

input:url

input:color

input:range

input:time

label

select

option / opt

textarea

fieldset

legend

datalist

output

🆕 HTML5 элементы семантическая разметка

header

footer

main

nav

section / sect

article / art

aside

hgroup

address

dialog

details

summary

progress

meter

time

mark

data

template

slot

canvas

🎬 Медиа видео, аудио, SVG

video

audio

source / src

src:sc

src:m4a

src:mp4

src:webm

track

embed

object

map

area

svg

symbol

use

🎨 CSS: Основные свойства часто используемые

m10

margin: 10px;

m10-20

margin: 10px 20px;

m10-20-30

margin: 10px 20px 30px;

mt10

margin-top: 10px;

mr10

margin-right: 10px;

mb10

margin-bottom: 10px;

ml10

margin-left: 10px;

m:a / m:auto

margin: auto;

p10

padding: 10px;

p10-20

padding: 10px 20px;

pt10

padding-top: 10px;

pr10

padding-right: 10px;

pb10

padding-bottom: 10px;

pl10

padding-left: 10px;

w100

width: 100px;

w100p / w:100%

width: 100%;

h50

height: 50px;

maw / max-w

max-width: ;

miw / min-w

min-width: ;

mah / max-h

max-height: ;

mih / min-h

min-height: ;

bgc#fff

background-color: #fff;

bgc

background-color: ;

bg

background: ;

bgi

background-image: url();

bgr:n

background-repeat: no-repeat;

bgp:c

background-position: center;

bgs:cv

background-size: cover;

bgs:ct

background-size: contain;

c#000

color: #000;

c#f00.5

color: rgba(255, 0, 0, 0.5);

fs16

font-size: 16px;

fs2r

font-size: 2rem;

fw700

font-weight: 700;

fw:b

font-weight: bold;

fw:n

font-weight: normal;

ff

font-family: ;

ff:s

font-family: serif;

ff:ss

font-family: sans-serif;

ff:m

font-family: monospace;

ta:l

text-align: left;

ta:c

text-align: center;

ta:r

text-align: right;

ta:j

text-align: justify;

td:n

text-decoration: none;

td:u

text-decoration: underline;

tt:u

text-transform: uppercase;

tt:l

text-transform: lowercase;

tt:c

text-transform: capitalize;

lh1.5

line-height: 1.5;

bdrs5

border-radius: 5px;

bdrs50%

border-radius: 50%;

bxsh

box-shadow: hoff voff blur color;

bxsh:n

box-shadow: none;

bxz:cb

box-sizing: border-box;

op1

opacity: 1;

op.5

opacity: 0.5;

v:h

visibility: hidden;

v:v

visibility: visible;

cur:p

cursor: pointer;

cur:d

cursor: default;

z10

z-index: 10;

ov:h

overflow: hidden;

ov:a

overflow: auto;

ov:s

overflow: scroll;

lis:n

list-style: none;

pe:n

pointer-events: none;

us:n

user-select: none;

📍 Позиционирование и Display

d:n

display: none;

d:b

display: block;

d:i

display: inline;

d:ib

display: inline-block;

d:f

display: flex;

d:if

display: inline-flex;

d:g

display: grid;

d:ig

display: inline-grid;

d:t

display: table;

d:tr

display: table-row;

d:tc

display: table-cell;

d:li

display: list-item;

pos:s

position: static;

pos:r

position: relative;

pos:a

position: absolute;

pos:f

position: fixed;

pos:st

position: sticky;

t0

top: 0;

r0

right: 0;

b0

bottom: 0;

l0

left: 0;

t50%

top: 50%;

fl:l

float: left;

fl:r

float: right;

fl:n

float: none;

cl

clear: both;

cl:l

clear: left;

cl:r

clear: right;

📦 Flexbox все свойства Flexbox

d:f

display: flex;

fxd:r

flex-direction: row;

fxd:rr

flex-direction: row-reverse;

fxd:c

flex-direction: column;

fxd:cr

flex-direction: column-reverse;

fxw:n

flex-wrap: nowrap;

fxw:w

flex-wrap: wrap;

fxw:wr

flex-wrap: wrap-reverse;

jc:fs

justify-content: flex-start;

jc:fe

justify-content: flex-end;

jc:c

justify-content: center;

jc:sb

justify-content: space-between;

jc:sa

justify-content: space-around;

jc:se

justify-content: space-evenly;

ai:fs

align-items: flex-start;

ai:fe

align-items: flex-end;

ai:c

align-items: center;

ai:b

align-items: baseline;

ai:s

align-items: stretch;

ac:fs

align-content: flex-start;

ac:c

align-content: center;

ac:sb

align-content: space-between;

ac:sa

align-content: space-around;

as:fs

align-self: flex-start;

as:c

align-self: center;

as:fe

align-self: flex-end;

as:s

align-self: stretch;

fxg

flex-grow: ;

fxsh

flex-shrink: ;

fxb

flex-basis: ;

ord

order: ;

g10

gap: 10px;

rg10

row-gap: 10px;

cg10

column-gap: 10px;

🔲 CSS Grid свойства Grid

d:g

display: grid;

d:ig

display: inline-grid;

gtc

grid-template-columns: ;

gtc:1fr1fr

grid-template-columns: 1fr 1fr;

gtr

grid-template-rows: ;

gta

grid-template-areas: ;

gt

grid-template: ;

gg10

grid-gap: 10px;

gcg10

grid-column-gap: 10px;

grg10

grid-row-gap: 10px;

jc

justify-content: ;

ji

justify-items: ;

js

justify-self: ;

ac

align-content: ;

ai

align-items: ;

as

align-self: ;

gc

grid-column: ;

gr

grid-row: ;

ga

grid-area: ;

gcs

grid-column-start: ;

gce

grid-column-end: ;

grs

grid-row-start: ;

gre

grid-row-end: ;

gac

grid-auto-columns: ;

gar

grid-auto-rows: ;

gaf

grid-auto-flow: ;

gaf:r

grid-auto-flow: row;

gaf:c

grid-auto-flow: column;

gaf:d

grid-auto-flow: dense;

ps

place-self: ;

pi

place-items: ;

pc

place-content: ;

🎬 Анимации и Transitions

trf

transform: ;

trf:r45

transform: rotate(45deg);

trf:sc1.5

transform: scale(1.5);

trf:t10-20

transform: translate(10px, 20px);

trfo

transform-origin: ;

trs

transition: ;

trs:all.3s

transition: all .3s;

trsde

transition-delay: ;

trsdu.3s

transition-duration: .3s;

trsp

transition-property: ;

trstf

transition-timing-function: ;

trstf:e

transition-timing-function: ease;

trstf:ei

transition-timing-function: ease-in;

trstf:eo

transition-timing-function: ease-out;

anim

animation: ;

anim:fade1s

animation: fade 1s;

animn

animation-name: ;

animdu

animation-duration: ;

animdu1s

animation-duration: 1s;

animtf

animation-timing-function: ;

animdel

animation-delay: ;

animic

animation-iteration-count: ;

animic:inf

animation-iteration-count: infinite;

animdir

animation-direction: ;

animdir:a

animation-direction: alternate;

animdir:r

animation-direction: reverse;

animfm

animation-fill-mode: ;

animfm:f

animation-fill-mode: forwards;

animps

animation-play-state: ;

animps:p

animation-play-state: paused;

@kf

@keyframes name { from {} to {} }

✨ Трансформации

trf:r45

transform: rotate(45deg);

trf:r-45

transform: rotate(-45deg);

trf:sc2

transform: scale(2);

trf:scx.5

transform: scaleX(0.5);

trf:scy1.5

transform: scaleY(1.5);

trf:sc2-3

transform: scale(2, 3);

trf:t10-20

transform: translate(10px, 20px);

trf:tx50%

transform: translateX(50%);

trf:ty-50%

transform: translateY(-50%);

trf:skx10

transform: skewX(10deg);

trf:sky-10

transform: skewY(-10deg);

trf:sk10-20

transform: skew(10deg, 20deg);

trf:t3d10-20-30

transform: translate3d(10px, 20px, 30px);

trf:tz10

transform: translateZ(10px);

trf:rx45

transform: rotateX(45deg);

trf:ry90

transform: rotateY(90deg);

trf:rz45

transform: rotateZ(45deg);

trfo:cc

transform-origin: center center;

trfo:tc

transform-origin: top center;

trfo:0-0

transform-origin: 0 0;

trfo:50%-50%

transform-origin: 50% 50%;

trfo:100%-100%

transform-origin: 100% 100%;

prsp1000

perspective: 1000px;

prspo:c

perspective-origin: center;

bfv:h

backface-visibility: hidden;

bfv:v

backface-visibility: visible;

trs:r45

transform: rotate(45deg);

🎯 Популярные комбинации

Центрирование (Flexbox)

d:f+jc:c+ai:c

Центрирование (Grid)

d:g+pi:c

Кнопка

btn+d:ib+p10-20+bgc#000+c#fff+bdrs5+td:n

Hero секция

sect.hero+h1+p+a.btn

Карточка товара

.card>img+h3+p.price+a.btn

Навигация

nav>ul.nav>li*5>a[href=#]{Пункт $}

Форма входа

form>inp:e+inp:p+btn:s{Войти}

3 колонки Grid

d:g+gtc:1fr1fr1fr+gg20

Hover эффект

trs:all.3s+:hover{trf:sc1.05}

Absolute центрирование

pos:a+t50%+l50%+trf:t-50%-50%

📋 Emmet Cheatsheet