Emmet - надстройка VSCode

1. Emmet

Полезные инструменты

2. Оригинальная статья

• https://skillbox.ru/media/code/uskoryaemvyerstku-ispolzuya-emmet/

3. Шапка документа

• Shift+! / HTML

4. Подключение стилей и скриптов

• Link и выбрать вариант

5. Добавление ссылок

• A и выбрать вариант

6. Простой ввод тега

• Написать тег (без галочек) и нажать Enter

7. Задание классов и идентификаторов

• Имя тега и ./# и название
(p.red/p#container)

8. Соседние элементы

• Имя тега + имя тега (header+footer)

9. Повтор

• Имя тега*количество (li*3)

10. Дочерние элементы

• Имя тега>имя тега (ol>li)

11. Группировка элементов

• Круглые скобки
• (header>div.logo>img)+div.container+footer

12. Текст «рыба»

• P>lorem

13. Быстрый ввод стилей CSS

• Первая буква и выбираем
• Первые буквы если слово составное и
выбираем

14. Направления полей и отступов

• Mb,mt,ml,mr,pt,pb,pl,pr

15. Свойство и значение

• Первая буква свойства:значение (c:red)

16. Несколько значений после двоеточия

• Первая буква значение – значение… (m 2510-35)