Все сокращения и команды Emmet (Таблица)

Всем привет друзья! Сегодня вы научитесь использовать emmet и начнете кодить со скоростью света.
Для чего нужны сокращения?
В основном, большинство текстовых редакторов позволяют сохранять и повторно использовать куски кода, под названием “фрагменты”, но чтобы использовать фрагменты их необходимо заранее определить, это не всегда удобно. Так вот, команды Emmet - готовые сокращения для вывода определенных кусочков кода.
Как пользоваться?
В популярных редакторах кода - Sublime Text 3, Atom и Visual Studio Code, Brackets после установки emmet как плагина сразу появляется возможность использовать сокращения.
Обычно, чтобы протестировать работают ли сокращения, я открываю пустой html файл и пишу !. Чтобы сокращение превратилось в полноценный кусок кода необходимо нажать tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Если восклицательный знак превратился в подобный код, значит emmet отлично работает. Поехали дальше
HTML аббревиатуры
Инициализаторы
! - это аббревиатура для создания в новом HTML документе стартовой разметки, вы можете использовать и другие варианты этого сокращения.
html:5 или ! | HTML5 doctype |
html:xt | XHTML transitional doctype |
html:4s | HTML4 strict doctype |
Теги
Для того чтобы создать html тег, вам также необходимо написать его краткое сокращение и нажать tab
Ниже представлены наиболее распространенные теги
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:geform: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> |
Классы ID и атрибуты
Классы
Чтобы добавить к создаваемому тегу класс необходимо прописать его в таком виде: тег.класс
h1.title даст такой результат <h1 class="title"></h1>
ID
Для добавления ID к элементу используем такую запись: тег#ID
h1#title даст такой результат <h1 id="title"></h1>
Атрибуты
Чтобы добавить к элементу атрибут нербходимо использовать такой вид записи: тег[атрибут='значение'].
h1[name='title'] даст такой результат <h1 name="title"></h1> значение можно не указывать h1[active] выдаст <h1 active=""></h1>
Вложенность элементов
Используя селекторы > и + можно создать соответственно, дочерние и соседние элементы, а с помощью селектора ^ можно поднять элемент на уровень выше в иерархии элементов.
p>span <p><span></span></p> p+span <p></p> <span></span> p>span^p <p><span></span></p> <p></p>
Группировка
Для того чтобы работать с сокращениями эффективно, нужно использовать группировку операторов - работает как в математике)
(h2>span)+(p>span) <h2><span></span></h2> <p><span></span></p>
Добавление контента
В ходе написания цепочки сокращений вам может понадобится сразу добавить текст в элемент, сделать это вы можете используя фигурные скобки {}
p{Это мой текст} <p>Это мой текст</p> h1.title{Заголовок}+(div>p>span{Текст}) <h1 class="title">Заголовок</h1> <div> <p><span>Текст</span></p> </div>
Умножение
Вы можете определить сколько элементов должно выть выведено с помощью оператора умножения *
ul>li*3 <ul> <li></li> <li></li> <li></li> </ul>
Нумерация
Мы можем сделать изменение названия класса, ID или атрибута с каждым следующим повторением, для этого нужно всего лишь добавить к ним знак доллара $
ul>li.item$*10 <ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> <li class="item8"></li> <li class="item9"></li> <li class="item10"></li> </ul>
CSS аббревиатуры
Основа работает так-же как и с HTML - пишем сокращение и жмем TAB, но есть некоторые различия, например добавление значение производиться по другому, конструктор вложенности не поддерживается и тд. Их мы рассмотрим после тегов.
Теги
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 свойства, по умолчанию добавление производится в стандартной для свойства величине.
lh1 line-height: 1; p10 padding: 10px;
Вы также можете писать величину в которой измеряется значение, в таком случае стандартная величина подставляться не будет.
mt10em margin-top: 10em; bdrs50% border-radius: 50%; fz10rem font-size: 10rem;
Сокращение величины значений
Да, круто, для величин тоже есть сокращения:
- p → %
- e → em
- x → ex
Пример использования:
bdrs5p border-radius: 5%; fz16e font-size: 16em;
Префиксы
И даже для префиксов придуманы свои, удобные команды
- w → -webkit-
- m → -moz-
- s → -ms-
- o → -o-
Пример:
-w-trf -webkit-transform: ; transform: ;
Их также можно группировать:
-wm-trf -webkit-transform: ; -moz-transform: ; transform: ;
Ну вот друзья, надеюсь я вам принес непоправимую Пользу. Увидемся в других статьях.