Справочник EMMET сокращений

Верстка сайта на лету

Справочник EMMET сокращений или шпаргалка EMMET представляет собой сборник всех комбинаций команд или аббревиатур широко известного плагина для ускорения верстки. EMMET может все использоваться совместно с такими редакторами, как Sublime TextPHPStorm и WebStormNetBeansEclipseAptanaCodaTextMateKomodo EditNotepad++CodeMirrorBracketsAdobe Dreamviewer и Ace 

Сокращение

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *