Сокращение |
Расшифровка сокращения |
Базовый синтаксис 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="https://"></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;
|
