css

Для того чтобы писать таблицу стилей CSS в Notepad++, необходимо в главном меню программы в опции Синтаксис выбрать букву С, и далее CSS. После этого, Emmet поймет, что вы хотите писать таблицу стилей. При этом расширение документа не будет иметь значения.

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

При написании таблиц стилей CSS часто возникает необходимость в подсчете отступов margin и padding, размеров блоков и расстояний между ними. Плагин Emmet позволяет это сделать прямо в текстовом редакторе Notepad++. Вам не придется дополнительно открывать окна калькуляторов или каких-то других программ, предназначенных для этих целей.

Простые арифметические действия можно выполнить прямо в окне программы Notepad++. Для этого, на свободной строчке набираете, что то  на подобие 5+8-3 или 4*6/3. Заходите в меню Плагины – Emmet, находим команду Evalute math expression (вычислить математическое выражение) и кликаем по нему мышью.

Эта команда не имеет горячих клавиш. Но, если вы ею часто пользуетесь, то горячие клавиши можно установить. Как это сделать, читайте в статье Notepad++ и Emmet.

Команда Emmet Evalute math expression не понимает скобок, поэтому выражения типа (3+5-2)*4 останутся без ответа.

Селекторы придется писать вручную.  А вот написание пары, свойство – значение, Emmet поможет сократить.  Написание таких свойств как padding, margin, width, height, сводится к написанию первого символа. Например: p даст padding: ;.

Значение можно подставить через черточку, следующим образом: p12-10-15-5. В результате получим padding: 12px 10px 15px 5px. Для отрицательных значений достаточно поставить дополнительную черточку: p-12-10—15—5 даст  padding: -12px 10px -15px -5px.

Свойства шрифтов можно задать следующим образом:

f                      font: ;
f-f                    font-family: fantasy;
f-s                    font-family: serif;
fv                     font-variant: ;
fs                     font-style: italic;
fsn                    font-style: normal;
fso                    font-style: oblique;
fw                     font-weight: ;
fb                     font-weight: bold;

Свойства оформления текста в виде перечеркивания, подчеркивания и линии над текстом:

 td                    text-decoration: none;
tdl                    text-decoration: line-through;
tdo                    text-decoration: overline;
tdu                    text-decoration: underline;

Цвет текста:

 с                     color: #000;, другой придется написать руками.

Горизонтальное выравнивание текста:

ta                    text-align: left;
tar                   text-align: right;
taj                   text-align: justify;
tac                   text-align: center;
ti                    text-indent: ;  (красная строка)

Для написания текста заглавными или прописными символами достаточно набрать:

tt                      text-transform: uppercase;
ttc                     text-transform: capitalize;
ttl                     text-transform: lowercase;

Свойства плавающих объектов:

fl                     float: left;
fr                     float: right;

Свойства позиционирования:

po                   position: relative;
poa                  position: absolute;
pof                  position: fixed;
poss                 position: static;

Фоновый цвет и фоновые картинки:

bc                   background-color: #fff;
bi                   background-image: url();
backgr               background-repeat: ;
backgr-n             background-repeat: no-repeat;

В CSS свойств достаточно много и перечислять все не имеет смысла. Если что-то не получилось, вернитесь назад с помощью клавиш Ctrl+Z  и добавьте к коду один – два символа.

Более детально с возможностями муравья можно познакомиться на официальном сайте Emmet. Там же есть ссылка на подробную шпаргалку Cheat Sheet.

В случае необходимости временно отключить часть кода, его можно закомментировать. Для этого выделяем этот кусок кода и в меню Плагины – Emmet  кликаем по команде Toggle comment. Участок кода будет закомментирован и браузер его не увидит.

Небольшая практика, и писать таблицу стилей станет намного легче и быстрее. Если с английским туго, то муравей избавит вас от грамматических ошибок.

рассказать друзьям и получить подарок