Все сокращения и команды 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: ;
Ну вот друзья, надеюсь я вам принес непоправимую Пользу. Увидемся в других статьях.
