что такое плагин emmet
Плагин Emmet для Sublime Text.
Вы до сих пор пишите теги html и css свойства вручную? Пришло время это исправить! Сегодня мы поговорим о плагине emmet, который поможет нам в этом.
Для начала его нужно установить. В Sublime Text, о котором недавно была написана статья, это делается очень просто. Откройте command palette, нажав сочетание клавиш cmd+shift+p, или перейдите в пункт tools и выберите там command palette. Теперь введите «install package» и нажмите enter. Дальше введите «emmet» и снова нажмите enter. После того, как плагин загрузится и установится, перезапустите Sublime Text.
Установка завершена, и теперь мы можем начать пользоваться плагином emmet. Введите
А теперь нажмите клавишу tab. В результате этих несложных действий мы получим открывающий и закрывающий тег div, а курсор будет установлен внутри, между ними.
Точно так же можно делать с любыми тегами. Например, давайте создадим ссылку.
Теперь нажмите tab, и мы получим следующее
Как видите, emmet добавил атрибут href самостоятельно. Если же вы введете img, то там сразу будут атрибуты src и alt.
Теперь рассмотрим, как добаблять классы и id. Делается это точно так же, как и в css: класс с помощью ., а id с помощью #
В результате получим
То же самое и с id
Заметьте, что я не писал слово div, а просто ставил точку или решетку и писал нужный мне класс или id. Дело в том, что мы можем пропускать название тега и тогда emmet сам будет додумывать, какой же тег поставить. В большинстве случаев это будет div, но, если вы, например, напишите так внутри тега ul, то тег будет li с нужным классом или id.
Если вы хотите сами ввести какой-то атрибут, то напишите его в квадратных скобках
Чтобы вкладывать теги внутри других тегов, нужно использовать знак больше
С помощью символа * можно указать, сколько таких тегов нам нужно
Вот, что у нас получится
Если вам нужно добавить тег на том же уровне, используйте знак +
С помощью символа $ мы можем указать, что каждый тег следует нумеровать автоматически
Если вам нужен ведущий ноль, то напишите знак $ 2 раза, если 2 ведущих нуля, то 3 знака $ и т.д.
Если вы хотите добавить внутри тега текст, то его нужно указать в фигурных скобках
Если во время верстки вам нужен какой-то текст, то просто напишите lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi error ex ea ipsa excepturi incidunt quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.
Если вам нужно какое-то определенное количество слов, то напишите цифру, обозначающую количество слов после.
Чтобы создать html структуру, просто напишите знак !
Повышение скорости написания кода: Emmet и его использование в VSCode
Аббревиатуры
У Emmet нет предопределенного набора имен тегов, вы можете написать любое слово и преобразовать его в тег: div →
Создание базовой структуры html
Операторы вложенности
Операторы вложенности используются для позиционирования элементов внутри сгенерированного дерева.
Дочерний элемент
Оператор > позволяет вкладывать один элемент в другой:
Соседний элемент
Оператор + позволяет разместить элементы рядом друг с другом на одном уровне:
Повторение
Оператор * позволяет определить, сколько раз должен выводиться элемент:
Группировка
Круглые скобки позволяют выделить в аббревиатуре отдельные поддеревья:
Вы можете вкладывать группы друг в друга и повторять их с помощью оператора умножения:
Атрибуты операторов
Вы можете указать атрибуты для выводимых элементов.
Указание класса и id
Произвольные атрибуты
Квадратные скобки позволяют задавать элементу произвольные атрибуты:
td[title=»Hello world!» colspan=3] →
Произвольные атрибуты имеют следующие особенности:
Для разделения атрибутов используется пробел.
Если не указано значение атрибута, то его значением станет пустая строка с меткой для табуляции (если ваш редактор поддерживает метки табуляции).
Можно использовать одинарные и двойные кавычки для указания значений атрибутов.
Если значение атрибута не содержит пробелов, то его не обязательно заключать в кавычки.
Нумерация
Начальное значение и направление нумерации
Вы можете изменить начальное значение счетчика и направление нумерации одновременно:
Добавление текста
Фигурные скобки позволяют добавить текст в элемент:
Неявные имена тегов
Генератор «Lorem Ipsum»
Аббревиатуры «lorem» и «lipsum» генерируют случайный текст. Каждый раз, когда вы выполняете преобразование данных аббревиатур, генерируется текст из 30 слов, разбитый на несколько предложений.
Добавление аббревиатур и фрагментов
Некоторые аббревиатуры преобразуются в элементы с предустановленными атрибутами. Список таких аббревиатур для различных языков вы можете посмотреть в официальном репозитории в каталоге snippets. Например, аббревиатуры для html находятся в файле html.json.
touch settings.json && touch snippets.json
В файл settings.json добавьте следующую настройку:
Подробности создания аббревиатур и фрагментов в VSCode можно найти в официальной документации.
Прощай, Zen Coding. Привет, Emmet!
Еще в 2009 году, Сергей Чикуёнок опубликовал статью, в которой представил новый способ написания HTML и CSS кода. Этот революционный плагин, назывался Zen Coding, он помогал многим разработчикам на протяжении многих лет и в настоящее время вышлел на новый уровень.
Emmet, ранее известный как Zen Coding, является самым производительным и экономным во времени плагином для текстового редактора. Простые сокращения мгновенно расширяются в сложные фрагменты кода, Emmet превратит вас в более продуктивного разработчика.
Для тех, кто предпочитает смотреть, а не читать, вот видео любимых трюков автора.
Как это работает?
Посмотрим правде в глаза: написание HTML-кода требует времени, со всеми тегами, атрибутами, кавычками, скобками и так далее. Конечно, в большинстве текстовых редакторов есть подсказки, которые сильно помогают, но все равно придется много печатать. Emmet мгновенно преобразовывает простые аббревиатуры в полноценные блоки кода.
HTML аббревиатуры
Инициализаторы
Подготовка к работе с новым HTML документом занимает менее чем секунду. Просто введите ! или html:5, нажмите «Tab», и вы увидите HTML5 doctype с несколькими тегами и отправной точкой для вашего приложения.
Легко добавить классы, IDы, текст и атрибуты
Поскольку синтаксис Emmet для описания элементов похож на CSS селекторы, привыкнуть к нему очень легко. Попробуйте объединить название тега с идентификатором (например, p#desc).
Кроме того, вы можете комбинировать классы и идентификаторы. Например, p.bar#foo выведет:
Теперь давайте посмотрим, как указать содержимое и атрибуты для HTML элементов. Фигурные скобки используются для содержания. К примеру, h1 преобразится в:
Квадратные скобки используются для атрибутов. Итак, a[href=#] выдаст следующее:
Вложенность элементов
Используя вложенные сокращения, вы можете построить целую страницу, используя всего одну строку кода. Во-первых, дочерний селектор, в лице >, позволяет вкладывать элементы. Селектор соседних элементов, в лице +, позволяет размещать элементы рядом друг с другом, на том же уровне. Наконец, новый оператор перехода на уровень выше, в лице ^, позволяет перейти по дереву элементов вверх на один уровень.
Группировка
Чтобы эффективно использовать вложения не превращая их в запутанный беспорядок операторов, вам нужно сгруппировать несколько кусков кода. Это как математика — нужно просто использовать скобки вокруг определенных частей.
Например, (.foo>h1)+(.bar>h2) преобразится в:
Неявные имена тегов
Нумерация
Как на счёт комбинации оператора умножения и нумерации? Просто поставьте оператор $ в конце названия атрибута или элемента и будем вам счастье! Например ul>li.item$*3 превратится в:
CSS аббревиатуры
Значения
Emmet предназначен для упрощения написания не только HTML, но и CSS кода. Допустим, вы хотите задать ширину. Сокращение w100 превратится в:
Значение px ставится по умолчанию. Другие единицы измерения используют свои символы. К примеру h10p+m5e:
Дополнительные опции
Вы уже знаете много интуитивных сокращений, таких как @f, который преобразуется в:
Автоматический поиск
Модуль CSS использует автоматический поиск, чтобы найти неизвестные сокращения. Так, каждый раз, когда вы ищите неизвестное сокращение, Emmet попытается найти самое близкое значение. Например, ov:h, ov-h, ovh и oh произведет то же самое:
Приставки браузеров
CSS3 крут, но вендорные префиксы — реальная боль для всех нас. Теперь уже нет, Emmet нам поможет.
Например, trs будет преобразовано в:
Также вы можете приписать свои префиксы. Просто используйте приставку —. Так, -super-foo преобразится в:
Что, если вы не хотите все те приставки? Нет проблем, просто укажите первые буквы их названий.
Например, -wm-trf преобразуется в:
Градиенты
Говоря о раздражающих особенностях CSS3, мы не можем забыть градиенты. Все те сложные выражения, что вы писали вручную, можно заменить на одну аббревиатуру.
К примеру lg(left, #fff 50%, #000) преобразуется в:
Дополнительные возможности
Lorem ipsum
Забудьте о сторонних сервисах, которые производят текст “Lorem ipsum”. Теперь вы можете сделать это быстро в своем редакторе. Просто используйте lorem или lipsum для сокращения. Вы можете определить сколько слов требуется вывести. Например, lorem10 выведет:
Кроме того, lorem может быть присвоен к другим элементам. Например, p*3>lorem5 преобразуется в:
Настройка
И намного больше!
Это только вершина айсберга. Emmet имеет еще много других замечательных функций, таких как кодирование и расшифровка изображений data:URL, обновление размеров изображения и увеличение и снижение числа и т.д..
Посетите новый веб-сайт, удивительную документацию и удобную шпаргалку!
Поддерживаемые редакторы можно посмотреть на этой странице.
UPD. Огромное спасибо skaflock за помощь в исправлении ошибок.
Опыт работы с Emmet: ускоряем вёрстку в разы
Владимир Матасов, выпускник курса Skillbox по веб-вёрстке, рассказал о своём опыте работы с плагином Emmet. Также подготовил инструкции по основным возможностям и командам для начинающих верстальщиков.
Привет, Хабр! Когда я только решил самостоятельно изучать вёрстку, то понял, что это будет долгий путь с большим количеством новой информации и практики.ну
Вначале любая задача занимала у меня много времени и результаты работы были небольшие. Я с некоторым недоумением смотрел на задачи для фрилансеров с биржи и не понимал, как можно успевать вести несколько таких проектов. Было понятно, что есть какие-то лайфхаки.
В это же время я поступил на курс по веб-вёрстке. Это сэкономило время на проверку всех советов, какие я нашёл в интернете. Преподаватели дали рекомендации по инструментам, которые сами проверили, в том числе несколько плагинов для редакторов кода.
Вариантов было много, можно было бы сравнить, составить табличку с плюсами и минусами, но мой путь в изучении вёрстки быстро привёл меня к редактору VSCode, а в него уже встроен плагин Emmet. Выбор сделан, мой подход в веб-вёрстке изменился, решил проблему, поэтому я расскажу, как работаю с Emmet.
Установка
Для тех, кто ещё совсем не знаком с плагинами, я начну с того, что это такое. Emmet — бесплатный плагин для текстовых редакторов. Напоминает автоподстановку текста в смартфоне, но более функциональную, сокращающую время написания рутинной разметки. Вы вводите несколько символов — начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.
Скачать плагин можно на официальном сайте. Хорошо, если вы уже определились с IDE или редактором кода. Нажимаете на картинку нужного редактора и вас перекинет на страницу с инструкцией.
Emmet на практике: пишем HTML
Я поделюсь своим опытом, как сейчас использую Emmet при вёрстке.
Первое, с чего начинаю создание HTML-разметки, — пишу базовую структуру, где объявляю тип документа, указываю язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.
Создаём базовую структуру HTML-разметки
Для начинающего верстальщика следующий фокус может показаться удивительным, но с помощью Emmet создать базовую структуру HTML-разметки можно за несколько секунд.
Сначала я использовал долгий вариант: набирал «html» и в выпадающем списке выбирал «html:5». Потом перешёл на более экономичный способ: набираю в редакторе «!» и нажимаю Tab, можно нажать Enter, тоже работает. Итог обеих манипуляций одинаковый: Emmet вставит скелет HTML-документа.
Подключаем стили и скрипты
Добавляем ссылки
Ничего сложного в указании ссылок нет, но благодаря Emmet мне стало легко и приятно их добавлять.
Пишу «a» и выбираю нужный вариант — простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можно уточнить тип, начиная вводить после двоеточия значение атрибута. Например, «a:tel».
Вводим теги
Когда я только начинал пробовать себя в вёрстке, то печатал всё – от « », затем составлял себе шпаргалки с готовыми тегами и копировал их. Чуть далее станет понятно, почему эти способы недостаточно хороши. Сейчас, с плагином, всё просто: пишу название тега и нажимаю Tab или Enter.
Достаточно ввести первые несколько букв названия тега, чтобы появился выпадающий список с вариантами. Emmet заботливо предложит нужный вариант и, если тег парный, добавит к нему закрывающий.
Некоторые теги Emmet всё же не добавляет. Например, на момент написания этой статьи, не подставляется тег «figcaption». Кто знает, в чём он провинился.
Задаём классы и идентификаторы
Я показал, как вводить теги, а теперь усложним этот процесс. Часто нужно указать класс или id. Делается это сразу при вводе тега. После ввода названия тега, без пробелов, добавляю символы «.» или «#», пишу название класса или идентификатора, на выходе получаю оформленный тег.
Частный случай, когда нужно задать класс или id для тега
Если вы знакомы с css-селекторами вида section#about.red, то возможно уже обратили внимание на схожесть синтаксиса. Дальше будет интересней – Emmet практически полностью повторяет правила по которым формируются обычные селекторы. Поэтому барьеры входа при изучении Emmet ещё меньше, не надо учить новый синтаксис, используем тот, что есть в css.
Используем группировку и вложенность
До этого я показал самые простые возможности Emmet, которые использую. Сейчас начинается настоящая магия.
С помощью синтаксиса Emmet легко создаю сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на css-селекторы со знаками сложения и умножения.
По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Покажу на примерах, как их можно расположить и сгруппировать.
Пример 1. Соседние элементы
Знак «+» создаст несколько соседних тегов, расположенных на одном иерархическом уровне.
А если я хочу повторить элемент 3 раза? Ответ: да очень просто – добавим знак умножения, и вуаля!
Пример 2. Дочерние элементы
Символ «>» делает следующий за ним элемент дочерним по отношению к первому, вложенным, обёрнутым в первый. При этом Emmet не забывает о закрывающих тегах и отступах при форматировании, код будет структурирован и отформатирован.
Пример 3. Сгруппированные элементы
Представим, что нужно создать структуру простой страницы, состоящей из шапки, основной части и подвала. При этом внутри шапки будет навигационная панель в виде маркированного списка без нумерации. А блоки main и footer будут на одном уровне с header.
Чтобы это сделать, header и его содержимое беру в круглые скобки. С их помощью можно сгруппировать элементы с разными уровнями вложенности.
Всё это записываю одной строкой, а на выходе получаю девять. Такая магия с вложенностями и группировками.
Бонусный уровень: генерируем рыбу-текст
Когда я только начинал заниматься вёрсткой, то читал много мнений: это хорошо, то плохо. Про рыбу-текст пишут разное. Но для меня это полезная вещь, например, для проверки вёрстки на переполнение.
Если нужен текст на русском языке, то вводим «loremru».
Emmet для CSS
Следующая задача для верстальщика после создания HTML-страницы, описать её внешний вид, для этого оформляем стили. В CSS нет разметки или вложенности, как в HTML, — только селектор, свойство и значение. Но и в случае со стилями Emmet даёт ощутимый прирост эффективности.
Способы ввода сокращений
В работе с CSS используются сокращённые названия свойств. Здесь меньше правил, с некоторым опытом всё становится интуитивно понятным и привычным: набираем первую букву — появляется подстановка всего слова.
Если название свойства составное, тогда слитно либо через дефис набираем первые буквы каждого слова и Emmet подскажет.
/* Введи и проверь: */.example <
ff
f-f
>
Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них — дело нескольких секунд. Для color будет достаточно «c».
Некоторые сочетания очевидные, например, «fs» предложит нам font-style, но есть и сокращения, к которым надо привыкнуть: «fz» — font-size. Мне понадобилось некоторое время, чтобы выработать стратегию и собственный словарь сокращений.
Ещё одна особенность автоподстановки в CSS: если используешь часто повторяющуюся пару «свойство — значение», то Emmet предложит его в первую очередь. Если во время вёрстки несколько раз указать display: flex, в следующий раз при нажатии «d» этот вариант будет первым в списке.
Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные цвета.
Направления полей и отступов
Отдельно скажу про свойства margin и padding, они набираются, соответственно, «m» и «p», чтобы указать направление отступов, достаточно без пробела или через дефис добавить t, b, l и r — обозначающие top, bottom, left и right. И без пробела добавляем значение отступа.
Уточнения свойств через двоеточие
Для ввода пары «свойство — значение» я использую двоеточие в случаях, когда значение указывается буквами, например, цвет. Это конкретизирует сокращение.
/* Введи и проверь: */.example <
c:red
>
Единицы измерения
В этом направлении есть несколько правил. Ряд свойств CSS очень удобные в работе и не требуют указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов normal, bold, bolder и lighter можно использовать условные единицы от 100 до 900, для opacity — диапазон дробных чисел от 0 до 1, для line-height — любой множитель, чаще всего в диапазоне от 1.1 до 2.
/* Введи и проверь: */.example <
fw400
op.5
lh1.25
>
Для тех свойств, где могут быть указаны разные единицы измерения, по умолчанию используются абсолютные пиксели (px). При этом нужно указать только число.
Но если мне захотелось указать значение в процентах, тогда использую символ «p». Для остальных единиц измерения прописываю их название.
Чтобы записать дробное значение, достаточно поставить точку, не указывая перед ней 0.
/* Введи и проверь: */.example <
fz15
mt45
pl20p
t.25rem
h5vh
>
Несколько значений после двоеточия
Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего встречается при использовании полей и отступов.
И для такого случая у Emmet есть изящное, на мой взгляд, решение: если единицы измерения пиксели или auto, пишем значения свойства через дефис. Проценты указываем, используя p. Другие единицы измерения (em, rem, wh, wv и так далее) пишем полностью без пробелов.
/* Введи и проверь: */.example <
m10-20
m22-55-4p
p25-55p4rem2vh
p0-a
>
Не меньше мне нравится использовать частные случаи, например, указание цвета с прозрачностью.
/* Введи и проверь: */.example <
cra
>
Подытожим
Для меня использование Emmet стало одним из слагаемых успеха в качестве веб-разработчика, наряду со знанием горячих клавиш, кодстайла, тегов и свойств.
Создайте для себя «словарь сокращений» Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и со временем вы станете более квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти на сайте разработчиков дополнения.
На курсе «Веб-вёрстка» вы познакомитесь со стандартами Web 2.0, научитесь работать с макетами и форматировать код, освоите адаптивную вёрстку, а по итогу — сможете создавать быстрые и удобные сайты, которые точно понравятся пользователям. Посмотреть программу и записаться по ссылке.
Плагин EMMET молниеносная верстка
Дополнительное видео
Плагин EMMET быстрый набор кода
Данный урок посвящен плагину Emmet который значительно упрощает написание CSS и HTML за счет преобразование простых аббревиатур в полноценные блоки кода.В уроке рассматривать основные функции Emmet, попрактикуемся в написании HTML и CSS, узнаем горячие клавиши.
Сам урок разбит на несколько частей:
В принципе на сайте нас будут интересовать две вещи, это документация к Emmet, я вернусь к ней чуть позже, и данные расширения под редакторы.
Emmet синтаксис HTML
При помощи Emmet, базовая разметка разворачивается двумя клавишами, прописываем восклицательный знак (!) и нажимаем (TAB) на клавиатуре, тем самым получим базовую разметку HTML страницы.
Что бы написать тег, пишем его название, нажимаем кнопку (TAB) и эммет создаст открывающий и закрывающий тег, а курсор помещает вовнутрь.
У общих тегов предусмотрены свои сокращения и в принципе они интуитивно понятны.
У некоторых еммет создает автоматически атрибуты.
При таком синтаксисе, заполняется часть атрибута.
Есть и другие теги о которых вы можете почитать в документации emmet.
Для атрибутов используя те же самые квадратные скобки [ ] как в CSS селекторах, можем добавлять атрибуты td[rowspan=2 title=»text»]
Emmet также умеем создавать целые цепочки из элементов при помощи символа «больше (>) », при нажатии TAB получаем вложенную конструкцию.
Используя символ «Плюс (+) », мы добавляем элемент к предыдущему на том же уровне.
Что бы вернуться по дереву вверх на одну ступень, используем символ «галочка (^) », а если на более чем одну ступень, то добавляем соответствующее их количество.
При помощи символа «звездочка (*) », мы можем продублировать комбинацию, любое количество раз.
При этом вкладывать вовнутрь любые элементы.
При помощи «фигурных скобок < >» можем добавлять текстовое содержание, а при помощи (с) писать комментарии.
В Emmet так же есть генератор произвольного текста, что довольно удобно на стадии создание прототипа страницы, когда не интересует его содержание, а блоки нужно заполнить текстовой информацией. При помощи слова « lorem » генерируем текст.
После слова lorem можем прописать количество слов в тексте, для этого, после слова задаем соответствующее число.
Это в принципе и весь базовый синтаксис emmet, теперь мы можем быстро создавать базовую разметку страницы, внутрь ее вкладывать любые элементы, создавать комментарии, списки, текст и так далее.
Emmet Синтаксис CSS
Открываем файл стилей, и в нем разберем популярные свойства, который часто задействуем при верстке.
В документации по Emmet, такие свойства написаны через двоеточие, но в большинстве случаев можно писать без них в чем сейчас сами обидитесь.
Для описания свойств color можно воспользоваться следующими сокращениями.
Что бы присвоить параметры отступов не обязательно прописывать аббревиатуру (px) она автоматически пропишется, а вод для того что бы задать в процентах или в других значения дописываем соответствующую букву.
По такой же аналогии задаются внешние (margin) и внутренние (padding) отступы.
Так же как в HTML, можем группировать свойства при помощи знака (+)
Используя новые свойства из CSS3 в большинстве случаев префикс создается самостоятельно.
Есть возможность сразу формировать свойства с вставленными шрифтами, используя следующее сочетание.
Приоритет задается восклицательным (!) знаком.
Все эти сокращения вы можете посмотреть на нашем сайте в статье Шпаргалки по EMMET, я отобрал часто использующие их и перечислил в таблицах.
Свои сниппеты в PHPSTORM
В каком бы редакторе с emmet не работали, у вас всегда будет возможность создавать свои аббревиатуры.
Разберем еще один пример, мне приходится часто центровать объекты посередине экрана, для этих целей постоянно прописываю данные стили.
Создам для них второй сниппет.
Таким же подобным образом формируются сниппеты для других расширений файлов. Для примера, коль создали сниппет с классом, для него подготовим сниппет doctype страницы.
По настройкам PhpStorm есть идея в дальнейшем записать серию уроков, если для вас эта тема актуальна, под видео пиши комментарии конкретно что интересуют по данному редактору, а там как соберусь записывать уроки, я постараюсь все эти вопросы в осветить.
Сокращенные комбинации emmet + PhpStorm
В Emmet существуют свои сокращения, но в PhpStorm они не все работаю, покажу ту часть, которыми я пользуюсь.
Что бы закомментировать участок кода используется сочетание клавиш ( CTRL + / ). Для комментирования выделенной области нажимаем ( CTRL + SHRIFT + )
Если нужно обернуть текст или код в определенные теги, выделяем его, нажимаем ( CTRL + ALT + J ) и выбираем метод написание обертки. Тут что удобно, есть три варианта, можем использовать стандартный набор кода, обернуть в ( CDATA ), и сделать обертку при помощи emmet.
Когда на страницу копируем код, из каких-то источником, в большинстве случаев он не форматированный, с таким кодом неудобно работать, и приходится его приводить к определенному виду. Для этого существует сочетание клавиш ( CTRL + ALT + L), выделяем участок кода, нажимаем, и код отформатирован.
Бывает случаи, когда нужно переместить участок кода выше или ниже по дереву, для этого выделяем область кода, нажимаем ( ALT + SHIFT ) и при помощи стрелок выше ниже перемещаем его выше ниже по дереву ( ALT + SHIFT + UP или DOWN ).
Самое основное, в принципе разобрали, и для закрепления знаний напишем простенький код при помощи emmet.
Практический пример по EMMET
И к завершению урока, закрепим полученные знания на практике, а заодно посмотрим, насколько удобно набирать код при помощи плагина Emmet.
Для примера создадим простенькое меню, с небольшой анимацией.
рис 4-5 (пример меню)
Затем создаем файл CSS. При помощи аббревиатуры ( dwsb ), разворачиваем начальные стили для выравнивания блока.
Для списков уберем маркеры.
Emmet ( m p c fz20 tdn ttu )
Затем изменим цвет шрифта, размер установим 20 пик, уберем подчеркивание, и делаем текст заглавными буквами.
Emmet ( poa por ct bg b0+l0+w100p+h3 )
Делаем анимацию
По наведению на кнопку данная полоска, должна выезжать с левой стороны до конца блока, затем, заполнять полностью блок по высоте, как убираем курсор, все должно возвращаться в исходное положение.
В то же время при наведении на блок ее возвращаем в нулевое положение.
Для плавности перемещения псевдоэлемента, для него прописываем transition в 0.8 сек. Emmet ( trs )
Элемент не скрылся, так как ссылка является строчным элементом, переводим ее в блочный вид. Emmet ( db )
Затем делаем конечный кадр, ставим 100% и высоту тоже в 100%. Проверяем результат.
При наведении текст поменяем на белый.
На этом урок я завершаю, надеюсь, что вы из него вынесли для себя полезную информацию, узнали, что-то новое, и потраченное время было не впустую.