Справочник сокращений для плагина Emmet

Недавно, я размещал запись в которой говорил о полезных плагинах для Sublime Text 3. Я говорил там о плагине Emmet и описывал его работу.
Если кто то не видел, эту запись – вы можете перейти на неё по этой ссылке  http://prog-time.ru/poleznye-plaginy-dlya-sublime-text-3/

Если кратко говорить о плагине Emmet, то он помогает быстро набирать код с помощью специальных сокращений. Это значительно облегчает и ускоряет работу. На данный момент, я активно пользуюсь данным плагином. Для быстрого написания, нужно ввести в редактор сокращение и после этого нажать на клавишу “Tab”.
Важно, для корректного преобразования кода необходимо что бы курсор находился в конце сокращения. Вы это поймёте кода попробуете активировать сокращение.

Я представил для вас полный список сокращений для HTML и CSS.

Сокращения для Emmet.

Сокращение

Расшифровка сокращения

Базовый синтаксис Emmet

Дочерний: >

 

  1. nav>ul>li
  2. <nav>
  3. <ul>
  4. <li></li>
  5. </ul>
  6. </nav>
Соединение: +

 

  1. div+p+bq
  2. <div></div>
  3. <p></p>
  4. <blockquote></blockquote>
Поместить выше (в дереве HTML): ^

 

  1. div>p>span+em^bq
  2. <div>
  3. <p><span></span><em></em></p>
  4. <blockquote></blockquote>
  5. </div>
Группировать: ()

 

  1. div>(header>ul>li)+footer>p
  2. <div>
  3. <header>
  4. <ul>
  5. <li></li>
  6. </ul>
  7. </header>
  8. <footer>
  9. <p></p>
  10. </footer>
  11. </div>
Умножение: *

 

  1. ul>li*3
  2. <ul>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. </ul>
Нумерация: $

 

  1. ul>li.item_$*3
  2. <ul>
  3. <li class=”item_1″></li>
  4. <li class=”item_2″></li>
  5. <li class=”item_3″></li>
  6. </ul>
id и class

 

  1. #header+.class
  2. <div id=”header”></div>
  3. <div class=”class”></div>
  4. #hdr.cl_1.cl_2
  5. <div id=”hdr” class=”cl_1 cl_2″></div>
Атрибуты: []

 

  1. a[title=”Подсказка ссылки”]
  2. <a href=”” title=”Подсказка ссылки”></a>
  3. td[rowspan colspan title]
  4. <td rowspan=”” colspan=”” title=””></td>
Текст: {}

 

  1. .class{свободный текст}
  2. <div class=”class”>свободный текст</div>
  3. p>{Кликните }+a{сюда}+{ скорее}
  4. <p>Кликните <a href=””>сюда</a> скорее</p>
Сокращение тегов

 

  1. .class
  2. <div class=”class”></div>
  3. em>.class
  4. <em><span class=”class”></span></em>
  5. ul>.class
  6. <ul>
  7. <li class=”class”></li>
  8. </ul>
  9. table>.row>.col
  10. <table>
  11. <tr class=”row”>
  12. <td class=”col”></td>
  13. </tr>
  14. </table>

HTML сокращения для Emmet

!

 

  1. <!doctype html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”UTF-8″>
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>
a

 

  1. <a href=””></a>
a:link

 

  1. <a href=”http://”></a>
a:mail

 

  1. <a href=”mailto:”></a>
base

 

  1. <base href=””>
br

 

  1. <br>
link

 

  1. <link rel=”stylesheet” href=””>
link:css

 

  1. <link rel=”stylesheet” href=”style.css”>
link:favicon

 

  1. <link rel=”shortcut icon” type=”image/x-icon”
  2. href=”favicon.ico”>
link:rss

 

  1. <link rel=”alternate” type=”application/rss+xml”
  2. title=”RSS” href=”rss.xml”>
link:atom

 

  1. <link rel=”alternate” type=”application/atom+xml”
  2. title=”Atom” href=”atom.xml”>
meta:utf

 

  1. <meta http-equiv=”Content-Type”
  2. content=”text/html;charset=UTF-8″>
meta:vp

 

  1. <meta name=”viewport” content=”width=device-width,
  2. user-scalable=no, initial-scale=1.0,
  3. maximum-scale=1.0, minimum-scale=1.0″>
meta:compat

 

  1. <meta http-equiv=”X-UA-Compatible” content=”IE=7″>
script:src

 

  1. <script src=””></script>
img

 

  1. <img src=”” alt=””>
ifr

 

  1. <iframe src=”” frameborder=”0″></iframe>
emb

 

  1. <embed src=”” type=””>
obj

 

  1. <object data=”” type=””></object>
