0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>30 июл 2021</li>
2
<ul><li>30 июл 2021</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Оказывается, можно верстать много, а печатать мало!</p>
4
</ul><p>Оказывается, можно верстать много, а печатать мало!</p>
5
<p>Катя Павловская для Skillbox Media</p>
5
<p>Катя Павловская для Skillbox Media</p>
6
<p>В IT пришёл из наружной рекламы, где проработал с десяток лет. В Skillbox изучает веб-вёрстку. Увлекается археологией, диджеингом и плёночной фотографией.</p>
6
<p>В IT пришёл из наружной рекламы, где проработал с десяток лет. В Skillbox изучает веб-вёрстку. Увлекается археологией, диджеингом и плёночной фотографией.</p>
7
<p>Emmet - бесплатный плагин для текстовых редакторов, который напоминает автоподстановку текста в смартфоне, но более функциональную. Скачать его можно<a>по ссылке</a>, выбрав нужную вам IDE или редактор кода. На сайте есть инструкции по установке (разделы<em>Installation</em>или<em>How to install</em>).</p>
7
<p>Emmet - бесплатный плагин для текстовых редакторов, который напоминает автоподстановку текста в смартфоне, но более функциональную. Скачать его можно<a>по ссылке</a>, выбрав нужную вам IDE или редактор кода. На сайте есть инструкции по установке (разделы<em>Installation</em>или<em>How to install</em>).</p>
8
<p>Emmet использует специальный синтаксис для сокращений: вы вводите несколько символов - начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.</p>
8
<p>Emmet использует специальный синтаксис для сокращений: вы вводите несколько символов - начало названия тега или свойства, а программа предлагает самостоятельно дописать остальное, выбрав из выпадающего списка. Остаётся нажать Tab или Enter, и нужный вам код написан целиком.</p>
9
<p>Чтобы использовать Emmet, его нужно сначала освоить - это потребует немного усилий. Зато потом плагин сэкономит вам кучу времени и нервов, сделает вёрстку намного эффективнее. Так что давайте учиться!</p>
9
<p>Чтобы использовать Emmet, его нужно сначала освоить - это потребует немного усилий. Зато потом плагин сэкономит вам кучу времени и нервов, сделает вёрстку намного эффективнее. Так что давайте учиться!</p>
10
<ul><li><a>Emmet на практике: пишем HTML</a></li>
10
<ul><li><a>Emmet на практике: пишем HTML</a></li>
11
<li><a>Создаём шапку документа в два клика</a></li>
11
<li><a>Создаём шапку документа в два клика</a></li>
12
<li><a>Подключаем стили и скрипты</a></li>
12
<li><a>Подключаем стили и скрипты</a></li>
13
<li><a>Добавляем ссылки</a></li>
13
<li><a>Добавляем ссылки</a></li>
14
<li><a>Вводим теги</a></li>
14
<li><a>Вводим теги</a></li>
15
<li><a>Задаём классы и идентификаторы</a></li>
15
<li><a>Задаём классы и идентификаторы</a></li>
16
<li><a>Используем группировку и вложенность</a></li>
16
<li><a>Используем группировку и вложенность</a></li>
17
<li><a>Пример 1. Соседние элементы</a></li>
17
<li><a>Пример 1. Соседние элементы</a></li>
18
<li><a>Пример 2. Дочерние элементы</a></li>
18
<li><a>Пример 2. Дочерние элементы</a></li>
19
<li><a>Пример 3. Сгруппированные элементы</a></li>
19
<li><a>Пример 3. Сгруппированные элементы</a></li>
20
</ul><ul><li><a>Генерируем рыбу-текст</a></li>
20
</ul><ul><li><a>Генерируем рыбу-текст</a></li>
21
<li><a>Оформление стилей страницы. Работа с CSS</a></li>
21
<li><a>Оформление стилей страницы. Работа с CSS</a></li>
22
<li><a>Способы ввода сокращений</a></li>
22
<li><a>Способы ввода сокращений</a></li>
23
<li><a>Направления полей и отступов</a></li>
23
<li><a>Направления полей и отступов</a></li>
24
<li><a>Уточнения свойств через двоеточие</a></li>
24
<li><a>Уточнения свойств через двоеточие</a></li>
25
<li><a>Единицы измерения</a></li>
25
<li><a>Единицы измерения</a></li>
26
<li><a>Несколько значений после двоеточия</a></li>
26
<li><a>Несколько значений после двоеточия</a></li>
27
<li><a>Использование декларации! important</a></li>
27
<li><a>Использование декларации! important</a></li>
28
<li><a>Подытожим</a></li>
28
<li><a>Подытожим</a></li>
29
</ul><p>Emmet - это не отдельная программа, а дополнение, которое устанавливается в ваш редактор кода. Слушателям курса по веб-вёрстке мы рекомендуем использовать VSCode. В него Emmet уже встроен, и ничего не нужно делать дополнительно - просто бери и пользуйся.</p>
29
</ul><p>Emmet - это не отдельная программа, а дополнение, которое устанавливается в ваш редактор кода. Слушателям курса по веб-вёрстке мы рекомендуем использовать VSCode. В него Emmet уже встроен, и ничего не нужно делать дополнительно - просто бери и пользуйся.</p>
30
<p>По умолчанию дополнение включено для разных типов файлов. В статье мы рассмотрим только HTML и CSS. О том, как быть с другими типами, можно узнать в <a>документации</a>по VS Code.</p>
30
<p>По умолчанию дополнение включено для разных типов файлов. В статье мы рассмотрим только HTML и CSS. О том, как быть с другими типами, можно узнать в <a>документации</a>по VS Code.</p>
31
<p><strong>Примечание:</strong>если вы используете какой-то другой редактор, то можете найти справку по установке на <a>официальном сайте</a>дополнения или в документации к вашему редактору.</p>
31
<p><strong>Примечание:</strong>если вы используете какой-то другой редактор, то можете найти справку по установке на <a>официальном сайте</a>дополнения или в документации к вашему редактору.</p>
32
<p>Теперь разберём, как использовать Emmet в ваших рабочих проектах.</p>
32
<p>Теперь разберём, как использовать Emmet в ваших рабочих проектах.</p>
33
<p>Первое, что мы обычно делаем при создании HTML-разметки, - пишем базовую структуру, где объявляем тип документа, указываем язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.</p>
33
<p>Первое, что мы обычно делаем при создании HTML-разметки, - пишем базовую структуру, где объявляем тип документа, указываем язык страницы, кодировку, метатеги, заголовок и тело будущей интернет-страницы.</p>
34
<p>Кажется удивительным, но с помощью Emmet это можно сделать, нажав всего три кнопки: набрать в редакторе "!" и нажать Tab или Enter. Emmet вставит скелет HTML-документа. Второй способ - набрать "html" и в выпадающем списке выбрать html:5.</p>
34
<p>Кажется удивительным, но с помощью Emmet это можно сделать, нажав всего три кнопки: набрать в редакторе "!" и нажать Tab или Enter. Emmet вставит скелет HTML-документа. Второй способ - набрать "html" и в выпадающем списке выбрать html:5.</p>
35
<p>После создания шапки документа мы размещаем теги <link> внутри <head> - с указанием путей к стилям или скриптам. Используя Emmet, можно просто написать "link", а автоподстановка предложит не только тег целиком, но и разные варианты: там есть стили и CSS, и установка favicon, и многое другое.</p>
35
<p>После создания шапки документа мы размещаем теги <link> внутри <head> - с указанием путей к стилям или скриптам. Используя Emmet, можно просто написать "link", а автоподстановка предложит не только тег целиком, но и разные варианты: там есть стили и CSS, и установка favicon, и многое другое.</p>
36
<!-- Пример: --> link <!-- Результат: --> <link rel="stylesheet" href=""><p>Благодаря Emmet добавлять ссылки стало легко и приятно.</p>
36
<!-- Пример: --> link <!-- Результат: --> <link rel="stylesheet" href=""><p>Благодаря Emmet добавлять ссылки стало легко и приятно.</p>
37
<p>Пишем "a" и выбираем нужный вариант - простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можем уточнить тип, добавив после двоеточия нужное значение атрибута. Например, "a:tel".</p>
37
<p>Пишем "a" и выбираем нужный вариант - простую гиперссылку, ссылку на номер телефона, электронную почту и так далее. Или можем уточнить тип, добавив после двоеточия нужное значение атрибута. Например, "a:tel".</p>
38
<!-- Пример: --> a a:tel <!-- Результат: --> <a href=""></a> <a href="tel:+"></a><p>Для того чтобы добавить тег, пишем его название и нажимаем Tab или Enter.</p>
38
<!-- Пример: --> a a:tel <!-- Результат: --> <a href=""></a> <a href="tel:+"></a><p>Для того чтобы добавить тег, пишем его название и нажимаем Tab или Enter.</p>
39
<p>Чаще всего достаточно нескольких букв названия тега - всегда смотрите на выпадающий список. Emmet заботливо предложит нужный вариант и, если тег парный, добавит к нему закрывающий.</p>
39
<p>Чаще всего достаточно нескольких букв названия тега - всегда смотрите на выпадающий список. Emmet заботливо предложит нужный вариант и, если тег парный, добавит к нему закрывающий.</p>
40
<!-- Пример: --> figure <!-- Результат: --> <figure></figure><p>После нужного тега добавляем символы "." или "#", пишем название класса или идентификатора и получаем оформленный тег.</p>
40
<!-- Пример: --> figure <!-- Результат: --> <figure></figure><p>После нужного тега добавляем символы "." или "#", пишем название класса или идентификатора и получаем оформленный тег.</p>
41
<!-- Пример: --> header.header section#about <!-- Результат: --> <header class="header"></header> <section id="about"></section><p><strong>Примечание.</strong>Если нужно задать класс или id для тега <div>, то сразу ставим точку или "решётку", не набирая название тега, затем пишем название класса или идентификатора.</p>
41
<!-- Пример: --> header.header section#about <!-- Результат: --> <header class="header"></header> <section id="about"></section><p><strong>Примечание.</strong>Если нужно задать класс или id для тега <div>, то сразу ставим точку или "решётку", не набирая название тега, затем пишем название класса или идентификатора.</p>
42
<!-- Пример: --> .wrap #block <!-- Результат: --> <div class="wrap"></div> <div id="block"></div><p>До этого мы разбирали самые простые возможности Emmet. Дальше начинается настоящая магия.</p>
42
<!-- Пример: --> .wrap #block <!-- Результат: --> <div class="wrap"></div> <div id="block"></div><p>До этого мы разбирали самые простые возможности Emmet. Дальше начинается настоящая магия.</p>
43
<p>Синтаксис Emmet позволяет создавать сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на математическое уравнение, потому что среди символов есть знаки сложения и умножения.</p>
43
<p>Синтаксис Emmet позволяет создавать сложные конструкции разного уровня вложенности всего из одной строки символов. Это немного похоже на математическое уравнение, потому что среди символов есть знаки сложения и умножения.</p>
44
<p>По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Рассмотрим на примерах, как их можно расположить и сгруппировать.</p>
44
<p>По отношению друг к другу элементы в HTML-разметке могут быть родительскими, дочерними и соседними. Рассмотрим на примерах, как их можно расположить и сгруппировать.</p>
45
<p>Пример 1. Соседние элементы</p>
45
<p>Пример 1. Соседние элементы</p>
46
<p>Знак "+" позволяет создать несколько соседних тегов - то есть расположенных на одном уровне.</p>
46
<p>Знак "+" позволяет создать несколько соседних тегов - то есть расположенных на одном уровне.</p>
47
<!-- Пример: --> div+p+div+a <!-- Результат: --> <div></div> <p></p> <div></div> <a href=""></a><p>Знак "*" повторяет элементы указанное количество раз.</p>
47
<!-- Пример: --> div+p+div+a <!-- Результат: --> <div></div> <p></p> <div></div> <a href=""></a><p>Знак "*" повторяет элементы указанное количество раз.</p>
48
<!-- Пример: --> section*3 <!-- Результат: --> <section></section> <section></section> <section></section><p>Пример 2. Дочерние элементы</p>
48
<!-- Пример: --> section*3 <!-- Результат: --> <section></section> <section></section> <section></section><p>Пример 2. Дочерние элементы</p>
49
<p>Символ ">" делает следующий за ним элемент дочерним по отношению к первому (вложенным, обёрнутым в первый). При этом Emmet не забывает о закрывающих тегах и отступах при форматировании. Ваш код сразу же структурирован и отформатирован.</p>
49
<p>Символ ">" делает следующий за ним элемент дочерним по отношению к первому (вложенным, обёрнутым в первый). При этом Emmet не забывает о закрывающих тегах и отступах при форматировании. Ваш код сразу же структурирован и отформатирован.</p>
50
<!-- Пример: --> ul>li>a <!-- Результат: --> <ul> <li><a href=""></a></li> <ul><p>Пример 3. Сгруппированные элементы</p>
50
<!-- Пример: --> ul>li>a <!-- Результат: --> <ul> <li><a href=""></a></li> <ul><p>Пример 3. Сгруппированные элементы</p>
51
<p>Если при вводе сокращений использовать круглые скобки, то можно сгруппировать элементы с разными уровнями вложенности.</p>
51
<p>Если при вводе сокращений использовать круглые скобки, то можно сгруппировать элементы с разными уровнями вложенности.</p>
52
<p>Представим, что нам нужно создать структуру простой страницы, состоящей из хедера, основной части и футера. При этом внутри хедера будет навигационная панель, реализованная в разметке как ненумерованный список. А блоки main и footer будут на одном уровне с header. Для этого header и его содержимое нужно взять в круглые скобки.</p>
52
<p>Представим, что нам нужно создать структуру простой страницы, состоящей из хедера, основной части и футера. При этом внутри хедера будет навигационная панель, реализованная в разметке как ненумерованный список. А блоки main и footer будут на одном уровне с header. Для этого header и его содержимое нужно взять в круглые скобки.</p>
53
<p>Всё это мы записали одной строкой, а на выходе получили девять!</p>
53
<p>Всё это мы записали одной строкой, а на выходе получили девять!</p>
54
<!-- Пример: --> (header>nav>ul>li)+main+footer <!-- Результат: --> <header> <nav> <ul> <li></li> </ul> </nav> </header> <main></main> <footer></footer><p>Простая, но полезная вещь. Например, для проверки вёрстки на переполнение.</p>
54
<!-- Пример: --> (header>nav>ul>li)+main+footer <!-- Результат: --> <header> <nav> <ul> <li></li> </ul> </nav> </header> <main></main> <footer></footer><p>Простая, но полезная вещь. Например, для проверки вёрстки на переполнение.</p>
55
<!-- Пример: --> p>lorem <!-- Результат: --> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore et, assumenda, amet mollitia qui ratione esse sunt nisi voluptate beatae doloribus odio repudiandae quo dolores quis dolor ut, soluta delectus!</p><p>После того как мы создали HTML-страницу, переходим к описанию её внешнего вида - то есть к оформлению стилей. В CSS нет разметки или вложенности, как в HTML, - только селектор, свойство и значение. Но и в случае со стилями Emmet даёт ощутимый прирост эффективности.</p>
55
<!-- Пример: --> p>lorem <!-- Результат: --> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore et, assumenda, amet mollitia qui ratione esse sunt nisi voluptate beatae doloribus odio repudiandae quo dolores quis dolor ut, soluta delectus!</p><p>После того как мы создали HTML-страницу, переходим к описанию её внешнего вида - то есть к оформлению стилей. В CSS нет разметки или вложенности, как в HTML, - только селектор, свойство и значение. Но и в случае со стилями Emmet даёт ощутимый прирост эффективности.</p>
56
<p>Все сокращения в CSS - это укороченные названия свойств. Здесь гораздо меньше правил, но при этом всё так же интуитивно понятно: набираем первую букву - появляется подстановка всего слова. А если свойство пишется через дефис, то набираем первые буквы каждого слова (слитно либо через дефис) и Emmet даёт подсказку.</p>
56
<p>Все сокращения в CSS - это укороченные названия свойств. Здесь гораздо меньше правил, но при этом всё так же интуитивно понятно: набираем первую букву - появляется подстановка всего слова. А если свойство пишется через дефис, то набираем первые буквы каждого слова (слитно либо через дефис) и Emmet даёт подсказку.</p>
57
/* Пример: */ .example { ff f-f } /* Результат (на выбор): */ .example { font-family: ; flex-flow: ; font-feature-settings: ; -ms-flex-flow: ; }<p>Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них - дело нескольких секунд. Для color будет достаточно "c".</p>
57
/* Пример: */ .example { ff f-f } /* Результат (на выбор): */ .example { font-family: ; flex-flow: ; font-feature-settings: ; -ms-flex-flow: ; }<p>Если свойства начинаются на одну и ту же букву или комбинацию букв, например, color и columns, то подобрать сочетания для каждого из них - дело нескольких секунд. Для color будет достаточно "c".</p>
58
<p>Сочетание "fs" предложит нам font-style, а "fz" - font-size. Со временем у вас выработается стратегия и появится собственный словарь сокращений.</p>
58
<p>Сочетание "fs" предложит нам font-style, а "fz" - font-size. Со временем у вас выработается стратегия и появится собственный словарь сокращений.</p>
59
<p>Ещё одна особенность автоподстановки в CSS: если вы используете часто повторяющуюся пару "свойство - значение", то Emmet предложит его в первую очередь. Если во время вёрстки вы несколько раз указали display: flex, то в следующий раз при нажатии "d" этот вариант будет первым в списке. Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные в файле стилей цвета, если они были заданы.</p>
59
<p>Ещё одна особенность автоподстановки в CSS: если вы используете часто повторяющуюся пару "свойство - значение", то Emmet предложит его в первую очередь. Если во время вёрстки вы несколько раз указали display: flex, то в следующий раз при нажатии "d" этот вариант будет первым в списке. Таким же образом при вводе свойства color в выпадающем списке будут перечислены все ранее указанные в файле стилей цвета, если они были заданы.</p>
60
<p>Свойства margin и padding набираются, соответственно, "m" и "p", а чтобы указать направление отступов, достаточно добавить t, b, l и r - top, bottom, left и right соответственно.</p>
60
<p>Свойства margin и padding набираются, соответственно, "m" и "p", а чтобы указать направление отступов, достаточно добавить t, b, l и r - top, bottom, left и right соответственно.</p>
61
/* Пример: */ .example { pt20 ml25 t b l r } /* Результат: */ .example { padding-top: 20px; margin-left: 25px; top: ; bottom: ; left: ; right: ; }<p>В некоторых случаях для ввода пары "свойство - значение" лучше использовать двоеточие. Это конкретизирует сокращение.</p>
61
/* Пример: */ .example { pt20 ml25 t b l r } /* Результат: */ .example { padding-top: 20px; margin-left: 25px; top: ; bottom: ; left: ; right: ; }<p>В некоторых случаях для ввода пары "свойство - значение" лучше использовать двоеточие. Это конкретизирует сокращение.</p>
62
<p>При попытке написать "cred" будут предложены варианты <strong>c</strong><em>olumn-</em><strong>r</strong><em>ul</em><strong>e</strong><em>-wi</em><strong>d</strong><em>th</em>и даже<em>-webkit-</em><strong>c</strong><em>olumn-b</em><strong>re</strong><em>ak-insi</em><strong>d</strong><em>e.</em> А если использовать двоеточие, Emmet поймёт, что после него вы хотите указать значение red для свойства color.</p>
62
<p>При попытке написать "cred" будут предложены варианты <strong>c</strong><em>olumn-</em><strong>r</strong><em>ul</em><strong>e</strong><em>-wi</em><strong>d</strong><em>th</em>и даже<em>-webkit-</em><strong>c</strong><em>olumn-b</em><strong>re</strong><em>ak-insi</em><strong>d</strong><em>e.</em> А если использовать двоеточие, Emmet поймёт, что после него вы хотите указать значение red для свойства color.</p>
63
/* Пример: */ .example { c:red } /* Результат: */ .example { color: red; }<p>Ряд свойств CSS не требует указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов (normal, bold, bolder и lighter) используются условные единицы от 100 до 900, для opacity - диапазон от 0 до 1, для line-height - множитель.</p>
63
/* Пример: */ .example { c:red } /* Результат: */ .example { color: red; }<p>Ряд свойств CSS не требует указания единиц измерения. К этим свойствам относятся, например, font-weight, line-height и opacity. Для описания свойства font-weight помимо ключевых слов (normal, bold, bolder и lighter) используются условные единицы от 100 до 900, для opacity - диапазон от 0 до 1, для line-height - множитель.</p>
64
<p>При написании сокращения для таких свойств достаточно добавить нужное число.</p>
64
<p>При написании сокращения для таких свойств достаточно добавить нужное число.</p>
65
/* Пример: */ .example { fw400 op.5 lh1.25 } /* Результат: */ .example { font-weight: 400; opacity: 0.5; line-height: 1.25; }<p>Для тех свойств, где требуется указать единицы измерения, по умолчанию используются абсолютные пиксели (px). Если вы хотите указать значение в процентах, то используйте символ "p". Для остальных единиц измерения полностью прописывается их название.</p>
65
/* Пример: */ .example { fw400 op.5 lh1.25 } /* Результат: */ .example { font-weight: 400; opacity: 0.5; line-height: 1.25; }<p>Для тех свойств, где требуется указать единицы измерения, по умолчанию используются абсолютные пиксели (px). Если вы хотите указать значение в процентах, то используйте символ "p". Для остальных единиц измерения полностью прописывается их название.</p>
66
<p>Чтобы записать дробное значение, достаточно поставить точку, не указывая перед ней 0.</p>
66
<p>Чтобы записать дробное значение, достаточно поставить точку, не указывая перед ней 0.</p>
67
/* Пример: */ .example { fz15 mt45 pl20p t.25rem h5vh } /* Результат: */ .example { font-size: 15px; margin-top: 45px; padding-left: 20%; top: 0.25rem; height: 5vh; }<p>Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего это встречается при использовании полей и отступов.</p>
67
/* Пример: */ .example { fz15 mt45 pl20p t.25rem h5vh } /* Результат: */ .example { font-size: 15px; margin-top: 45px; padding-left: 20%; top: 0.25rem; height: 5vh; }<p>Бывает, что для описания свойства требуется несколько значений, которые пишутся через пробел. Чаще всего это встречается при использовании полей и отступов.</p>
68
<p>И для такого случая у Emmet есть изящное решение: если единица измерения - пиксели, то пишем их через дефис (то же касается и auto). Проценты указываем, используя p. Другие единицы измерения (em, rem, wh, wv и так далее) пишем полностью без пробелов.</p>
68
<p>И для такого случая у Emmet есть изящное решение: если единица измерения - пиксели, то пишем их через дефис (то же касается и auto). Проценты указываем, используя p. Другие единицы измерения (em, rem, wh, wv и так далее) пишем полностью без пробелов.</p>
69
/* Пример: */ .example { m10-20 m22-55-4p p25-55p4rem2vh p0-a } /* Результат: */ .example { margin: 10px 20px; margin: 22px 55px 4%; padding: 25px 55% 4rem 2vh; padding: 0 auto; }<p>Частный случай - указание цвета с прозрачностью.</p>
69
/* Пример: */ .example { m10-20 m22-55-4p p25-55p4rem2vh p0-a } /* Результат: */ .example { margin: 10px 20px; margin: 22px 55px 4%; padding: 25px 55% 4rem 2vh; padding: 0 auto; }<p>Частный случай - указание цвета с прозрачностью.</p>
70
/* Пример: */ .example { cra } /* Результат: */ .example { color: rgba(0, 0, 0, 0.5); }<p>Здесь всё просто: в конце сокращения ставится восклицательный знак.</p>
70
/* Пример: */ .example { cra } /* Результат: */ .example { color: rgba(0, 0, 0, 0.5); }<p>Здесь всё просто: в конце сокращения ставится восклицательный знак.</p>
71
/* Пример: */ .example { ml30! } /* Результат: */ .example { margin-left: 30px !important; }<p><strong>Примечание</strong>: в курсе по веб-вёрстке мы рекомендуем применять !important в самых крайних случаях. А лучше - не применять совсем.</p>
71
/* Пример: */ .example { ml30! } /* Результат: */ .example { margin-left: 30px !important; }<p><strong>Примечание</strong>: в курсе по веб-вёрстке мы рекомендуем применять !important в самых крайних случаях. А лучше - не применять совсем.</p>
72
<p>Умение использовать Emmet - одно из слагаемых успеха веб-разработчика наряду со знанием<a>горячих клавиш</a>, кодстайла, тегов и свойств.</p>
72
<p>Умение использовать Emmet - одно из слагаемых успеха веб-разработчика наряду со знанием<a>горячих клавиш</a>, кодстайла, тегов и свойств.</p>
73
<p>Создайте для себя "словарь сокращений" Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и вы станете квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти<a>на сайте</a>разработчиков дополнения.</p>
73
<p>Создайте для себя "словарь сокращений" Emmet и выучите основные комбинации. Это увеличит скорость написания кода, и вы станете квалифицированным верстальщиком. Если нужна шпаргалка по всем сокращениям, её можно найти<a>на сайте</a>разработчиков дополнения.</p>
74
<a>Практический курс: "Веб-вёрстка" Узнать о курсе</a>
74
<a>Практический курс: "Веб-вёрстка" Узнать о курсе</a>