Некоторые сокращения EMMET для CSS

EMMET наиболее удобен для быстрого написания css стилей. Некоторые стили довольно сложные и труднозапоминаемые, с помощью EMMET достаточно лишь запомнить короткое сокращение.

fz20font-size: 20px;
fwbfont-weight: bold;
bgcbackground-color: #fff;
bgbackground: #000;
ccolor: #000;
m0margin: 0;
p0padding: 0;
w100width: 100px;
h100height: 100px;
mw100min-width: 100px;
dndisplay: none;
dbdisplay: block;
lstpnlist-style-type: none;
bg+background: #fff url() 0 0 no-repeat;
ffafont-family: Arial, «Helvetica Neue», Helvetica, sans-serif;
bd+border: 1px solid #000;
bdnborder: none;
bt+border-top: 1px solid #000;
bb+border-bottom: 1px solid #000;
bdbnborder-bottom: none;

Сайт emmet

EMMET — плагин для ускорения верстки.

Первоначальная разметка:  !+tab

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

Вставить ссылку на css: link+tab

 <link rel="stylesheet" href="style.css">

Добавить div с определенным классом  .class1+tab

 <div class="class1"></div>

> добавляет дочерний элемент:   .class1>p + tab

<div class="class1"><p></p></div>

* Добавление нескольких однотипных элементов: nav>ul>li*4 + tab

<nav>
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
</nav>

Создание таблички 3 строчки по 3 ячейки: table>tr*3>td*3 + tab

<table>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 </tr>
</table>

+ Соединение:  header+section+footer + tab

 <header></header> 

 <section></section> 

<footer></footer>

^ Переместить выше в DOM html: ul>li*2^p

<ul>
 <li></li>
 <li></li>
</ul>
<p></p>

Если в этой конструкции вместо ^ поставить >, абзацы вложатся каждый элемент списка. Если поставить +, абзац будет стоять последним элементом после всех li

Группировка (): .class1>(.class2+.class3)+tab

<div class="class1">
 <div class="class2"></div>
 <div class="class3"></div>
</div>

Нумерация $: a.class$*3+tab

<a href="" class="class1"></a>
<a href="" class="class2"></a>
<a href="" class="class3"></a>

id для div ##element$*3

<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>

Ссылка: a+tab

<a href=""></a>

Ссылка с адресом: a[href=irenebelle.com]

<a href="irenebelle.com"></a>

Обычный текст: a{ссылка}

<a href="">ссылка</a>

a:link

<a href="http://"></a>

a:mail

<a href="mailto:"></a>

link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

lorem и loremru — вставляет произвольный текст

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae maxime, necessitatibus accusantium magnam maiores.

В EMMET очень много различных сокращений, посмотреть их можно в документации на официальном сайте.

Скачать плагин для своего редактора можно здесь


Подробнее об нумерации

ul>li.item$*5

<ul> <li class=»item1″></li> <li class=»item2″></li> <li class=»item3″></li> <li class=»item4″></li> <li class=»item5″></li> </ul>

h$[title=item$]{Header $}*3

<h1 title=»item1″>Header 1</h1> <h2 title=»item2″>Header 2</h2> <h3 title=»item3″>Header 3</h3>

Если нужны нули в начале

ul>li.item$$$*5

<ul> <li class=»item001″></li> <li class=»item002″></li> <li class=»item003″></li> <li class=»item004″></li> <li class=»item005″></li> </ul>

Отсчет в обратную сторону

ul>li.item$@-*5

<ul> <li class=»item5″></li> <li class=»item4″></li> <li class=»item3″></li> <li class=»item2″></li> <li class=»item1″></li> </ul>

Начало нумерации с определенного числа

ul>li.item$@3*5

<ul> <li class=»item3″></li> <li class=»item4″></li> <li class=»item5″></li> <li class=»item6″></li> <li class=»item7″></li> </ul>

Селекторы

Селекторы, которые я не использовала ни разу, а наверное полезная штука:

h1+p — выделяет абзац, следующий сразу за заголовком. Это работает только с сестринскими тегами, не с потомками.

p * — все теги, вложенные в p (например strong, em, span, a)

Селекторы — примеры использования

Селектор :target

Селектор :target используется с внутренними ссылками.

В примере при нажатии на ссылку, появится форма.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>

 <style>
  #hello {
   display: none;
  }
  #hello:target {
   display: block;
  }

</style>
</head>
<body>
 <a href="#hello">Подписаться на рассылку</a>
 <form action="" id="hello">
  <label for="email">Укажите ваш адрес электронной почты</label><input type="text" id="email"> 
  <input type="submit" value="Подписаться">
 </form>
</body>
</html>

Селектор  :not()

Выбрать все ссылки, ведущие на внешние сайты (тоесть не на домен mysite.com)

a[href^="http://"]:not([href*="mysite.com"])

Сброс значений отступов

*{
 padding: 0;
 margin: 0;
}