Справочник EMMET сокращений или шпаргалка EMMET представляет собой сборник всех комбинаций команд или аббревиатур широко известного плагина для ускорения верстки. EMMET может все использоваться совместно с такими редакторами, как Sublime Text, PHPStorm и WebStorm, NetBeans, Eclipse, Aptana, Coda, TextMate, Komodo Edit, Notepad++, CodeMirror, Brackets, Adobe Dreamviewer и Ace
Сокращение |
Расшифровка сокращения |
Базовый синтаксис 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 */
.class{
margin-top: 20px;
}
/* fsz20 */
.class{
font-size: 20px;
}
/* p15 */
.class{
padding: 15px;
}