Emmet: ускорение набора CSS-кода

Специальные комбинации символов, рассмотренные в предыдущих разделах, работают только в файлах с расширениями html, php, jsx и некоторых других. В CSS-файлах (и в файлах CSS-препроцессоров) нужно использовать другие комбинации, которые мы рассмотрим в этом разделе.

Форматирование шрифта

Одновременное указание характеристик шрифта:

f<Tab>     => font: 1em sans-serif;

Имя шрифта:

ff<Tab>    => font-family: serif;    ff:s<Tab>  => font-family: serif;
ff:ss<Tab> => font-family: sans-serif;
ff:c<Tab>  => font-family: cursive;
ff:f<Tab>  => font-family: fantasy;
ff:m<Tab>  => font-family: monospace;
ff:a<Tab>  => font-family: auto;
ff:u<Tab>  => font-family: unset;
ff:i<Tab>  => font-family: inherit;
fft<Tab>   => 
   font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
ffa<Tab>   => 
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
ffv<Tab>   => font-family: Verdana, Geneva, sans-serif;

Стиль шрифта:

fs<Tab>    => font-style: italic;    fs:i<Tab>  => font-style: italic;
fs:n<Tab>  => font-style: normal;
fs:o<Tab>  => font-style: oblique;

Размер шрифта:

fsz<Tab>   => font-size: ;
fsza<Tab>  => font-size-adjust: ;

Цвет текста:

c<Tab>     => color: #000;

Жирность шрифта:

fw<Tab>    => font-weight: normal;   fw:n<Tab>  => font-weight: normal;
fw:b<Tab>  => font-weight: bold;
fw:lr<Tab> => font-weight: lighter;
fw:br<Tab> => font-weight: bolder;

Вид строчных букв:

fv<Tab>    => font-variant: normal;
fv:n<Tab>  => font-variant: normal;
fv:sc<Tab> => font-variant: small-caps;

Загружаемые шрифты:

@f<Tab>    => 
   @font-face {
      font-family: ;
      src: url();
   }
@ff<Tab> => 
   @font-face {
      font-family: 'FontName';
      src: url('FileName.eot');
      src: url('FileName.eot?#iefix') format('embedded-opentype'),
          url('FileName.woff') format('woff'),
          url('FileName.ttf') format('truetype'),
          url('FileName.svg#FontName') format('svg');
      font-style: normal;
      font-weight: normal;
   }

Прочие атрибуты:

fd<Tab>     => font-display: auto;
fd:a<Tab>   => font-display: auto;
fd:b<Tab>   => font-display: block;
fd:s<Tab>   => font-display: swap;
fd:f<Tab>   => font-display: fallback;
fd:o<Tab>   => font-display: optional;
fef<Tab>    => font-effect: none;
fef:n<Tab>  => font-effect: none;
fef:eg<Tab> => font-effect: engrave;
fef:eb<Tab> => font-effect: emboss;
fef:o<Tab>  => font-effect: outline;
fem<Tab>    => font-emphasize: ;
femp<Tab>   => font-emphasize-position: before;
femp:b<Tab> => font-emphasize-position: before;
femp:a<Tab> => font-emphasize-position: after;
fems<Tab>   => font-emphasize-style: none;
fems:n<Tab> => font-emphasize-style: none;
fems:ac<Tab> => font-emphasize-style: accent;
fems:dt<Tab> => font-emphasize-style: dot;
fems:ds<Tab> => font-emphasize-style: disc;
fems:c<Tab> => font-emphasize-style: circle;
fsm<Tab>    => font-smoothing: antialiased;
fsm:a<Tab>  => font-smoothing: antialiased;
fsm:s<Tab>  => font-smoothing: subpixel-antialiased;
fsm:n<Tab>  => font-smoothing: none;
fst<Tab>    => font-stretch: normal;
fst:n<Tab>  => font-stretch: normal;
fst:uc<Tab> => font-stretch: ultra-condensed;
fst:ue<Tab> => font-stretch: ultra-expanded;
fst:c<Tab>  => font-stretch: condensed;
fst:ec<Tab> => font-stretch: extra-condensed;
fst:ee<Tab> => font-stretch: extra-expanded;
fst:e<Tab>  => font-stretch: expanded;
fst:sc<Tab> => font-stretch: semi-condensed;
fst:se<Tab> => font-stretch: semi-expanded;
fvs<Tab>    => font-variation-settings: normal;
fvs:n<Tab>  => font-variation-settings: normal;
fvs:u<Tab>  => font-variation-settings: unset;
fvs:ih<Tab> => font-variation-settings: inherit;
fvs:il<Tab> => font-variation-settings: initial;

Форматирование текста

Расстояние между символами в словах:

lts<Tab>    => letter-spacing: normal;
lts:n<Tab>  => letter-spacing: normal;

Расстояние между словами:

wos<Tab>    => word-spacing: ;

Отступ первой строки:

ti<Tab>     => text-indent: ;

Вертикальное расстояние между строками:

lh<Tab>     => line-height: ;

Горизонтальное выравнивание текста:

ta<Tab>     => text-align: left;
ta:l<Tab>   => text-align: left;
ta:r<Tab>   => text-align: right;
ta:c<Tab>   => text-align: center;
ta:j<Tab>   => text-align: justify;
tal<Tab>    => text-align-last: left;
tal:l<Tab>  => text-align-last: left;
tal:r<Tab>  => text-align-last: right;
tal:c<Tab>  => text-align-last: center;
tal:a<Tab>  => text-align-last: auto;

Вертикальное выравнивание текста:

va<Tab>     => vertical-align: top;
va:t<Tab>   => vertical-align: top;
va:bl<Tab>  => vertical-align: baseline;
va:m<Tab>   => vertical-align: middle;
va:b<Tab>   => vertical-align: bottom;
va:sub<Tab> => vertical-align: sub;
va:sup<Tab> => vertical-align: super;
va:tt<Tab>  => vertical-align: text-top;
va:tb<Tab>  => vertical-align: text-bottom;

Подчеркивание, надчеркивание и зачеркивание текста:

td<Tab>     => text-decoration: none;
td:n<Tab>   => text-decoration: none;
td:u<Tab>   => text-decoration: underline;
td:o<Tab>   => text-decoration: overline;
td:l<Tab>   => text-decoration: line-through;

Изменение регистра символов:

tt<Tab>     => text-transform: uppercase;
tt:u<Tab>   => text-transform: uppercase;
tt:l<Tab>   => text-transform: lowercase;
tt:c<Tab>   => text-transform: capitalize;
tt:n<Tab>   => text-transform: none;

Обработка пробелов между словами:

whs<Tab>    => white-space: nowrap;  whs:nw<Tab> => white-space: nowrap;
whs:n<Tab>  => white-space: normal;
whs:p<Tab>  => white-space: pre;
whs:pl<Tab> => white-space: pre-line;
whs:pw<Tab> => white-space: pre-wrap;

Перенос слов:

wow<Tab>    => word-wrap: none;      wow:n<Tab>  => word-wrap: none;
wow:nm<Tab> => word-wrap: normal;
wow:b<Tab>  => word-wrap: break-word;
wow:u<Tab>  => word-wrap: unrestricted;
wow:s<Tab>  => word-wrap: suppress;
wob<Tab>    => word-break: normal;
wob:n<Tab>  => word-break: normal;
wob:b<Tab>  => word-break: break-all;
wob:k<Tab>  => word-break: keep-all;
tw<Tab>     => text-wrap: none;      tw:n<Tab>   => text-wrap: none;
tw:nl<Tab>  => text-wrap: normal;
tw:u<Tab>   => text-wrap: unrestricted;
tw:s<Tab>   => text-wrap: suppress;

Атрибут content:

cnt<Tab>    => content: '';
ct<Tab>     => content: '';
cnt:n<Tab>  => content: normal;
ct:n<Tab>   => content: normal;
cnt:a<Tab>  => content: attr();
ct:a<Tab>   => content: attr();
cnt:oq<Tab> => content: open-quote;
ct:oq<Tab>  => content: open-quote;
cnt:cq<Tab> => content: close-quote;
ct:cq<Tab>  => content: close-quote;
cnt:noq<Tab> => content: no-open-quote;
ct:noq<Tab>  => content: no-open-quote;
cnt:ncq<Tab> => content: no-close-quote;
ct:ncq<Tab>  => content: no-close-quote;
cnt:c<Tab>   => content: counter();
ct:c<Tab>    => content: counter();
cnt:cns<Tab> => content: counters();
ct:cns<Tab>  => content: counters();
q<Tab>       => quotes: ;
coi<Tab>     => counter-increment: ;
cor<Tab>     => counter-reset: ;

Прочие атрибуты:

te<Tab>     => text-emphasis: none;
te:n<Tab>   => text-emphasis: none;
te:ac<Tab>  => text-emphasis: accent;
te:dt<Tab>  => text-emphasis: dot;
te:c<Tab>   => text-emphasis: circle;
te:ds<Tab>  => text-emphasis: disc;
te:b<Tab>   => text-emphasis: before;
te:a<Tab>   => text-emphasis: after;
th<Tab>     => text-height: auto;
th:a<Tab>   => text-height: auto;
th:f<Tab>   => text-height: font-size;
th:t<Tab>   => text-height: text-size;
th:m<Tab>   => text-height: max-size;
tj<Tab>     => text-justify: auto;
tj:a<Tab>   => text-justify: auto;
tj:iw<Tab>  => text-justify: inter-word;
tj:ii<Tab>  => text-justify: inter-ideograph;
tj:ic<Tab>  => text-justify: inter-cluster;
tj:d<Tab>   => text-justify: distribute;
tj:k<Tab>   => text-justify: kashida;
tj:t<Tab>   => text-justify: tibetan;
to<Tab>     => text-outline: 0 0 #000;
tr<Tab>     => text-replace: ;
tov<Tab>    => text-overflow: ellipsis;
tov:e<Tab>  => text-overflow: ellipsis;
tov:c<Tab>  => text-overflow: clip;

Отступы

Внешние отступы:

m<Tab>      => margin: ;              m:a<Tab>   => margin: auto;
m10<Tab>   => margin: 10px;           m10px<Tab> => margin: 10px;
ml<Tab>     => margin-left: ;         ml:a<Tab>  => margin-left: auto;
mr<Tab>     => margin-right: ;        mr:a<Tab>  => margin-right: auto;
mt<Tab>     => margin-top: ;          mt:a<Tab>  => margin-top: auto;
mb<Tab>     => margin-bottom: ;       mb:a<Tab>  => margin-bottom: auto;

Внутренние отступы:

p<Tab>      => padding: ;
p10<Tab>    => padding: 10px;         p10px<Tab> => padding: 10px;
pl<Tab>     => padding-left: ;        pr<Tab>    => padding-right: ;
pt<Tab>     => padding-top: ;         pb<Tab>    => padding-bottom: ;

Рамки

Одновременное задание характеристик рамки:

bd<Tab>     => border: 1px solid #000;
bd:n<Tab>   => border: none;
bdl<Tab>    => border-left: 1px solid #000;
bdr<Tab>    => border-right: 1px solid #000;
bdt<Tab>    => border-top: 1px solid #000;
bdb<Tab>    => border-bottom: 1px solid #000;

Стиль линии рамки:

bds<Tab>    => border-style: none;
bds:n<Tab>  => border-style: none;
bds:h<Tab>  => border-style: hidden;
bds:s<Tab>  => border-style: solid;
bds:dt<Tab> => border-style: dotted;
bds:ds<Tab> => border-style: dashed;
bds:db<Tab> => border-style: double;
bds:g<Tab>  => border-style: groove;
bds:r<Tab>  => border-style: ridge;
bds:i<Tab>  => border-style: inset;
bds:o<Tab>  => border-style: outset;
bds:w<Tab>  => border-style: wave;
bds:dtds<Tab>   => border-style: dot-dash;
bds:dtdtds<Tab> => border-style: dot-dot-dash;
bdls<Tab>       => border-left-style: ;
bdrst<Tab>      => border-right-style: ;
bdts<Tab>       => border-top-style: ;
bdbs<Tab>       => border-bottom-style: ;

Толщина линии рамки:

bdw<Tab>     => border-width: ;
bdlw<Tab>    => border-left-width: ;
bdrw<Tab>    => border-right-width: ;
bdtw<Tab>    => border-top-width: ;
bdbw<Tab>    => border-bottom-width: ;

Цвет линии рамки:

bdc<Tab>     => border-color: #000;
bdlc<Tab>    => border-left-color: #000;
bdrc<Tab>    => border-right-color: #000;
bdtc<Tab>    => border-top-color: #000;
bdbc<Tab>    => border-bottom-color: #000;

Рамки со скругленными углами:

bdrs<Tab>    => border-radius: ;
bdtlrs<Tab>  => border-top-left-radius: ;
bdtrrs<Tab>  => border-top-right-radius: ;
bdblrs<Tab>  => border-bottom-left-radius: ;
bdbrrs<Tab>  => border-bottom-right-radius: ;

Атрибут border-image:

bdi<Tab>     => border-image: url();
bdli<Tab>    => border-left-image: url();
bdri<Tab>    => border-right-image: url();
bdti<Tab>    => border-top-image: url();
bdbi<Tab>    => border-bottom-image: url();
bdtli<Tab>   => border-top-left-image: url();
bdtli:c<Tab> => border-top-left-image: continue;
bdtri<Tab>   => border-top-right-image: url();
bdtri:c<Tab> => border-top-right-image: continue;
bdbli<Tab>   => border-bottom-left-image: url();
bdbli:c<Tab> => border-bottom-left-image: continue;
bdbri<Tab>   => border-bottom-right-image: url();
bdbri:c<Tab> => border-bottom-right-image: continue;

Внешняя рамка:

ol<Tab>      => outline: ;
ols<Tab>     => outline-style: none;
ols:n<Tab>   => outline-style: none;
ols:s<Tab>   => outline-style: solid;
ols:dt<Tab>  => outline-style: dotted;
ols:ds<Tab>  => outline-style: dashed;
ols:db<Tab>  => outline-style: double;
ols:g<Tab>   => outline-style: groove;
ols:r<Tab>   => outline-style: ridge;
ols:i<Tab>   => outline-style: inset;
ols:o<Tab>   => outline-style: outset;
olc<Tab>     => outline-color: #000;
olc:i<Tab>   => outline-color: invert;
olw<Tab>     => outline-width|thin|medium|thick
olo<Tab>     => outline-offset: ;

Прочие атрибуты:

bdbk<Tab>    => border-break: close;
bdbk:c<Tab>  => border-break: close;
bdci<Tab>    => border-corner-image: url();
bdci:c<Tab>  => border-corner-image: continue;
bdf<Tab>     => border-fit: repeat;
bdf:r<Tab>   => border-fit: repeat;
bdf:c<Tab>   => border-fit: clip;
bdf:sc<Tab>  => border-fit: scale;
bdf:st<Tab>  => border-fit: stretch;
bdf:ow<Tab>  => border-fit: overwrite;
bdf:of<Tab>  => border-fit: overflow;
bdf:sp<Tab>  => border-fit: space;
bdlen<Tab>   => border-length: ;
bdlen:a<Tab> => border-length: auto;

