1. Главная
  2. Блог
  3. Все сокращения и команды Emmet (Таблица)

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

Все сокращения и команды Emmet (Таблица)
Автор
Анатолий Ахматов
На чтение
3:27 мин
Обновлено
13.08.2021

Всем привет друзья! Сегодня вы научитесь использовать 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:xtXHTML transitional doctype
html:4sHTML4 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: ;

Ну вот друзья, надеюсь я вам принес непоправимую Пользу. Увидемся в других статьях.

Также может понравится

29 способов улучшить свою поисковую позицию в результатах поиска google

Вам трудно понять позицию поиска и как улучшить позиционирование ваших страниц?
Показать полностью...

Я думаю, что я потрясающая

Если мы спросим себя, как все, что мы делаем, может сделать пользователей крутым
Показать полностью...