map

 

  1. <map name=””></map>
map+

 

  1. <map name=””>
  2. <area shape=”” coords=”” href=”” alt=””>
  3. </map>
area

 

  1. <area shape=”” coords=”” href=”” alt=””>
form

 

  1. <form action=””></form>
form:get
form:post

 

  1. <form action=”” method=”get”></form>
  2. <form action=”” method=”post”></form>
label

 

  1. <label for=””></label>
input

 

  1. <input type=”text”>
inp

 

  1. <input type=”text” name=”” id=””>
input:h

 

  1. <input type=”hidden” name=””>
input:p

 

  1. <input type=”password” name=”” id=””>
input:c

 

  1. <input type=”checkbox” name=”” id=””>
input:r

 

  1. <input type=”radio” name=”” id=””>
input:f

 

  1. <input type=”file” name=”” id=””>
input:s

 

  1. <input type=”submit” value=””>
input:i

 

  1. <input type=”image” src=”” alt=””>
input:b

 

  1. <input type=”button” value=””>
input:reset

 

  1. <input type=”reset” value=””>
select

 

  1. <select name=”” id=””></select>
select+

 

  1. <select name=”” id=””>
  2. <option value=””></option>
  3. </select>
opt

 

  1. <option value=””></option>
tarea

 

  1. <textarea name=”” id=”” cols=”30″ rows=”10″>
  2. </textarea>
video

 

  1. <video src=””></video>
audio

 

  1. <audio src=””></audio>
bq

 

  1. <blockquote></blockquote>
fst

 

  1. <fieldset></fieldset>
btn

 

  1. <button></button>
btn:s

 

  1. <button type=”submit”></button>
btn:b

 

  1. <button type=”button”></button>
btn:r

 

  1. <button type=”reset”></button>
sect

 

  1. <section></section>
art

 

  1. <article></article>
hdr

 

  1. <header></header>
ftr

 

  1. <footer></footer>
str

 

  1. <strong></strong>
ol+

 

  1. <ol>
  2. <li></li>
  3. </ol>
ul+

 

  1. <ul>
  2. <li></li>
  3. </ul>
dl+

 

  1. <dl>
  2. <dt></dt>
  3. <dd></dd>
  4. </dl>
table+

 

  1. <table>
  2. <tr>
  3. <td></td>
  4. </tr>
  5. </table>
tr+

 

  1. <tr>
  2. <td></td>
  3. </tr>
c

 

  1. <!– Комментарий –>
cc:ie6

 

  1. <!–[if lte IE 6]>
  2. <![endif]–>
cc:ie

 

  1. <!–[if IE]>
  2. <![endif]–>
cc:noie

 

  1. <!–[if !IE]><!–>
  2. <!–<![endif]–>
Любой тег

 

  1. div
  2. <div></div>
  3. span
  4. <span></span>
  5. Любой другой тег
  6. <tagname></tagname>

CSS сокращения для Emmet

pos

 

  1. position: relative;
posa

 

  1. position: absolute;
posr

 

  1. position: relative;
posf

 

  1. position: fixed;
t

 

  1. top: ;
t:a

 

  1. top: auto;
r

 

  1. right: ;
r:a

 

  1. right: auto;
b

 

  1. bottom: ;
b:a

 

  1. bottom: auto;
l

 

  1. left: ;
l:a

 

  1. left: auto;
z

 

  1. z-index: ;
za

 

  1. z-index: auto;
fl

 

  1. float: left;
fln

 

  1. float: none;
fr

 

  1. float: right;
cl

 

  1. clear: both;
d

 

  1. display: block;
dn

 

  1. display: none;
di

 

  1. display: inline;
dib

 

  1. display: inline-block;
dt

 

  1. display: table;
dtc

 

  1. display: table-cell;
dtr

 

  1. display: table-row;
v

 

  1. visibility: hidden;
vv

 

  1. visibility: visible;
oh

 

  1. overflow: hidden;
ovv

 

  1. overflow: visible;
os

 

  1. overflow: scroll;
oa

 

  1. overflow: auto;
zm

 

  1. zoom: 1;
cu

 

  1. cursor: ;
cup

 

  1. cursor: pointer;
cud

 

  1. cursor: default;
cuh

 

  1. cursor: hand;
cuhe

 

  1. cursor: help;
cum

 

  1. cursor: move;
cut

 

  1. cursor: text;
m

 

  1. margin: ;
m:a

 

  1. margin: auto;
mt

 

  1. margin-top: ;
mta

 

  1. margin-top: auto;
mr

 

  1. margin-right: ;
mra

 

  1. margin-right: auto;
mb

 

  1. margin-bottom: ;
mba

 

  1. margin-bottom: auto;
ml

 

  1. margin-left: ;
mla

 

  1. margin-left: auto;
p

 

  1. padding: ;
pt

 

  1. padding-top: ;
pr

 

  1. padding-right: ;
pb

 

  1. padding-bottom: ;
pl

 

  1. padding-left: ;
bsh

 

  1. -webkit-box-shadow: inset hoff voff blur color;
  2. -moz-box-shadow: inset hoff voff blur color;
  3. box-shadow: inset hoff voff blur color;
bshn

 

  1. -webkit-box-shadow: none;
  2. -moz-box-shadow: none;
  3. box-shadow: none;
w

 

  1. width: ;
wa

 

  1. width: auto;
h

 

  1. height: ;
ha

 

  1. height: auto;
maw

 

  1. max-width: ;
mah

 

  1. max-height: ;
mw

 

  1. min-width: ;
mh

 

  1. min-height: ;
f

 

  1. font: ;
f+

 

  1. font: 1em Arial,sans-serif;
fw

 

  1. font-weight: ;
fwn

 

  1. font-weight: normal;
fwb

 

  1. font-weight: bold;
fs

 

  1. font-style: italic;
fsn

 

  1. font-style: normal;
fsi

 

  1. font-style: italic;
fz

 

  1. font-size: ;
ff

 

  1. font-family: ;
ffs

 

  1. font-family: serif;
ffss

 

  1. font-family: sans-serif;
ffm

 

  1. font-family: monospace;
ffa

 

  1. font-family: Arial, “Helvetica Neue”, Helvetica,
  2. sans-serif;
va

 

  1. vertical-align: top;
vm

 

  1. vertical-align: middle;
vabl

 

  1. vertical-align: baseline;
vb

 

  1. vertical-align: bottom;
vs

 

  1. vertical-align: sub;
ta

 

  1. text-align: left;
tac

 

  1. text-align: center;
tar

 

  1. text-align: right;
taj

 

  1. text-align: justify;
td

 

  1. text-decoration: none;
tdu

 

  1. text-decoration: underline;
tdo

 

  1. text-decoration: overline;
tdl

 

  1. text-decoration: line-through;
tt

 

  1. text-transform: uppercase;
ttn

 

  1. text-transform: none;
ttl

 

  1. text-transform: lowercase;
ts

 

  1. text-shadow: hoff voff blur #000;
tra

 

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

 

  1. text-shadow: 0 0 0 #000;
tsn

 

  1. text-shadow: none;
lh

 

  1. line-height: ;
lts

 

  1. letter-spacing: ;
ws

 

  1. white-space: ;
wsn

 

  1. white-space: normal;
wsnw

 

  1. white-space: nowrap;
bg

 

  1. background: #000;
bg+

 

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

 

  1. background: none;
bgc

 

  1. background-color: #fff;
bgt

 

  1. background-color: transparent;
bgi

 

  1. background-image: url();
bgin

 

  1. background-image: none;
bgr

 

  1. background-repeat: ;
bgrn

 

  1. background-repeat: no-repeat;
bgrx

 

  1. background-repeat: repeat-x;
bgry

 

  1. background-repeat: repeat-y;
bga

 

  1. background-attachment: ;
baf

 

  1. background-attachment: fixed;
bas

 

  1. background-attachment: scroll;
bgp

 

  1. background-position: 0 0;
bgs

 

  1. -webkit-background-size: ;
  2. background-size: ;
bsa

 

  1. -webkit-background-size: auto;
  2. background-size: auto;
c

 

  1. color: #000;
cra

 

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

 

  1. opacity: ;
ct

 

  1. content: ;
q

 

  1. quotes: ;
ol

 

  1. outline: ;
on

 

  1. outline: none;
tbl

 

  1. table-layout: ;
cs

 

  1. caption-side: ;
ec

 

  1. empty-cells: ;
bd

 

  1. border: ;
bd+

 

  1. border: 1px solid #000;
bdn

 

  1. border: none;
bdc

 

  1. border-color: #000;
bdi

 

  1. -webkit-border-image: url();
  2. -moz-border-image: url();
  3. -o-border-image: url();
  4. border-image: url();
bdin

 

  1. -webkit-border-image: none;
  2. -moz-border-image: none;
  3. -o-border-image: none;
  4. border-image: none;
bf

 

  1. -webkit-border-fit: repeat;
  2. border-fit: repeat;
bdle

 

  1. border-length: ;
bsp

 

  1. border-spacing: ;
bds

 

  1. border-style: ;
bw

 

  1. border-width: ;
bt

 

  1. border-top: ;
bt+

 

  1. border-top: 1px solid #000;
bdtn

 

  1. border-top: none;
br

 

  1. border-right: ;
br+

 

  1. border-right: 1px solid #000;
bdrn

 

  1. border-right: none;
bb

 

  1. border-bottom: ;
bb+

 

  1. border-bottom: 1px solid #000;
bdbn

 

  1. border-bottom: none;
bl

 

  1. border-left: ;
bl+

 

  1. border-left: 1px solid #000;
bdln

 

  1. border-left: none;
bdrs

 

  1. -webkit-border-radius: ;
  2. -moz-border-radius: ;
  3. border-radius: ;
btrr

 

  1. border-top-right-radius: ;
bdtrs

 

  1. border-top-left-radius: ;
bbrr

 

  1. border-bottom-right-radius: ;
bblr

 

  1. border-bottom-left-radius: ;
lis

 

  1. list-style: ;
lisn

 

  1. list-style: none;
lst

 

  1. list-style-type: ;
lstn

 

  1. list-style-type: none;
lstd

 

  1. list-style-type: disc;
lstc

 

  1. list-style-type: circle;
lsts

 

  1. list-style-type: square;
lstdc

 

  1. list-style-type: decimal;
lsi

 

  1. list-style-image: ;
lsin

 

  1. list-style-image: none;
!

 

  1. !important
@f

 

  1. @font-face {
  2. font-family:;
  3. src:url();
  4. }
@f+

 

  1. @font-face {
  2. font-family: ‘FontName’;
  3. src: url(‘FileName.eot’);
  4. src: url(‘FileName.eot?#iefix’)
  5. format(’embedded-opentype’),
  6. url(‘FileName.woff’) format(‘woff’),
  7. url(‘FileName.ttf’) format(‘truetype’),
  8. url(‘FileName.svg#FontName’) format(‘svg’);
  9. font-style: normal;
  10. font-weight: normal;
  11. }
@i

 

  1. @import url();
@m

 

  1. @media screen {
  2. }
anim

 

  1. -webkit-animation: ;
  2. -o-animation: ;
  3. animation: ;
ap

 

  1. -webkit-appearance: none;
  2. -moz-appearance: none;
  3. appearance: none;
bgie

 

  1. filter:progid:DXImageTransform
  2. .Microsoft.AlphaImageLoader
  3. (src=‘x.png’,sizingMethod=‘crop’);
cm

 

  1. /* Комментарий */
colm

 

  1. columns: ;
trf

 

  1. -webkit-transform: ;
  2. -moz-transform: ;
  3. -ms-transform: ;
  4. -o-transform: ;
  5. transform: ;
trfr

 

  1. -webkit-transform: rotate(angle);
  2. -moz-transform: rotate(angle);
  3. -ms-transform: rotate(angle);
  4. -o-transform: rotate(angle);
  5. transform: rotate(angle);
trfsc

 

  1. -webkit-transform: scale(x, y);
  2. -moz-transform: scale(x, y);
  3. -ms-transform: scale(x, y);
  4. -o-transform: scale(x, y);
  5. transform: scale(x, y);
trft

 

  1. -webkit-transform: translate(x, y);
  2. -moz-transform: translate(x, y);
  3. -ms-transform: translate(x, y);
  4. -o-transform: translate(x, y);
  5. transform: translate(x, y);
tfo

 

  1. -webkit-transform-origin: ;
  2. -moz-transform-origin: ;
  3. -ms-transform-origin: ;
  4. -o-transform-origin: ;
  5. transform-origin: ;
trs

 

  1. -webkit-transition: prop time;
  2. -moz-transition: prop time;
  3. -ms-transition: prop time;
  4. -o-transition: prop time;
  5. transition: prop time;
trsde

 

  1. -webkit-transition-delay: time;
  2. -moz-transition-delay: time;
  3. -ms-transition-delay: time;
  4. -o-transition-delay: time;
  5. transition-delay: time;
trsdu

 

  1. -webkit-transition-duration: time;
  2. -moz-transition-duration: time;
  3. -ms-transition-duration: time;
  4. -o-transition-duration: time;
  5. transition-duration: time;
trsp

 

  1. -webkit-transition-property: prop;
  2. -moz-transition-property: prop;
  3. -ms-transition-property: prop;
  4. -o-transition-property: prop;
  5. transition-property: prop;
us

 

  1. -webkit-user-select: none;
  2. -moz-user-select: none;
  3. -ms-user-select: none;
  4. user-select: none;

Советую вам распечатать данный материал, что бы он всегда был под рукой.
Если что то не понятно, напишите об это в комментариях.

Так же посмотрите и другие плагины, облегчающие работу http://prog-time.ru/poleznye-plaginy-dlya-sublime-text-3/12/web/

Рекомендованные

 

Вам также будет интересно

 

comments powered by HyperComments