Emmet — Вёрстка на максималках

Сниппеты сокращений emmet. Шпаргалка (cheatsheet) для быстрой вёрстки при помощи Emmet. Верстаем целые страницы одной строкой за несколько секунд.

Большой набор сокращений emmet. Пока черновик, позже доработаю для более удобной навигации.

Базовый синтаксис emmet сокращений

Дочерний элемент: >

nav>ul>li

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

Соседний элемент: +

div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

Выше уровнем: ^

div+div>p>span+em^bq

<div></div>
<div>
  <p><span></span><em></em></p>
  <blockquote></blockquote>
</div>

div+div>p>span+em^^bq

<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Группировка: ()

div>(header>ul>li*2>a)+footer>p

<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

(div>dl>(dt+dd)*3)+footer>p

<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>
<footer>
  <p></p>
</footer>

Повторение: *

ul>li*5

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Нумерация: $

ul>li.item$*5

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

h$[title=item$]{Header $}*3

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

ul>li.item$$$*5

<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
</ul>

ul>li.item$@-*5

<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

ul>li.item$@3*5

<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li>
</ul>

Атрибуты ID и CLASS

#header

<div id="header"></div>

.title

<div class="title"></div>

form#search.wide

<form id="search" class="wide"></form>

p.class1.class2.class3

<p class="class1 class2 class3"></p>

Пользовательские атрибуты

