Курсы
Справочник EMMET сокращений для ускорения верстки

Справочник EMMET сокращений для ускорения верстки

Справочник 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>
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>
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:r 
<button type="reset"></button>
sect 
<section></section>
art 
<article></article>
hdr 
<header></header>
ftr 
<footer></footer>
str 
<strong></strong>
c 
<!-- Комментарий -->
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;
flr 
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;
zm 
zoom: 1;
cu 
cursor: pointer;
cud 
cursor: default;
cuha 
cursor: hand;
cuh 
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 
box-shadow: inset hoff voff blur #000;
bshn 
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: 1em sans-serif;
fw 
font-weight: normal;
fwb 
font-weight: bold;
fs 
font-style: italic;
fsn 
font-style: normal;
fz 
font-size: ;
ff 
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;
vam 
vertical-align: middle;
vabl 
vertical-align: baseline;
vab 
vertical-align: bottom;
vas 
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;
ts 
text-shadow: hoff voff blur #000;
tsn 
text-shadow: none;
lh 
line-height: ;
lts 
letter-spacing: ;
whs 
white-space: nowrap;
whsn 
white-space: normal;
bg 
background: #000;
bgnn 
background: none;
bgc 
background-color: #fff;
bgi 
background-image: url();
bgin 
background-image: none;
bgr 
background-repeat: no-repeat;
bga 
background-attachment: fixed;
bas 
background-attachment: scroll;
bgp 
background-position: 0 0;
bgz 
background-size: contain;
bgsa 
background-size: auto;
c 
color: #000;
cra 
color: rgba(0, 0, 0, .5);
op 
opacity: ;
ct 
content: '';
q 
quotes: ;
ol 
outline: ;
on 
overflow: none;
tbl 
table-layout: fixed;
cs 
caption-side: top;
ec 
empty-cells: show;
bd 
border: 1px solid #000;
bdn 
border: none;
bdc 
border-color: #000;
bdi 
border-image: url();
bdin 
border-image: none;
bdf 
border-fit: repeat;
bdle 
border-length: ;
bsp 
border-spacing: ;
bds 
border-style: none;
bw 
border-width: ;
bt 
border-top: 1px solid #000;
bdtn 
border-top: none;
bdr 
border-right: 1px solid #000;
bdrn 
border-right: none;
bb 
border-bottom: 1px solid #000;
bdbn 
border-bottom: none;
bl 
border-left: 1px solid #000;
bdln 
border-left: none;
bdrs 
border-radius: ;
btrr 
border-top-right-radius: ;
btlr 
border-top-left-radius: ;
bblr 
border-bottom-left-radius: ;
lis 
list-style: ;
lisn 
list-style: none;
lst 
list-style-type: disc;
lstn 
list-style-type: none;
lstc 
list-style-type: circle;
lsts 
list-style-type: square;
lstdm 
list-style-type: decimal;
lsi 
list-style-image: ;
lsin 
list-style-image: none;
! 
!important
@f 
@font-face {
	font-family: ;
	src: url();
}
@i 
@import url();
@m 
@media screen {

}
anim 
animation: name duration timing-function delay iteration-count direction fill-mode;
ap 
appearance: none;
cm 
/* Комментарий */
colm 
columns: ;
trf 
transform: ;
trfr 
transform: rotate(angle);
trft 
transform: translate(x, y);
tfo 
transform-origin: ;
trs 
transition: prop time;
trsde 
transition-delay: time;
trsdu 
transition-duration: time;
trsp 
transition-property: prop;
us 
user-select: none;

В некоторые CSS сокращения можно подставлять свои значения, например:

/* mt20 */
.class{
	margin-top: 20px;
}

/* fsz20 */
.class{
	font-size: 20px;
}

/* p15 */
.class{
	padding: 15px;
}

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс
Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я
Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Верстка»