Фон элемента

Одновременное задание характеристик фона:

bg<Tab>      => background: #000;

Цвет фона:

bgc<Tab>     => background-color: #fff;

Фоновый рисунок:

bgi<Tab>     => background-image: url();
lg<Tab>      => background-image: linear-gradient();

Режим повтора фонового рисунка:

bgr<Tab>     => background-repeat: no-repeat;
bgr:n<Tab>   => background-repeat: no-repeat;
bgr:rx<Tab>  => background-repeat: repeat-x;
bgr:ry<Tab>  => background-repeat: repeat-y;
bgr:rd<Tab>  => background-repeat: round;
bgr:sp<Tab>  => background-repeat: space;

Прокрутка фонового рисунка:

bga<Tab>     => background-attachment: fixed;
bga:f<Tab>   => background-attachment: fixed;
bga:s<Tab>   => background-attachment: scroll;

Положение фонового рисунка:

bgp<Tab>     => background-position: 0 0;
bgpx<Tab>    => background-position-x: ;
bgpy<Tab>    => background-position-y: ;

Размеры фонового изображения:

bgsz<Tab>    => background-size: contain;
bgsz:ct<Tab> => background-size: contain;
bgsz:a<Tab>  => background-size: auto;
bgsz:cv<Tab> => background-size: cover;

Режим позиционирования фонового изображения:

bgo<Tab>     => background-origin: padding-box;
bgo:pb<Tab>  => background-origin: padding-box;
bgo:bb<Tab>  => background-origin: border-box;
bgo:cb<Tab>  => background-origin: content-box;

Режим заполнения для фона:

bgcp<Tab>    => background-clip: padding-box;
bgcp:pb<Tab> => background-clip: padding-box;
bgcp:cb<Tab> => background-clip: content-box;
bgcp:bb<Tab> => background-clip: border-box;
bgcp:nc<Tab> => background-clip: no-clip;

Атрибут background-break:

bgbk<Tab>    => background-break: bounding-box;
bgbk:bb<Tab> => background-break: bounding-box;
bgbk:eb<Tab> => background-break: each-box;
bgbk:c<Tab>  => background-break: continuous;

Списки

Одновременное указание характеристик списка:

lis<Tab>      => list-style: ;

Вид маркера списка:

list<Tab>     => list-style-type: disc;
list:d<Tab>   => list-style-type: disc;
list:c<Tab>   => list-style-type: circle;
list:s<Tab>   => list-style-type: square;
list:dl<Tab>  => list-style-type: decimal;
list:dlz<Tab> => list-style-type: decimal-leading-zero;
list:lr<Tab>  => list-style-type: lower-roman;
list:ur<Tab>  => list-style-type: upper-roman;

Изображение в качестве маркера списка:

lisi<Tab>     => list-style-image: ;

Компактное отображение списка:

lisp<Tab>     => list-style-position: inside;
lisp:i<Tab>   => list-style-position: inside;
lisp:o<Tab>   => list-style-position: outside;

Таблицы

Рамки таблицы и ячеек:

bdsp<Tab>   => border-spacing: ;
bdcl<Tab>   => border-collapse: collapse;
bdcl:c<Tab> => border-collapse: collapse;
bdcl:s<Tab> => border-collapse: separate;

Размеры таблицы:

tbl<Tab>    => table-layout: fixed;
tbl:f<Tab>  => table-layout: fixed;
tbl:a<Tab>  => table-layout: auto;

Местоположение заголовка:

cps<Tab>    => caption-side: top;    cps:t<Tab>  => caption-side: top;
cps:b<Tab>  => caption-side: bottom;

Указание характеристик ячеек:

ec<Tab>     => empty-cells: show;    ec:s<Tab>   => empty-cells: show;
ec:h<Tab>   => empty-cells: hide;

Вид курсора

Вид курсора:

cur<Tab>    => cursor: pointer;      cur:p<Tab>  => cursor: pointer;
cur:a<Tab>  => cursor: auto;
cur:c<Tab>  => cursor: crosshair;
cur:d<Tab>  => cursor: default;
cur:m<Tab>  => cursor: move;
cur:t<Tab>  => cursor: text;
cur:he<Tab> => cursor: help;
cur:ha<Tab> => cursor: hand;

Форматирование блоков

Управление отображением:

v<Tab>     => visibility: hidden;    v:h<Tab>   => visibility: hidden;
v:v<Tab>   => visibility: visible;
v:c<Tab>   => visibility: collapse;

Указание типа блока:

d<Tab>     => display: grid;
d:n<Tab>   => display: none;
d:b<Tab>   => display: block;
d:i<Tab>   => display: inline;
d:ib<Tab>  => display: inline-block;
d:li<Tab>  => display: list-item;
d:tb<Tab>  => display: table;
d:itb<Tab> => display: inline-table;
d:tbcp<Tab> => display: table-caption;
d:tbhg<Tab> => display: table-header-group;
d:tbrg<Tab> => display: table-row-group;
d:tbfg<Tab> => display: table-footer-group;
d:tbr<Tab>  => display: table-row;
d:tbcol<Tab> => display: table-column;
d:tbclg<Tab> => display: table-column-group;
d:tbc<Tab>  => display: table-cell;
d:f<Tab>    => display: flex;
d:if<Tab>   => display: inline-flex;
d:g<Tab>    => display: grid;
d:ig<Tab>   => display: inline-grid;
d:s<Tab>    => display: subgrid;
d:ri<Tab>   => display: run-in;
d:cp<Tab>   => display: compact;
d:rb<Tab>   => display: ruby;
d:rbt<Tab>  => display: ruby-text;
d:rbtg<Tab> => display: ruby-text-group;

Указание размеров:

bxsz<Tab>    => box-sizing: border-box;
bxsz:bb<Tab> => box-sizing: border-box;
bxsz:cb<Tab> => box-sizing: content-box;
w<Tab>       => width: ;             w:a<Tab>   => width: auto;
h<Tab>       => height: ;            h:a<Tab>   => height: auto;
miw<Tab>     => min-width: ;         mih<Tab>   => min-height: ;
maw<Tab>     => max-width: ;         mah<Tab>   => max-height: ;

Атрибут overflow:

ov<Tab>    => overflow: hidden;      ov:h<Tab>  => overflow: hidden;
ov:v<Tab>  => overflow: visible;
ov:s<Tab>  => overflow: scroll;
ov:a<Tab>  => overflow: auto;
ovx<Tab>   => overflow-x: hidden;    ovx:h<Tab> => overflow-x: hidden;
ovx:v<Tab> => overflow-x: visible;
ovx:s<Tab> => overflow-x: scroll;
ovx:a<Tab> => overflow-x: auto;
ovy<Tab>   => overflow-y: hidden;    ovy:h<Tab> => overflow-y: hidden;
ovy:v<Tab> => overflow-y: visible;
ovy:s<Tab> => overflow-y: scroll;
ovy:a<Tab> => overflow-y: auto;
ovs<Tab>   => overflow-style: scrollbar;
ovs:s<Tab> => overflow-style: scrollbar;
ovs:a<Tab> => overflow-style: auto;
ovs:p<Tab> => overflow-style: panner;
ovs:m<Tab> => overflow-style: move;
ovs:mq<Tab> => overflow-style: marquee;

Управление обтеканием:

fl<Tab>    => float: left;           fl:l<Tab>  => float: left;
fl:r<Tab>  => float: right;
fl:n<Tab>  => float: none;
cl<Tab>    => clear: both;           cl:b<Tab>  => clear: both;
cl:l<Tab>  => clear: left;
cl:r<Tab>  => clear: right;
cl:n<Tab>  => clear: none;

Позиционирование блока:

pos<Tab>   => position: relative;    pos:r<Tab> => position: relative;
pos:a<Tab> => position: absolute;
pos:f<Tab> => position: fixed;
pos:s<Tab> => position: static;
l<Tab>     => left: ;                l:a<Tab>   => left: auto;
t<Tab>     => top: ;                 t:a<Tab>   => top: auto;
r<Tab>     => right: ;               r:a<Tab>   => right: auto;
b<Tab>     => bottom: ;              b:a<Tab>   => bottom: auto;

Последовательность отображения слоев:

z<Tab>     => z-index: ;             z:a<Tab>   => z-index: auto;

Flex-контейнеры

Указание типа блока:

d:f<Tab>    => display: flex;
d:if<Tab>   => display: inline-flex;

Направление выравнивания элементов внутри контейнера:

fxd<Tab>    => flex-direction: row;
fxd:r<Tab>  => flex-direction: row;
fxd:rr<Tab> => flex-direction: row-reverse;
fxd:c<Tab>  => flex-direction: column;
fxd:cr<Tab> => flex-direction: column-reverse;

Перенос на новую строку:

fxw<Tab>    => flex-wrap: nowrap;
fxw:n<Tab>  => flex-wrap: nowrap;
fxw:w<Tab>  => flex-wrap: wrap;
fxw:wv<Tab> => flex-wrap: wrap-reverse;
fxw:we<Tab> => flex-wrap: wrap-reverse;

Одновременное указание характеристик flex-контейнера:

fxf<Tab>    => flex-flow: ;

Размеры элемента:

fxb<Tab>     => flex-basis: fill;
fxb:f<Tab>   => flex-basis: fill;
fxb:a<Tab>   => flex-basis: auto;
fxb:mic<Tab> => flex-basis: min-content;
fxb:mac<Tab> => flex-basis: max-content;
fxb:fc<Tab>  => flex-basis: fit-content;
fxb:c<Tab>   => flex-basis: content;

Растяжение элементов:

fxg<Tab>    => flex-grow: ;

Сжатие элементов:

fxsh<Tab>   => flex-shrink: ;

Одновременное указание характеристик элементов:

fx<Tab>     => flex: ;

Выравнивание элементов внутри контейнера:

jc<Tab>     => justify-content: ;
jc:fs<Tab>  => justify-content: flex-start;
jc:fe<Tab>  => justify-content: flex-end;
jc:c<Tab>   => justify-content: center;
jc:sb<Tab>  => justify-content: space-between;
jc:sd<Tab>  => justify-content: space-around;
jc:sy<Tab>  => justify-content: space-evenly;
ac<Tab>     => align-content: ;
ac:sh<Tab>  => align-content: stretch;
ac:fs<Tab>  => align-content: flex-start;
ac:fe<Tab>  => align-content: flex-end;
ac:c<Tab>   => align-content: center;
ac:sb<Tab>  => align-content: space-between;
ac:sd<Tab>  => align-content: space-around;
ac:sy<Tab>  => align-content: space-evenly;
ai<Tab>     => align-items: ;
ai:sh<Tab>  => align-items: stretch;
ai:fs<Tab>  => align-items: flex-start;
ai:fe<Tab>  => align-items: flex-end;
ai:c<Tab>   => align-items: center;
ai:b<Tab>   => align-items: baseline;
as<Tab>     => align-self: ;
as:a<Tab>   => align-self: auto;
as:sh<Tab>  => align-self: stretch;
as:fs<Tab>  => align-self: flex-start;
as:fe<Tab>  => align-self: flex-end;
as:c<Tab>   => align-self: center;
as:b<Tab>   => align-self: baseline;

Порядок следования элементов внутри контейнера:

ord<Tab>    => order: ;

CSS Grid

Указание типа блока:

d<Tab>     => display: grid;         d:g<Tab>   => display: grid;
d:ig<Tab>  => display: inline-grid;
d:s<Tab>   => display: subgrid;

Описание строк и столбцов:

gt<Tab>    => grid-template: ;
gtc<Tab>   => grid-template-columns: repeat();
gtc:r<Tab> => grid-template-columns: repeat();
gtc:m<Tab> => grid-template-columns: minmax();
gtc:a<Tab> => grid-template-columns: auto;
gtr<Tab>   => grid-template-rows: repeat();
gtr:m<Tab> => grid-template-rows: minmax();
gtr:a<Tab> => grid-template-rows: auto;

Автоматическое размещение элементов внутри сетки:

gaf<Tab>   => grid-auto-flow: row;
gaf:r<Tab> => grid-auto-flow: row;
gaf:c<Tab> => grid-auto-flow: column;
gaf:d<Tab> => grid-auto-flow: dense;
gaf:i<Tab> => grid-auto-flow: initial;
gaf:ih<Tab> => grid-auto-flow: inherit;
gaf:u<Tab> => grid-auto-flow: unset;

Добавление элементов в ячейки сетки:

gcs<Tab>   => grid-column-start: ;
gce<Tab>   => grid-column-end: ;
gc<Tab>    => grid-column: ;
grs<Tab>   => grid-row-start: ;
gre<Tab>   => grid-row-end: ;
gr<Tab>    => grid-row: ;
ga<Tab>    => grid-area: ;

Размеры неявных ячеек:

gac<Tab>   => grid-auto-columns: auto;
gac:m<Tab> => grid-auto-columns: minmax();
gar<Tab>   => grid-auto-rows: auto;
gar:m<Tab> => grid-auto-rows: minmax();

Расстояние между ячейками:

gcg<Tab>   => grid-column-gap: ;
grg<Tab>   => grid-row-gap: ;
gg<Tab>    => grid-gap: ;

Имена элементов:

ga<Tab>    => grid-area: ;
gta<Tab>   => grid-template-areas: ;
gt<Tab>    => grid-template: ;

Одновременное указание характеристик контейнера:

gd<Tab>    => grid: ;

Выравнивание сетки внутри контейнера:

jc<Tab>     => justify-content: start;
jc:s<Tab>   => justify-content: start;
jc:e<Tab>   => justify-content: end;
jc:c<Tab>   => justify-content: center;
jc:sb<Tab>  => justify-content: space-between;
jc:sd<Tab>  => justify-content: space-around;
jc:sy<Tab>  => justify-content: space-evenly;
ac<Tab>     => align-content: start;
ac:s<Tab>   => align-content: start;
ac:e<Tab>   => align-content: end;
ac:c<Tab>   => align-content: center;
ac:sb<Tab>  => align-content: space-between;
ac:sd<Tab>  => align-content: space-around;
ac:sy<Tab>  => align-content: space-evenly;

Выравнивание элемента внутри ячейки:

js<Tab>     => justify-self: start;
js:s<Tab>   => justify-self: start;
js:e<Tab>   => justify-self: end;
js:c<Tab>   => justify-self: center;
js:sh<Tab>  => justify-self: stretch;
ji<Tab>     => justify-items: start;
ji:s<Tab>   => justify-items: start;
ji:e<Tab>   => justify-items: end;
ji:c<Tab>   => justify-items: center;
ji:sh<Tab>  => justify-items: stretch;
as<Tab>     => align-self: start;
as:s<Tab>   => align-self: start;
as:e<Tab>   => align-self: end;
as:sh<Tab>  => align-self: stretch;
as:c<Tab>   => align-self: center;
as:a<Tab>   => align-self: auto;
ai<Tab>     => align-items: start;
ai:s<Tab>   => align-items: start;
ai:e<Tab>   => align-items: end;
ai:sh<Tab>  => align-items: stretch;
ai:c<Tab>   => align-items: center;

Многоколоночный текст

Количество колонок:

colm<Tab>    => columns: ;
colmc<Tab>   => column-count: ;
colmc:a<Tab> => column-count: auto;

Размеры колонок:

colmw<Tab>   => column-width: ;
colmw:a<Tab> => column-width: auto;
colmf<Tab>   => column-fill: ;
colmf:a<Tab> => column-fill: auto;

Расстояние между колонками:

colmg<Tab>   => column-gap: ;

Линии между колонками:

colmr<Tab>   => column-rule: ;
colmrs<Tab>  => column-rule-style: ;
colmrc<Tab>  => column-rule-color: ;
colmrw<Tab>  => column-rule-width: ;
colms<Tab>   => column-span: ;

Эффекты

Изменение прозрачности:

op<Tab>     => opacity: ;

Создание тени для текста:

tsh<Tab>    => text-shadow: hoff voff blur #000;

Создание тени для блока:

bxsh<Tab>   => box-shadow: inset hoff voff blur #000;
bxsh:n<Tab> => box-shadow: none;

Анимация с двумя состояниями

Одновременное задание всех параметров анимации:

trs<Tab>    => transition: prop time;

Продолжительность анимации:

trsdu<Tab>  => transition-duration: time;

Задержка перед началом анимации:

trsde<Tab>  => transition-delay: time;

Задание анимируемых атрибутов:

trsp<Tab>   => transition-property: prop;

Закон анимации:

trstf<Tab>  => transition-timing-function: fn;

Анимация с несколькими состояниями

Шкала времени:

@kf<Tab>    => 
   @keyframes identifier {
      
   }

Одновременное задание всех параметров анимации:

anim<Tab>        => 
   animation: name duration timing-function delay iteration-count 
   direction fill-mode;

Указание названия шкалы времени:

animn<Tab>       => animation-name: ;

Продолжительность анимации:

animdur<Tab>     => animation-duration: 0s;

Задержка перед началом анимации:

animdel<Tab>     => animation-delay: time;

Закон анимации:

animtf<Tab>      => animation-timing-function: linear;
animtf:l<Tab>    => animation-timing-function: linear;
animtf:e<Tab>    => animation-timing-function: ease;
animtf:ei<Tab>   => animation-timing-function: ease-in;
animtf:eo<Tab>   => animation-timing-function: ease-out;
animtf:eio<Tab>  => animation-timing-function: ease-in-out;
animtf:cb<Tab>   => 
   animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 1.0);

Количество повторений анимации:

animic<Tab>      => animation-iteration-count: 1;
animic:i<Tab>    => animation-iteration-count: infinite;

Направление анимации:

animdir<Tab>     => animation-direction: normal;
animdir:n<Tab>   => animation-direction: normal;
animdir:r<Tab>   => animation-direction: reverse;
animdir:a<Tab>   => animation-direction: alternate;
animdir:arv<Tab> => animation-direction: alternate-reverse;

Текущее состояние анимации:

animps<Tab>      => animation-play-state: running;
animps:r<Tab>    => animation-play-state: running;
animps:p<Tab>    => animation-play-state: paused;

Состояние элемента до начала анимации и после ее завершения:

animfm<Tab>      => animation-fill-mode: both;
animfm:bh<Tab>   => animation-fill-mode: both;
animfm:bt<Tab>   => animation-fill-mode: both;
animfm:bs<Tab>   => animation-fill-mode: backwards;
animfm:f<Tab>    => animation-fill-mode: forwards;

Двумерные трансформации

Атрибут transform:

trf<Tab>         => transform: ;

Смещение:

trf:tx<Tab>      => transform: translateX(x);
trf:ty<Tab>      => transform: translateY(y);
trf:t<Tab>       => transform: translate(x, y);

Изменение масштаба:

trf:scx<Tab>     => transform: scaleX(x);
trf:scy<Tab>     => transform: scaleY(y);
trf:sc<Tab>      => transform: scale(x, y);

Наклон:

trf:skx<Tab>     => transform: skewX(angle);
trf:sky<Tab>     => transform: skewY(angle);

Вращение:

trf:r<Tab>       => transform: rotate(angle);

Позиционирование точки начала координат для двумерных трансформаций:

trfo<Tab>        => transform-origin: ;

Трехмерные трансформации

Выполнение трехмерных трансформаций:

trf:tz<Tab>      => transform: translateZ(z);
trf:td<Tab>      => transform: translate3d(tx, ty, tz);
trf:scz<Tab>     => transform: scaleZ(z);
trf:scd<Tab>     => transform: scale3d(x, y, z);
trf:rx<Tab>      => transform: rotateX(angle);
trf:ry<Tab>      => transform: rotateY(angle);
trf:rz<Tab>      => transform: rotateZ(angle);