p[title="Hello world”]

<p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

<td rowspan="2" colspan="3" title=""></td>

[a='value1’ b="value2”]

<div a="value1" b="value2"></div>

Текстовое содержимое: {}

a{Click me}

<a href="">Click me</a>

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

Пропуск имён тегов (ещё быстрее)

.class

<div class="class"></div>

em>.class

<em><span class="class"></span></em>

ul>.class

<ul>
  <li class="class"></li>
</ul>

table>.row>.col

<table>
  <tr class="row">
    <td class="col"></td>
  </tr>
</table>

HTML

Все неизвестные аббревиатуры будут преобразованы в теги, например foo → <foo></foo>.

Псевдоним html:5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

<a href=""></a>

a:link

<a href="http://"></a>

a:mail

<a href="mailto:"></a>

abbr

<abbr title=""></abbr>

acronym, acr

<acronym title=""></acronym>

base

<base href="" />

basefont

<basefont />

<br />

frame

<frame />

<hr />

bdo

<bdo dir=""></bdo>

bdo:r

<bdo dir="rtl"></bdo>

bdo:l

<bdo dir="ltr"></bdo>

col

<col />

link

<link rel="stylesheet" href="" />

link:css

<link rel="stylesheet" href="style.css" />

link:print

<link rel="stylesheet" href="print.css" media="print" />

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

link:touch

<link rel="apple-touch-icon" href="favicon.png" />

link:rss

<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

link:atom

<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

link:import, link:im

<link rel="import" href="component.html" />

meta

<meta />

meta:utf

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

meta:win

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

meta:compat

<meta http-equiv="X-UA-Compatible" content="IE=7" />

style

<style></style>

script

<script></script>

script:src

<script src=""></script>

img

<img src="" alt="" />

img:srcset, img:s

<img srcset="" src="" alt="" />

img:sizes, img:z

<img sizes="" srcset="" src="" alt="" />

picture

<picture></picture>

source, src

<source />

source:src, src:sc

<source src="" type="" />

source:srcset, src:s

<source srcset="" />

source:media, src:m

<source media="(min-width: )" srcset="" />

source:type, src:t

<source srcset="" type="image/" />

source:sizes, src:z

<source sizes="" srcset="" />

source:media:type, src:mt

<source media="(min-width: )" srcset="" type="image/" />

source:media:sizes, src:mz

<source media="(min-width: )" sizes="" srcset="" />

source:sizes:type, src:zt

<source sizes="" srcset="" type="image/" />

iframe

<iframe src="" frameborder="0"></iframe>

embed

<embed src="" type="" />

object

<object data="" type=""></object>

param

<param name="" value="" />

map

<map name=""></map>

area

<area shape="" coords="" href="" alt="" />

area:d

<area shape="default" href="" alt="" />

area:c

<area shape="circle" coords="" href="" alt="" />

area:r

<area shape="rect" coords="" href="" alt="" />

area:p

<area shape="poly" coords="" href="" alt="" />

form

<form action=""></form>

form:get

<form action="" method="get"></form>

form:post

<form action="" method="post"></form>

label

<label for=""></label>

input

<input type="text" />

inp

<input type="text" name="" id="" />

input:hidden, input:h

Псевдоним input\[type=hidden name\]

<input type="hidden" name="" />

input:text, input:t

Псевдоним inp

<input type="text" name="" id="" />

input:search

Псевдоним inp\[type=search\]

<input type="search" name="" id="" />

input:email

Псевдоним inp\[type=email\]

<input type="email" name="" id="" />

input:url

Псевдоним inp\[type=url\]

<input type="url" name="" id="" />

input:password, input:p

Псевдоним inp\[type=password\]

<input type="password" name="" id="" />

input:datetime

Псевдоним inp\[type=datetime\]

<input type="datetime" name="" id="" />

input:date

Псевдоним inp\[type=date\]

<input type="date" name="" id="" />

input:datetime-local

Псевдоним inp\[type=datetime-local\]

<input type="datetime-local" name="" id="" />

input:month

Псевдоним inp\[type=month\]

<input type="month" name="" id="" />

input:week

Псевдоним inp\[type=week\]

<input type="week" name="" id="" />

input:time

Псевдоним inp\[type=time\]

<input type="time" name="" id="" />

input:tel

Псевдоним inp\[type=tel\]

<input type="tel" name="" id="" />

input:number

Псевдоним inp\[type=number\]

<input type="number" name="" id="" />

input:color

Псевдоним inp\[type=color\]

<input type="color" name="" id="" />

input:checkbox, input:c

Псевдоним inp\[type=checkbox\]

<input type="checkbox" name="" id="" />

input:radio, input:r

Псевдоним inp\[type=radio\]

<input type="radio" name="" id="" />

input:range

Псевдоним inp\[type=range\]

<input type="range" name="" id="" />

input:file, input:f

Псевдоним inp\[type=file\]

<input type="file" name="" id="" />

input:submit, input:s

<input type="submit" value="" />

input:image, input:i

<input type="image" src="" alt="" />

input:button, input:b

<input type="button" value="" />

isindex

<isindex />

input:reset

Псевдоним input:button\[type=reset\]

<input type="reset" value="" />

select

<select name="" id=""></select>

select:disabled, select:d

Псевдоним select\[disabled.\]

<select name="" id="" disabled="disabled"></select>

option, opt

<option value=""></option>

textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

marquee

<marquee behavior="" direction=""></marquee>

menu:context, menu:c

Псевдоним menu\[type=context\]>

<menu type="context"></menu>

menu:toolbar, menu:t

Псевдоним menu\[type=toolbar\]>

<menu type="toolbar"></menu>

video

<video src=""></video>

audio

<audio src=""></audio>

html:xml

<html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

<keygen />

command

<command />

button:submit, button:s, btn:s

Псевдоним button\[type=submit\]

<button type="submit"></button>

button:reset, button:r, btn:r

Псевдоним button\[type=reset\]

<button type="reset"></button>

button:disabled, button:d, btn:d

Псевдоним button\[disabled.\]

<button disabled="disabled"></button>

fieldset:disabled, fieldset:d, fset:d, fst:d

Псевдоним fieldset\[disabled.\]

<fieldset disabled="disabled"></fieldset>

Псевдоним blockquote

<blockquote></blockquote>

fig

Псевдоним figure

<figure></figure>

figc

Псевдоним figcaption

<figcaption></figcaption>

pic

Псевдоним picture

<picture></picture>

ifr

Псевдоним iframe

<iframe src="" frameborder="0"></iframe>

emb

Псевдоним embed

<embed src="" type="" />

obj

Псевдоним object

<object data="" type=""></object>

cap

Псевдоним caption

<caption></caption>

colg

Псевдоним colgroup

<colgroup></colgroup>

fst, fset

Псевдоним fieldset

<fieldset></fieldset>

btn

Псевдоним button

<button></button>

optg

Псевдоним optgroup

<optgroup></optgroup>

tarea

Псевдоним textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

leg

Псевдоним legend

<legend></legend>

sect

Псевдоним section

<section></section>

art

Псевдоним article

<article></article>

hdr

Псевдоним header

<header></header>

ftr

Псевдоним footer

<footer></footer>

adr

Псевдоним address

<address></address>

dlg

Псевдоним dialog

<dialog></dialog>

str

Псевдоним strong

<strong></strong>

prog

Псевдоним progress

<progress></progress>

Псевдоним main

<main></main>

tem

Псевдоним template

<template></template>

datag

Псевдоним datagrid

<datagrid></datagrid>

datal

Псевдоним datalist

<datalist></datalist>

Псевдоним keygen

<keygen />

out

Псевдоним output

<output></output>

det

Псевдоним details

<details></details>

cmd

Псевдоним command

<command />

doc

Псевдоним html>(head>meta\[charset=${charset}\]+title{${1:Document}})+body

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

ri:dpr, ri:d

Псевдоним img:s

<img srcset="" src="" alt="" />

ri:viewport, ri:v

Псевдоним img:z

<img sizes="" srcset="" src="" alt="" />

ri:art, ri:a

Псевдоним pic>src:m+img

<picture>
  <source media="(min-width: )" srcset="" />
  <img src="" alt="" />
</picture>

ri:type, ri:t

Псевдоним pic>src:t+img

<picture>
  <source srcset="" type="image/" />
  <img src="" alt="" />
</picture>

html:4t

Псевдоним !!!4t+doc4\[lang=${lang}\]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

html:4s

Псевдоним !!!4s+doc4\[lang=${lang}\]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

html:xt

Псевдоним !!!xt+doc4\[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}\]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

html:xs

Псевдоним !!!xs+doc4\[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}\]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

html:xxs

Псевдоним !!!xxs+doc4\[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}\]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

html:5

Псевдоним !!!+doc\[lang=${lang}\]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

ol+

Псевдоним ol>li

<ol>
  <li></li>
</ol>

ul+

Псевдоним ul>li

<ul>
  <li></li>
</ul>

dl+

Псевдоним dl>dt+dd

<dl>
  <dt></dt>
  <dd></dd>
</dl>

map+

Псевдоним map>area

<map name="">
  <area shape="" coords="" href="" alt="" />
</map>

table+

Псевдоним table>tr>td

<table>
  <tr>
    <td></td>
  </tr>
</table>

colgroup+, colg+

Псевдоним colgroup>col

<colgroup>
  <col />
</colgroup>

tr+

Псевдоним tr>td

<tr>
  <td></td>
</tr>

select+

Псевдоним select>option

<select name="" id="">
  <option value=""></option>
</select>

optgroup+, optg+

Псевдоним optgroup>option

<optgroup>
  <option value=""></option>
</optgroup>

pic+

Псевдоним picture>source:srcset+img

<picture>
  <source srcset="" />
  <img src="" alt="" />
</picture>

!!!

<!DOCTYPE html>

!!!4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- ${child} -->

cc:ie6

<!--\[if lte IE 6\]> ${child} <!\[endif\]-->

cc:ie

<!--\[if IE\]> ${child} <!\[endif\]-->

cc:noie

<!--\[if !IE\]><!--> ${child} <!--<!\[endif\]-->

CSS

CSS модуль использует нечёткий (fuzzy) поиск для неизвестных сокращений, например: ov:h == ov-h == ovh == oh.

Если сокращение не найдено, оно трансформируется в название свойства: foo-bar → foo-bar: |;

Также можете предварить сокращение дефисом для вендор-зависимых свойств: -foo

Позиционирование и отображение

pos

position:relative;

pos:s

position:static;

pos:a

position:absolute;

pos:r

position:relative;

pos:f

position:fixed;

top:;

t:a

top:auto;

right:;

r:a

right:auto;

bottom:;

b:a

bottom:auto;

left:;

l:a

left:auto;

z-index:;

z:a

z-index:auto;

float:left;

fl:n

float:none;

fl:l

float:left;

fl:r

float:right;

clear:both;

cl:n

clear:none;

cl:l

clear:left;

cl:r

clear:right;

cl:b

clear:both;

display:block;

d:n

display:none;

d:b

display:block;

d:f

display:flex;

d:if

display:inline-flex;

d:i

display:inline;

d:ib

display:inline-block;

d:li

display:list-item;

d:ri

display:run-in;

d:cp

display:compact;

d:tb

display:table;

d:itb

display:inline-table;

d:tbcp

display:table-caption;

d:tbcl

display:table-column;

d:tbclg

display:table-column-group;

d:tbhg

display:table-header-group;

d:tbfg

display:table-footer-group;

d:tbr

display:table-row;

d:tbrg

display:table-row-group;

d:tbc

display:table-cell;

d:rb

display:ruby;

d:rbb

display:ruby-base;

d:rbbg

display:ruby-base-group;

d:rbt

display:ruby-text;

d:rbtg

display:ruby-text-group;

visibility:hidden;

v:v

visibility:visible;

v:h

visibility:hidden;

v:c

visibility:collapse;

overflow:hidden;

ov:v

overflow:visible;

ov:h

overflow:hidden;

ov:s

overflow:scroll;

ov:a

overflow:auto;

ovx

overflow-x:hidden;

ovx:v

overflow-x:visible;

ovx:h

overflow-x:hidden;

ovx:s

overflow-x:scroll;

ovx:a

overflow-x:auto;

ovy

overflow-y:hidden;

ovy:v

overflow-y:visible;

ovy:h

overflow-y:hidden;

ovy:s

overflow-y:scroll;

ovy:a

overflow-y:auto;

ovs

overflow-style:scrollbar;

ovs:a

overflow-style:auto;

ovs:s

overflow-style:scrollbar;

ovs:p

overflow-style:panner;

ovs:m

overflow-style:move;

ovs:mq

overflow-style:marquee;

zoo, zm

zoom:1;

clip:;

cp:a

clip:auto;

cp:r

clip:rect(top right bottom left);

rsz

resize:;

rsz:n

resize:none;

rsz:b

resize:both;

rsz:h

resize:horizontal;

rsz:v

resize:vertical;

cur

cursor:${pointer};

cur:a

cursor:auto;

cur:d

cursor:default;

cur:c

cursor:crosshair;

cur:ha

cursor:hand;

cur:he

cursor:help;

cur:m

cursor:move;

cur:p

cursor:pointer;

cur:t

cursor:text;

Margin и Padding

margin:;

m:a

margin:auto;

margin-top:;

mt:a

margin-top:auto;

margin-right:;

mr:a

margin-right:auto;

margin-bottom:;

mb:a

margin-bottom:auto;

margin-left:;

ml:a

margin-left:auto;

padding:;

padding-top:;

padding-right:;

padding-bottom:;

padding-left:;

Box Sizing

bxz

box-sizing:border-box;

bxz:cb

box-sizing:content-box;

bxz:bb

box-sizing:border-box;

bxsh

box-shadow:inset hoff voff blur color;

bxsh:r

box-shadow:inset hoff voff blur spread rgb(0, 0, 0);

bxsh:ra

box-shadow:inset h v blur spread rgba(0, 0, 0, .5);

bxsh:n

box-shadow:none;

width:;

w:a

width:auto;

height:;

h:a

height:auto;

maw

max-width:;

maw:n

max-width:none;

mah

max-height:;

mah:n

max-height:none;

miw

min-width:;

mih

min-height:;

Шрифт

font:;

font:1em Arial,sans-serif;

font-weight:;

fw:n

font-weight:normal;

fw:b

font-weight:bold;

fw:br

font-weight:bolder;

fw:lr

font-weight:lighter;

font-style:${italic};

fs:n

font-style:normal;

fs:i

font-style:italic;

fs:o

font-style:oblique;

font-variant:;

fv:n

font-variant:normal;

fv:sc

font-variant:small-caps;

font-size:;

fza

font-size-adjust:;

fza:n

font-size-adjust:none;

font-family:;

ff:s

font-family:serif;

ff:ss

font-family:sans-serif;

ff:c

font-family:cursive;

ff:f

font-family:fantasy;

ff:m

font-family:monospace;

ff:a

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

ff:t

font-family: "Times New Roman", Times, Baskerville, Georgia, serif;

ff:v

font-family: Verdana, Geneva, sans-serif;

fef

font-effect:;

fef:n

font-effect:none;

fef:eg

font-effect:engrave;

fef:eb

font-effect:emboss;

fef:o

font-effect:outline;

fem

font-emphasize:;

femp

font-emphasize-position:;

femp:b

font-emphasize-position:before;

femp:a

font-emphasize-position:after;

fems

font-emphasize-style:;

fems:n

font-emphasize-style:none;

fems:ac

font-emphasize-style:accent;

fems:dt

font-emphasize-style:dot;

fems:c

font-emphasize-style:circle;

fems:ds

font-emphasize-style:disc;

fsm

font-smooth:;

fsm:a

font-smooth:auto;

fsm:n

font-smooth:never;

fsm:aw

font-smooth:always;

fst

font-stretch:;

fst:n

font-stretch:normal;

fst:uc

font-stretch:ultra-condensed;

fst:ec

font-stretch:extra-condensed;

fst:c

font-stretch:condensed;

fst:sc

font-stretch:semi-condensed;

fst:se

font-stretch:semi-expanded;

fst:e

font-stretch:expanded;

fst:ee

font-stretch:extra-expanded;

fst:ue

font-stretch:ultra-expanded;

Текст

vertical-align:top;

va:sup

vertical-align:super;

va:t

vertical-align:top;

va:tt

vertical-align:text-top;

va:m

vertical-align:middle;

va:bl

vertical-align:baseline;

va:b

vertical-align:bottom;

va:tb

vertical-align:text-bottom;

va:sub

vertical-align:sub;

text-align:left;

ta:l

text-align:left;

ta:c

text-align:center;

ta:r

text-align:right;

ta:j

text-align:justify;

ta-lst

text-align-last:;

tal:a

text-align-last:auto;

tal:l

text-align-last:left;

tal:c

text-align-last:center;

tal:r

text-align-last:right;

text-decoration:none;

td:n

text-decoration:none;

td:u

text-decoration:underline;

td:o

text-decoration:overline;

td:l

text-decoration:line-through;

text-emphasis:;

te:n

text-emphasis:none;

te:ac

text-emphasis:accent;

te:dt

text-emphasis:dot;

te:c

text-emphasis:circle;

te:ds

text-emphasis:disc;

te:b

text-emphasis:before;

te:a

text-emphasis:after;

text-height:;

th:a

text-height:auto;

th:f

text-height:font-size;

th:t

text-height:text-size;

th:m

text-height:max-size;

text-indent:;

ti:-

text-indent:-9999px;

text-justify:;

tj:a

text-justify:auto;

tj:iw

text-justify:inter-word;

tj:ii

text-justify:inter-ideograph;

tj:ic

text-justify:inter-cluster;

tj:d

text-justify:distribute;

tj:k

text-justify:kashida;

tj:t

text-justify:tibetan;

text-outline:;

to+

text-outline:0 0 #000;

to:n

text-outline:none;

text-replace:;

tr:n

text-replace:none;

text-transform:uppercase;

tt:n

text-transform:none;

tt:c

text-transform:capitalize;

tt:u

text-transform:uppercase;

tt:l

text-transform:lowercase;

text-wrap:;

tw:n

text-wrap:normal;

tw:no

text-wrap:none;

tw:u

text-wrap:unrestricted;

tw:s

text-wrap:suppress;

tsh

text-shadow:hoff voff blur #000;

tsh:r

text-shadow:h v blur rgb(0, 0, 0);

tsh:ra

text-shadow:h v blur rgba(0, 0, 0, .5);

tsh+

text-shadow:0 0 0 #000;

tsh:n

text-shadow:none;

line-height:;

lts

letter-spacing:;

lts-n

letter-spacing:normal;

whs

white-space:;

whs:n

white-space:normal;

whs:p

white-space:pre;

whs:nw

white-space:nowrap;

whs:pw

white-space:pre-wrap;

whs:pl

white-space:pre-line;

whsc

white-space-collapse:;

whsc:n

white-space-collapse:normal;

whsc:k

white-space-collapse:keep-all;

whsc:l

white-space-collapse:loose;

whsc:bs

white-space-collapse:break-strict;

whsc:ba

white-space-collapse:break-all;

wob

word-break:;

wob:n

word-break:normal;

wob:k

word-break:keep-all;

wob:ba

word-break:break-all;

wos

word-spacing:;

wow

word-wrap:;

wow:nm

word-wrap:normal;

wow:n

word-wrap:none;

wow:u

word-wrap:unrestricted;

wow:s

word-wrap:suppress;

wow:b

word-wrap:break-word;

Фон (background)

background:#000;

bg+

background:#fff url() 0 0 no-repeat;

bg:n

background:none;

bgc

background-color:#fff;

bgc:t

background-color:transparent;

bgi

background-image:url();

bgi:n

background-image:none;

bgr

background-repeat:;

bgr:n

background-repeat:no-repeat;

bgr:x

background-repeat:repeat-x;

bgr:y

background-repeat:repeat-y;

bgr:sp

background-repeat:space;

bgr:rd

background-repeat:round;

bga

background-attachment:;

bga:f

background-attachment:fixed;

bga:s

background-attachment:scroll;

bgp

background-position:0 0;

bgpx

background-position-x:;

bgpy

background-position-y:;

bgbk

background-break:;

bgbk:bb

background-break:bounding-box;

bgbk:eb

background-break:each-box;

bgbk:c

background-break:continuous;

bgcp

background-clip:padding-box;

bgcp:bb

background-clip:border-box;

bgcp:pb

background-clip:padding-box;

bgcp:cb

background-clip:content-box;

bgcp:nc

background-clip:no-clip;

bgo

background-origin:;

bgo:pb

background-origin:padding-box;

bgo:bb

background-origin:border-box;

bgo:cb

background-origin:content-box;

bgsz

background-size:;

bgsz:a

background-size:auto;

bgsz:ct

background-size:contain;

bgsz:cv

background-size:cover;

Цвет

color:#000;

c:r

color:rgb(0, 0, 0);

c:ra

color:rgba(0, 0, 0, .5);

opacity:;

Контент (content)

cnt

content:'';

cnt:n, ct:n

content:normal;

cnt:oq, ct:oq

content:open-quote;

cnt:noq, ct:noq

content:no-open-quote;

cnt:cq, ct:cq

content:close-quote;

cnt:ncq, ct:ncq

content:no-close-quote;

cnt:a, ct:a

content:attr();

cnt:c, ct:c

content:counter();

cnt:cs, ct:cs

content:counters();

content:;

quotes:;

q:n

