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 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>
|
|
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;