Скрытие обратной стороны элемента:

bfv<Tab>         => backface-visibility: hidden;
bfv:h<Tab>       => backface-visibility: hidden;
bfv:v<Tab>       => backface-visibility: visible;

Режим проецирования элементов на контейнер:

trfs<Tab>        => transform-style: preserve-3d;

Позиционирование точки начала координат для трехмерных трансформаций:

trfo<Tab>        => transform-origin: ;

Прочие атрибуты и правила

Правила:

@i<Tab>      => @import url();
@import<Tab> => @import url();
@m<Tab>      => 
   @media screen {
      
   }
@media<Tab>  => 
   @media screen {
      
   }

Прочие атрибуты:

ap<Tab>      => appearance: none;
cp<Tab>      => clip: auto;              cp:a<Tab>    => clip: auto;
cp:r<Tab>    => clip: rect(top right bottom left);
mar<Tab>     => max-resolution: ;
mir<Tab>     => min-resolution: ;
ori<Tab>     => orientation: landscape;
ori:l<Tab>   => orientation: landscape;
ori:p<Tab>   => orientation: portrait;
orp<Tab>     => orphans: ;
pgbb<Tab>    => page-break-before: auto;
pgbb:au<Tab> => page-break-before: auto;
pgbb:al<Tab> => page-break-before: always;
pgbb:l<Tab>  => page-break-before: left;
pgbb:r<Tab>  => page-break-before: right;
pgba<Tab>    => page-break-after: auto;
pgba:au<Tab> => page-break-after: auto;
pgba:al<Tab> => page-break-after: always;
pgba:l<Tab>  => page-break-after: left;
pgba:r<Tab>  => page-break-after: right;
pgbi<Tab>    => page-break-inside: auto;
pgbi:au<Tab> => page-break-inside: auto;
pgbi:av<Tab> => page-break-inside: avoid;
rsz<Tab>     => resize: none;            rsz:n<Tab>   => resize: none;
rsz:b<Tab>   => resize: both;
rsz:h<Tab>   => resize: horizontal;
rsz:v<Tab>   => resize: vertical;
whsc<Tab>    => white-space-collapse: normal;
whsc:n<Tab>  => white-space-collapse: normal;
whsc:k<Tab>  => white-space-collapse: keep-all;
whsc:l<Tab>  => white-space-collapse: loose;
whsc:bs<Tab> => white-space-collapse: break-strict;
whsc:ba<Tab> => white-space-collapse: break-all;
wm<Tab>      => writing-mode: lr-tb;
wm:btl<Tab>  => writing-mode: bt-lr;
wm:btr<Tab>  => writing-mode: bt-rl;
wm:lrb<Tab>  => writing-mode: lr-bt;
wm:lrt<Tab>  => writing-mode: lr-tb;
wm:rlb<Tab>  => writing-mode: rl-bt;
wm:rlt<Tab>  => writing-mode: rl-tb;
wm:tbl<Tab>  => writing-mode: tb-lr;
wm:tbr<Tab>  => writing-mode: tb-rl;
us<Tab>      => user-select: none;
zom<Tab>     => zoom: 1;

Ввод числового значения атрибута

После комбинации символов допускается указание числового значения, которое станет значением атрибута стилей с добавлением (при необходимости) единицы изменения px (для целочисленных значений) или em (для дробных значений):

m10<Tab>   => margin: 10px;
p2.5<Tab>  => padding: 2.5em;
lh1.5<Tab> => line-height: 1.5;

Если нужно указать несколько значений, то они задаются через дефис:

m10-20<Tab> => margin: 10px 20px;

Для ввода отрицательных значений следует указать два дефиса:

p-15--5<Tab> => padding: -15px -5px;

После значения можно указать единицу измерения. В этом случае разделять значения дефисом не нужно:

p10px20px<Tab> => padding: 10px 20px;

Вместо реальной единицы измерения допускается указание псевдонимов: p для %, e для em, x для ex:

p10p20e30x5<Tab> => padding: 10% 20em 30ex 5px;

Для вставки значения !important достаточно ввести восклицательный знак:

m20!<Tab>        => margin: 20px !important;

В качестве значения для цвета можно указать одну, две, три или шесть шестнадцатеричных цифр после символа #. Если цифры не заданы, то получим черный цвет:

c#<Tab>          => color: #000000;
c#f<Tab>         => color: #ffffff;
c#e8<Tab>        => color: #e8e8e8;
c#ec0<Tab>       => color: #eecc00;
c#28a745<Tab>    => color: #28a745;

Добавление вендорных префиксов

Если перед комбинацией символов указать дефис, то будут сгенерированы названия атрибутов с вендорными префиксами:

-bdrs<Tab> => 
   -webkit-border-radius: ;
   -moz-border-radius: ;
   border-radius: ;
На заметку

Редактор Visual Studio Code
Подробное описание руководства по редактору Visual Studio Code (PDF)

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов