WebDesign Master
Курсы
Справочник 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

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

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

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

  • Создание сайта с крутой анимацией скролла (GSAP) | Материалы урока
  • Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока
  • Создание сайта портфолио с крутой анимацией | Материалы урока
  • Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
  • Создание Parallax эффекта на сайте при движении мыши | Материалы урока
  • Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
2023 © WebDesign Master