Базовый синтаксис 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;
|
Спасибо больше за шпаргалку.
благодарю за помощь