Команды Emmet - шпаргалка для плагина html редактора Sublime Text

Sublime Text — популярный среди программистов редактор, с использованием Emmet плагина становится еще удобнее.

Эта статья — шпаргалка по Emmet командам, которые можно использовать для ускорения создания HTML документов, верстки и работы с CSS.

Содержание

Как пользоваться Emmet

Emmet позволяет ускорить набор текста благодаря использованию большого числа сокращений. Сокращения Emmet охватывают практически все свойства CSS и HTML теги, которые приходится набирать веб-разработчику.

После установки Emmet нужно в Sublime Text можно просто набрать сокращение, нажать Tab и Emmet расшифрует его в документе в полный текст.

Например, если вы сохраните новый документ в Sublime Text с расширением html, наберете в редакторе «!» и нажмете Tab, то Emmet вставит следующий набор тегов:

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

Emmet не работает

Если у вас не работает Emmet, возможно вы просто не сохранили файл в необходимом формате. Emmet расшифровывает сокращения, если вы работаете в файле с соответствующим расширением — html или css.

Также сокращения для стилей элементов будут корректно работать в HTML документе внутри style=»…»

Сокращения Emmet

Сокращение	Расшифровка сокращения
Базовый синтаксис EMMET
Дочерний: >	`nav>ul>li <nav> <ul> <li></li> </ul> </nav>`
Соединение: +	`div+p+bq <div></div> <p></p> <blockquote></blockquote>`
Поместить выше (в дереве HTML): ^	`div>p>span+em^bq <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>`
Группировать: ()	`div>(header>ul>li)+footer>p <div> <header> <ul> <li></li> </ul> </header> <footer> <p></p> </footer> </div>`
Умножение: *	`ul>li*3 <ul> <li></li> <li></li> <li></li> </ul>`
Нумерация: $	`ul>li.item_$*3 <ul> <li class="item_1"></li> <li class="item_2"></li> <li class="item_3"></li> </ul>`
id и class	`#header+.class <div id="header"></div> <div class="class"></div> #hdr.cl_1.cl_2 <div id="hdr" class="cl_1 cl_2"></div>`
Атрибуты: []	`a[title="Подсказка ссылки"] <a href="" title="Подсказка ссылки"></a> td[rowspan colspan title] <td rowspan="" colspan="" title=""></td>`
Текст: {}	`.class{свободный текст} <div class="class">свободный текст</div> p>{Кликните }+a{сюда}+{ скорее} <p>Кликните <a href="">сюда</a> скорее</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 сокращения
!	`<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>`
a	`<a href=""></a>`
a:link	`<a href="http://"></a>`
a:mail	`<a href="mailto:"></a>`
base	`<base href="">`
br	`<br>`
link	`<link rel="stylesheet" href="">`
link:css	`<link rel="stylesheet" href="style.css">`
link:favicon	`<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">`
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">`
meta:utf	`<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">`
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">`
script:src	`<script src=""></script>`
img	`<img src="" alt="">`
ifr	`<iframe src="" frameborder="0"></iframe>`
emb	`<embed src="" type="">`
obj	`<object data="" type=""></object>`
map	`<map name=""></map>`
map+	`<map name=""> <area shape="" coords="" href="" alt=""> </map>`
area	`<area shape="" coords="" href="" alt="">`
form	`<form action=""></form>`
form:get form:post	`<form action="" method="get"></form> <form action="" method="post"></form>`
label	`<label for=""></label>`
input	`<input type="text">`
inp	`<input type="text" name="" id="">`
input:h	`<input type="hidden" name="">`
input:p	`<input type="password" name="" id="">`
input:c	`<input type="checkbox" name="" id="">`
input:r	`<input type="radio" name="" id="">`
input:f	`<input type="file" name="" id="">`
input:s	`<input type="submit" value="">`
input:i	`<input type="image" src="" alt="">`
input:b	`<input type="button" value="">`
input:reset	`<input type="reset" value="">`
select	`<select name="" id=""></select>`
select+	`<select name="" id=""> <option value=""></option> </select>`
opt	`<option value=""></option>`
tarea	`<textarea name="" id="" cols="30" rows="10"> </textarea>`
video	`<video src=""></video>`
audio	`<audio src=""></audio>`
bq	`<blockquote></blockquote>`
fst	`<fieldset></fieldset>`
btn	`<button></button>`
btn:s	`<button type="submit"></button>`
btn:b	`<button type="button"></button>`
btn:r	`<button type="reset"></button>`
sect	`<section></section>`
art	`<article></article>`
hdr	`<header></header>`
ftr	`<footer></footer>`
str	`<strong></strong>`
ol+	`<ol> <li></li> </ol>`
ul+	`<ul> <li></li> </ul>`
dl+	`<dl> <dt></dt> <dd></dd> </dl>`
table+	`<table> <tr> <td></td> </tr> </table>`
tr+	`<tr> <td></td> </tr>`
c	`<!-- Комментарий -->`
cc:ie6	`<!--[if lte IE 6]> <![endif]-->`
cc:ie	`<!--[if IE]> <![endif]-->`
cc:noie	`<!--[if !IE]><!--> <!--<![endif]-->`
Любой тег	`div <div></div> span <span></span> Любой другой тег <tagname></tagname>`
CSS сокращения
pos	`position: relative;`
posa	`position: absolute;`
posr	`position: relative;`
posf	`position: fixed;`
t	`top: ;`
t:a	`top: auto;`
r	`right: ;`
r:a	`right: auto;`
b	`bottom: ;`
b:a	`bottom: auto;`
l	`left: ;`
l:a	`left: auto;`
z	`z-index: ;`
za	`z-index: auto;`
fl	`float: left;`
fln	`float: none;`
fr	`float: right;`
cl	`clear: both;`
d	`display: block;`
dn	`display: none;`
di	`display: inline;`
dib	`display: inline-block;`
dt	`display: table;`
dtc	`display: table-cell;`
dtr	`display: table-row;`
v	`visibility: hidden;`
vv	`visibility: visible;`
oh	`overflow: hidden;`
ovv	`overflow: visible;`
os	`overflow: scroll;`
oa	`overflow: auto;`
zm	`zoom: 1;`
cu	`cursor: ;`
cup	`cursor: pointer;`
cud	`cursor: default;`
cuh	`cursor: hand;`
cuhe	`cursor: help;`
cum	`cursor: move;`
cut	`cursor: text;`
m	`margin: ;`
m:a	`margin: auto;`
mt	`margin-top: ;`
mta	`margin-top: auto;`
mr	`margin-right: ;`
mra	`margin-right: auto;`
mb	`margin-bottom: ;`
mba	`margin-bottom: auto;`
ml	`margin-left: ;`
mla	`margin-left: auto;`
p	`padding: ;`
pt	`padding-top: ;`
pr	`padding-right: ;`
pb	`padding-bottom: ;`
pl	`padding-left: ;`
bsh	`-webkit-box-shadow: inset hoff voff blur color; -moz-box-shadow: inset hoff voff blur color; box-shadow: inset hoff voff blur color;`
bshn	`-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;`
w	`width: ;`
wa	`width: auto;`
h	`height: ;`
ha	`height: auto;`
maw	`max-width: ;`
mah	`max-height: ;`
mw	`min-width: ;`
mh	`min-height: ;`
f	`font: ;`
f+	`font: 1em Arial,sans-serif;`
fw	`font-weight: ;`
fwn	`font-weight: normal;`
fwb	`font-weight: bold;`
fs	`font-style: italic;`
fsn	`font-style: normal;`
fsi	`font-style: italic;`
fz	`font-size: ;`
ff	`font-family: ;`
ffs	`font-family: serif;`
ffss	`font-family: sans-serif;`
ffm	`font-family: monospace;`
ffa	`font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;`
va	`vertical-align: top;`
vm	`vertical-align: middle;`
vabl	`vertical-align: baseline;`
vb	`vertical-align: bottom;`
vs	`vertical-align: sub;`
ta	`text-align: left;`
tac	`text-align: center;`
tar	`text-align: right;`
taj	`text-align: justify;`
td	`text-decoration: none;`
tdu	`text-decoration: underline;`
tdo	`text-decoration: overline;`
tdl	`text-decoration: line-through;`
tt	`text-transform: uppercase;`
ttn	`text-transform: none;`
ttl	`text-transform: lowercase;`
ts	`text-shadow: hoff voff blur #000;`
tra	`text-shadow: h v blur rgba(0, 0, 0, .5);`
ts+	`text-shadow: 0 0 0 #000;`
tsn	`text-shadow: none;`
lh	`line-height: ;`
lts	`letter-spacing: ;`
ws	`white-space: ;`
wsn	`white-space: normal;`
wsnw	`white-space: nowrap;`
bg	`background: #000;`
bg+	`background: #fff url() 0 0 no-repeat;`
bn	`background: none;`
bgc	`background-color: #fff;`
bgt	`background-color: transparent;`
bgi	`background-image: url();`
bgin	`background-image: none;`
bgr	`background-repeat: ;`
bgrn	`background-repeat: no-repeat;`
bgrx	`background-repeat: repeat-x;`
bgry	`background-repeat: repeat-y;`
bga	`background-attachment: ;`
baf	`background-attachment: fixed;`
bas	`background-attachment: scroll;`
bgp	`background-position: 0 0;`
bgs	`-webkit-background-size: ; background-size: ;`
bsa	`-webkit-background-size: auto; background-size: auto;`
c	`color: #000;`
cra	`color: rgba(0, 0, 0, .5);`
op	`opacity: ;`
ct	`content: '';`
q	`quotes: ;`
ol	`outline: ;`
on	`outline: none;`
tbl	`table-layout: ;`
cs	`caption-side: ;`
ec	`empty-cells: ;`
bd	`border: ;`
bd+	`border: 1px solid #000;`
bdn	`border: none;`
bdc	`border-color: #000;`
bdi	`-webkit-border-image: url(); -moz-border-image: url(); -o-border-image: url(); border-image: url();`
bdin	`-webkit-border-image: none; -moz-border-image: none; -o-border-image: none; border-image: none;`
bf	`-webkit-border-fit: repeat; border-fit: repeat;`
bdle	`border-length: ;`
bsp	`border-spacing: ;`
bds	`border-style: ;`
bw	`border-width: ;`
bt	`border-top: ;`
bt+	`border-top: 1px solid #000;`
bdtn	`border-top: none;`
br	`border-right: ;`
br+	`border-right: 1px solid #000;`
bdrn	`border-right: none;`
bb	`border-bottom: ;`
bb+	`border-bottom: 1px solid #000;`
bdbn	`border-bottom: none;`
bl	`border-left: ;`
bl+	`border-left: 1px solid #000;`
bdln	`border-left: none;`
bdrs	`-webkit-border-radius: ; -moz-border-radius: ; border-radius: ;`
btrr	`border-top-right-radius: ;`
bdtrs	`border-top-left-radius: ;`
bbrr	`border-bottom-right-radius: ;`
bblr	`border-bottom-left-radius: ;`
lis	`list-style: ;`
lisn	`list-style: none;`
lst	`list-style-type: ;`
lstn	`list-style-type: none;`
lstd	`list-style-type: disc;`
lstc	`list-style-type: circle;`
lsts	`list-style-type: square;`
lstdc	`list-style-type: decimal;`
lsi	`list-style-image: ;`
lsin	`list-style-image: none;`
!	`!important`
@f	`@font-face { font-family:; src:url(); }`
@f+	`@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 url();`
@m	`@media screen { }`
anim	`-webkit-animation: ; -o-animation: ; animation: ;`
ap	`-webkit-appearance: none; -moz-appearance: none; appearance: none;`
bgie	`filter:progid:DXImageTransform .Microsoft.AlphaImageLoader (src='x.png',sizingMethod='crop');`
cm	`/* Комментарий */`
colm	`columns: ;`
trf	`-webkit-transform: ; -moz-transform: ; -ms-transform: ; -o-transform: ; transform: ;`
trfr	`-webkit-transform: rotate(angle); -moz-transform: rotate(angle); -ms-transform: rotate(angle); -o-transform: rotate(angle); transform: rotate(angle);`
trfsc	`-webkit-transform: scale(x, y); -moz-transform: scale(x, y); -ms-transform: scale(x, y); -o-transform: scale(x, y); transform: scale(x, y);`
trft	`-webkit-transform: translate(x, y); -moz-transform: translate(x, y); -ms-transform: translate(x, y); -o-transform: translate(x, y); transform: translate(x, y);`
tfo	`-webkit-transform-origin: ; -moz-transform-origin: ; -ms-transform-origin: ; -o-transform-origin: ; transform-origin: ;`
trs	`-webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;`
trsde	`-webkit-transition-delay: time; -moz-transition-delay: time; -ms-transition-delay: time; -o-transition-delay: time; transition-delay: time;`
trsdu	`-webkit-transition-duration: time; -moz-transition-duration: time; -ms-transition-duration: time; -o-transition-duration: time; transition-duration: time;`
trsp	`-webkit-transition-property: prop; -moz-transition-property: prop; -ms-transition-property: prop; -o-transition-property: prop; transition-property: prop;`
us	`-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;`

В некоторые CSS сокращения можно подставлять свои значения, например:

/* mt20 */
margin-top: 20px;

/* fsz20 */
font-size: 20px;

/* p15 */
padding: 15px;