quotes:none;

q:ru

quotes:'\\00AB' '\\00BB' '\\201E' '\\201C';

q:en

quotes:'\\201C' '\\201D' '\\2018' '\\2019';

coi

counter-increment:;

cor

counter-reset:;

Окантовка (outline)

outline:;

ol:n

outline:none;

olo

outline-offset:;

olw

outline-width:;

olw:tn

outline-width:thin;

olw:m

outline-width:medium;

olw:tc

outline-width:thick;

ols

outline-style:;

ols:n

outline-style:none;

ols:dt

outline-style:dotted;

ols:ds

outline-style:dashed;

ols:s

outline-style:solid;

ols:db

outline-style:double;

ols:g

outline-style:groove;

ols:r

outline-style:ridge;

ols:i

outline-style:inset;

ols:o

outline-style:outset;

olc

outline-color:#000;

olc:i

outline-color:invert;

Таблицы

tbl

table-layout:;

tbl:a

table-layout:auto;

tbl:f

table-layout:fixed;

cps

caption-side:;

cps:t

caption-side:top;

cps:b

caption-side:bottom;

empty-cells:;

ec:s

empty-cells:show;

ec:h

empty-cells:hide;

Границы (border)

border:;

bd+

border:1px solid #000;

bd:n

border:none;

bdbk

border-break:close;

bdbk:c

border-break:close;

bdcl

border-collapse:;

bdcl:c

border-collapse:collapse;

bdcl:s

border-collapse:separate;

bdc

border-color:#000;

bdc:t

border-color:transparent;

bdi

border-image:url();

bdi:n

border-image:none;

bdti

border-top-image:url();

bdti:n

border-top-image:none;

bdri

border-right-image:url();

bdri:n

border-right-image:none;

bdbi

border-bottom-image:url();

bdbi:n

border-bottom-image:none;

bdli

border-left-image:url();

bdli:n

border-left-image:none;

bdci

border-corner-image:url();

bdci:n

border-corner-image:none;

bdci:c

border-corner-image:continue;

bdtli

border-top-left-image:url();

bdtli:n

border-top-left-image:none;

bdtli:c

border-top-left-image:continue;

bdtri

border-top-right-image:url();

bdtri:n

border-top-right-image:none;

bdtri:c

border-top-right-image:continue;

bdbri

border-bottom-right-image:url();

bdbri:n

border-bottom-right-image:none;

bdbri:c

border-bottom-right-image:continue;

bdbli

border-bottom-left-image:url();

bdbli:n

border-bottom-left-image:none;

bdbli:c

border-bottom-left-image:continue;

bdf

border-fit:repeat;

bdf:c

border-fit:clip;

bdf:r

border-fit:repeat;

bdf:sc

border-fit:scale;

bdf:st

border-fit:stretch;

bdf:ow

border-fit:overwrite;

bdf:of

border-fit:overflow;

bdf:sp

border-fit:space;

bdlen

border-length:;

bdlen:a

border-length:auto;

bdsp

border-spacing:;

bds

border-style:;

bds:n

border-style:none;

bds:h

border-style:hidden;

bds:dt

border-style:dotted;

bds:ds

border-style:dashed;

bds:s

border-style:solid;

bds:db

border-style:double;

bds:dtds

border-style:dot-dash;

bds:dtdtds

border-style:dot-dot-dash;

bds:w

border-style:wave;

bds:g

border-style:groove;

bds:r

border-style:ridge;

bds:i

border-style:inset;

bds:o

border-style:outset;

bdw

border-width:;

bdt, bt

border-top:;

bdt+

border-top:1px solid #000;

bdt:n

border-top:none;

bdtw

border-top-width:;

bdts

border-top-style:;

bdts:n

border-top-style:none;

bdtc

border-top-color:#000;

bdtc:t

border-top-color:transparent;

bdr, br

border-right:;

bdr+

border-right:1px solid #000;

bdr:n

border-right:none;

bdrw

border-right-width:;

bdrst

border-right-style:;

bdrst:n

border-right-style:none;

bdrc

border-right-color:#000;

bdrc:t

border-right-color:transparent;

bdb, bb

border-bottom:;

bdb+

border-bottom:1px solid #000;

bdb:n

border-bottom:none;

bdbw

border-bottom-width:;

bdbs

border-bottom-style:;

bdbs:n

border-bottom-style:none;

bdbc

border-bottom-color:#000;

bdbc:t

border-bottom-color:transparent;

bdl, bl

border-left:;

bdl+

border-left:1px solid #000;

bdl:n

border-left:none;

bdlw

border-left-width:;

bdls

border-left-style:;

bdls:n

border-left-style:none;

bdlc

border-left-color:#000;

bdlc:t

border-left-color:transparent;

bdrs

border-radius:;

bdtrrs

border-top-right-radius:;

bdtlrs

border-top-left-radius:;

bdbrrs

border-bottom-right-radius:;

bdblrs

border-bottom-left-radius:;

Списки

lis

list-style:;

lis:n

list-style:none;

lisp

list-style-position:;

lisp:i

list-style-position:inside;

lisp:o

list-style-position:outside;

list

list-style-type:;

list:n

list-style-type:none;

list:d

list-style-type:disc;

list:c

list-style-type:circle;

list:s

list-style-type:square;

list:dc

list-style-type:decimal;

list:dclz

list-style-type:decimal-leading-zero;

list:lr

list-style-type:lower-roman;

list:ur

list-style-type:upper-roman;

lisi

list-style-image:;

lisi:n

list-style-image:none;

Типографика

pgbb

page-break-before:;

pgbb:au

page-break-before:auto;

pgbb:al

page-break-before:always;

pgbb:l

page-break-before:left;

pgbb:r

page-break-before:right;

pgbi

page-break-inside:;

pgbi:au

page-break-inside:auto;

pgbi:av

page-break-inside:avoid;

pgba

page-break-after:;

pgba:au

page-break-after:auto;

pgba:al

page-break-after:always;

pgba:l

page-break-after:left;

pgba:r

page-break-after:right;

orp

orphans:;

wid

widows:;

Другое

!important

@font-face { font-family:;
``` src:url(|); }

@f+

```css
@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; }

@i, @import

```css
@import url();

@kf

@-webkit-keyframes identifier { from { } to { } } @-o-keyframes identifier { from { } to { } } @-moz-keyframes identifier { from { } to { } } @keyframes identifier { from { } to { } }

@m, @media

@media screen { }

align-content:;

ac:c

align-content:center;

ac:fe

align-content:flex-end;

ac:fs

align-content:flex-start;

ac:s

align-content:stretch;

ac:sa

align-content:space-around;

ac:sb

align-content:space-between;

align-items:;

ai:b

align-items:baseline;

ai:c

align-items:center;

ai:fe

align-items:flex-end;

ai:fs

align-items:flex-start;

ai:s

align-items:stretch;

anim

animation:;

anim-

animation:name duration timing-function delay iteration-count direction fill-mode;

animdel

animation-delay:time;

animdir

animation-direction:normal;

animdir:a

animation-direction:alternate;

animdir:ar

animation-direction:alternate-reverse;

animdir:n

animation-direction:normal;

animdir:r

animation-direction:reverse;

animdur

animation-duration:0s;

animfm

animation-fill-mode:both;

animfm:b

animation-fill-mode:backwards;

animfm:bt, animfm:bh

animation-fill-mode:both;

animfm:f

animation-fill-mode:forwards;

animic

animation-iteration-count:1;

animic:i

animation-iteration-count:infinite;

animn

animation-name:none;

animps

animation-play-state:running;

animps:p

animation-play-state:paused;

animps:r

animation-play-state:running;

animtf

animation-timing-function:linear;

animtf:cb

animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);

animtf:e

animation-timing-function:ease;

animtf:ei

animation-timing-function:ease-in;

animtf:eio

animation-timing-function:ease-in-out;

animtf:eo

animation-timing-function:ease-out;

animtf:l

animation-timing-function:linear;

appearance:${none};

align-self:;

as:a

align-self:auto;

as:b

align-self:baseline;

as:c

align-self:center;

as:fe

align-self:flex-end;

as:fs

align-self:flex-start;

as:s

align-self:stretch;

bfv

backface-visibility:;

bfv:h

backface-visibility:hidden;

bfv:v

backface-visibility:visible;

bg:ie

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');

/* ${child} */

colm

columns:;

colmc

column-count:;

colmf

column-fill:;

colmg

column-gap:;

colmr

column-rule:;

colmrc

column-rule-color:;

colmrs

column-rule-style:;

colmrw

column-rule-width:;

colms

column-span:;

colmw

column-width:;

d:ib+

display: inline-block;
``` \*display: inline; \*zoom: 1;

fx

```css
flex:;

fxb

flex-basis:;

fxd

flex-direction:;

fxd:c

flex-direction:column;

fxd:cr

flex-direction:column-reverse;

fxd:r

flex-direction:row;

fxd:rr

flex-direction:row-reverse;

fxf

flex-flow:;

fxg

flex-grow:;

fxsh

flex-shrink:;

fxw

flex-wrap: ;

fxw:n

flex-wrap:nowrap;

fxw:w

flex-wrap:wrap;

fxw:wr

flex-wrap:wrap-reverse;

justify-content:;

jc:c

justify-content:center;

jc:fe

justify-content:flex-end;

jc:fs

justify-content:flex-start;

jc:sa

justify-content:space-around;

jc:sb

justify-content:space-between;

mar

max-resolution:res;

mir

min-resolution:res;

op+

opacity: ;
``` filter: alpha(opacity=);

op:ie

```css
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

op:ms

\-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';

ord

order:;

ori

orientation:;

ori:l

orientation:landscape;

ori:p

orientation:portrait;

tov

text-overflow:${ellipsis};

tov:c

text-overflow:clip;

tov:e

text-overflow:ellipsis;

trf

transform:;

trf:r

transform: rotate(angle);

trf:rx

transform: rotateX(angle);

trf:ry

transform: rotateY(angle);

trf:rz

transform: rotateZ(angle);

trf:sc

transform: scale(x, y);

trf:sc3

transform: scale3d(x, y, z);

trf:scx

transform: scaleX(x);

trf:scy

transform: scaleY(y);

trf:scz

transform: scaleZ(z);

trf:skx

transform: skewX(angle);

trf:sky

transform: skewY(angle);

trf:t

transform: translate(x, y);

trf:t3

transform: translate3d(tx, ty, tz);

trf:tx

transform: translateX(x);

trf:ty

transform: translateY(y);

trf:tz

transform: translateZ(z);

trfo

transform-origin:;

trfs

transform-style:preserve-3d;

trs

transition:prop time;

trsde

transition-delay:time;

trsdu

transition-duration:time;

trsp

transition-property:prop;

trstf

transition-timing-function:tfunc;

user-select:${none};

wfsm

\-webkit-font-smoothing:${antialiased};

wfsm:a

\-webkit-font-smoothing:antialiased;

wfsm:n

\-webkit-font-smoothing:none;

wfsm:s, wfsm:sa

\-webkit-font-smoothing:subpixel-antialiased;

writing-mode:lr-tb;

wm:btl

writing-mode:bt-lr;

wm:btr

writing-mode:bt-rl;

wm:lrb

writing-mode:lr-bt;

wm:lrt

writing-mode:lr-tb;

wm:rlb

writing-mode:rl-bt;

wm:rlt

writing-mode:rl-tb;

wm:tbl

writing-mode:tb-lr;

wm:tbr

writing-mode:tb-rl;

XSL

tmatch, tm

<xsl:template match="" mode=""></xsl:template>

tname, tn

<xsl:template name=""></xsl:template>

call

<xsl:call-template name="" />

<xsl:apply-templates select="" mode="" />

api

<xsl:apply-imports />

imp

<xsl:import href="" />

inc

<xsl:include href="" />

<xsl:choose></xsl:choose>

xsl:when, wh

<xsl:when test=""></xsl:when>

<xsl:otherwise></xsl:otherwise>

<xsl:if test=""></xsl:if>

par

<xsl:param name=""></xsl:param>

pare

<xsl:param name="" select="" />

var

<xsl:variable name=""></xsl:variable>

vare

<xsl:variable name="" select="" />

<xsl:with-param name="" select="" />

key

<xsl:key name="" match="" use="" />

elem

<xsl:element name=""></xsl:element>

attr

<xsl:attribute name=""></xsl:attribute>

attrs

<xsl:attribute-set name=""></xsl:attribute-set>

<xsl:copy select="" />

<xsl:copy-of select="" />

val

<xsl:value-of select="" />

each, for

<xsl:for-each select=""></xsl:for-each>

tex

<xsl:text></xsl:text>

com

<xsl:comment></xsl:comment>

msg

<xsl:message terminate="no"></xsl:message>

fall

<xsl:fallback></xsl:fallback>

num

<xsl:number value="" />

nam

<namespace-alias stylesheet-prefix="" result-prefix="" />

pres

<xsl:preserve-space elements="" />

strip

<xsl:strip-space elements="" />

proc

<xsl:processing-instruction name=""></xsl:processing-instruction>

sort

<xsl:sort select="" order="" />

choose+

Псевдоним xsl:choose>xsl:when+xsl:otherwise

<xsl:choose>
<xsl:when test=""></xsl:when>
<xsl:otherwise></xsl:otherwise>
</xsl:choose>

xsl

Псевдоним !!!+xsl:stylesheet\[version=1.0 xmlns:xsl=http://www.w3.org/1999/XSL/Transform\]>{ |}

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>

!!!

<?xml version="1.0" encoding="UTF-8"?>

Cheatsheet стырен с docs.emmet.io, переведено мной

Поблагодарить через СберБанк:

4274320107381801

Остались вопросы или есть пожелания, замечания — пишите в комментарии: