Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° Emmet Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для Sublime Text 3



Π― ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ установил Emmet Ρ‡Π΅Ρ€Π΅Π· Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ.

  • Когда я Π½Π°Π±ΠΈΡ€Π°ΡŽ ul ΠΈ наТимаю Tab, я ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ <ul></ul> .
  • Когда я Π½Π°Π±ΠΈΡ€Π°ΡŽ ul.class ΠΈ наТимаю Tab, я ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ ul.body_class , Π½ΠΎ я Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π» <ul></ul> .

Π§Ρ‚ΠΎ я дСлаю Π½Π΅ Ρ‚Π°ΠΊ?

Π― Ρ‡ΠΈΡ‚Π°Π» сообщСния ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Ctl + E вмСсто Tab Π² качСствС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π½ΠΎΠΉ клавиши, Π½ΠΎ это Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π΄Π°Π΅Ρ‚.

sublimetext3 emmet
ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ draney Β  Β  23 августа 2015 Π² 13:58

5 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²


  • Sublime text пСрСопрСдСляСт Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ Emmet

    Моя ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° просто Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Emmet ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Ρ‚Π΅Π³Π°ΠΌΠΈ Sublime Text 3 ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ — Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΠ³Π΄Π° я Π½Π°Π±ΠΈΡ€Π°ΡŽ ‘link’ ΠΈ наТимаю TAB, я Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ: <link rel=stylesheet href=> ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Emmet (.

    ..

  • Sublime Text 2 + Emmet-Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚

    Π£ мСня Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ Emmet Π½Π° Sublime Text 2, ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Ρ„Π°ΠΉΠ»Π΅ CSS, Π½Π°ΠΆΠ°Π² TAB послС: pos:r Π΄ΠΎΠ»ΠΆΠ½ΠΎ привСсти ΠΊ position:relative Но вмСсто этого послС : Π½Π΅Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ поиск ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ мСняСтся ΠΈ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ всС, Ρ‡Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ Π΄ΠΎ : . Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° этот вопрос: Sublime Text 2 + Emmet — Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ…



7

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ вмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ctrl + Space . Если это Π½Π΅ сработаСт, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ привязку ΠΊΠ»ΡŽΡ‡Π΅ΠΉ, помСстив ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ Π² Ρ„Π°ΠΉΠ» привязки ΠΊΠ»ΡŽΡ‡Π΅ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Preferences — > Key Bindings-User :

[
    {"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}
]

Π° Π·Π°Ρ‚Π΅ΠΌ просто ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ "tab" Π½Π° Π»ΡŽΠ±ΡƒΡŽ привязку клавиш, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π»ΠΈ это.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Saad Β  Β  24 августа 2015 Π² 14:58



1

ΠŸΡ€ΠΎΡ‡ΠΈΡ‚Π°Π² ваш вопрос, я установил Emmet Π² Π²Π΅Ρ€ΡΠΈΡŽ Windows Sublime Text 3 сСгодня ΠΈ столкнулся с Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ. Π’ Ρ…ΠΎΠ΄Π΅ поиска Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ я ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ» ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

http:/ / docs.emmet.io / дСйствия / Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ-Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Π°/#ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ-1272517661

Π’ Windows я ΠΎΡ‚ΠΊΡ€Ρ‹Π» настройки Emmet ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄Ρ ΠΊ:

Настройки > ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠŸΠ°ΠΊΠ΅Ρ‚Π° > Π­ΠΌΠΌΠ΅Ρ‚ > Настройки — По Π£ΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ Настройки > ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠŸΠ°ΠΊΠ΅Ρ‚Π° > Π­ΠΌΠΌΠ΅Ρ‚ > ГорячиС Клавиши — По Π£ΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Когда я Π·Π°ΠΊΡ€Ρ‹Π²Π°Π» Ρ„Π°ΠΉΠ»Ρ‹ настроСк, ΠΌΠ½Π΅ Π±Ρ‹Π»ΠΎ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ настроСк. Π― Π½Π°ΠΆΠ°Π» OK, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ, Π° Π·Π°Ρ‚Π΅ΠΌ пСрСзапустил Sublime Text 3.

ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Sublime Text 3 пСрСзагрузился: Π― создал Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» html ΠΈ смог ввСсти ul.class с Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ, ΠΈ ΠΎΠ½ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΠ»ΡΡ Π΄ΠΎ <ul class></ul>

Π—Π°Π±Π°Π²Π½ΠΎ, Π½ΠΎ я Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ сталкивался с Ρ‚Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ с Sublime Π½Π° своСм Mac. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС Π½Π° Mac, Π²Ρ‹ ΠΈΠ΄Π΅Ρ‚Π΅ Π² Настройки > настройки ΠΏΠ°ΠΊΠ΅Ρ‚Π° > Emmet …

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ John Gratton Β  Β  24 августа 2015 Π² 15:20



1

Π― ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡŽ, Ρ‡Ρ‚ΠΎ ΠΊΠ»ΡŽΡ‡ Π­ΠΌΠΌΠ΅Ρ‚Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ — ctrl+e , поэтому добавляю Π΅Π³ΠΎ ΠΊ своСму Key Bindings - User :

{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ wei zhu Β  Β  08 сСнтября 2016 Π² 04:19


  • Sublime Text 3-Emmet shortcut for HTML 5 Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

    НСдавно я скачал sublime text 3 ΠΈ установил emmet. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡΡŒ, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° я ΠΏΠΈΡˆΡƒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΠΊΠΎΠ΄ для HTML 5 ΠΈ наТимаю tab, ΠΎΠ½ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

    Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π±Ρ‹Π» использован Π² sublime text 2, ΠΈ ΠΎΠ½ сработал. Π•ΡΡ‚ΡŒ Π»ΠΈ Ρƒ ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹?

  • sublime text 3 Emmet customization

    Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ST3 с emmet (Windows 7 64-bit) ΠΈ Ρ…ΠΎΡ‡Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ css для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ запроса ipad media. Π― Π½Π΅ ΠΌΠΎΠ³Ρƒ Π½Π°ΠΉΡ‚ΠΈ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° настроСк emmet, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΆΠ΅ я ΠΌΠΎΠ³Ρƒ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ? Π― попытался ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ стандартный Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ST3, Π½ΠΎ ΠΎΠ½ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, поэтому…



1

Π― подСлюсь этим Π² качСствС коммСнтария нСпосрСдствСнно Ρ‚Π°ΠΌ, Π³Π΄Π΅ ΠΌΠ½Π΅ каТСтся, Π½ΠΎ трСбуСтся 50 ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΉ. Π›ΡŽΠ±Ρ‹ΠΌΠΈ путями. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ я сдСлал, Ρ‡Ρ‚ΠΎ заставило мою Ρ€Π°Π±ΠΎΡ‚Ρƒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° мСня.

Из ΠΎΡ‚Π²Π΅Ρ‚Π° @saadq’s сдСлайтС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅: [ //other привязки ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΊΠ»ΡŽΡ‡Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ здСсь, Π° Π·Π°Ρ‚Π΅ΠΌ

{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled. expand_abbreviation"}]}
]

Бмысл Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄ Π½ΠΈΠΌ появились Π΄Ρ€ΡƒΠ³ΠΈΠ΅ привязки, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ любая привязка, ΠΏΠ΅Ρ€Π΅Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰Π°Ρ Π΅Π³ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ пСрСзаписана снова.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Michael Iyke Β  Β  23 мая 2018 Π² 11:20



0

Π― столкнулся с Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ. ΠŸΡ€ΠΎΡΡ‚ΠΎ вставил ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ Π² «Preferences -> Key Bindings β€” User:».

{
  "keys": ["tab"], 
  "command": "expand_abbreviation_by_tab", 

  // put comma-separated syntax selectors for which 
  // you want to expandEmmet abbreviations into "operand" key 
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context": [
    {
      "operand": "SCOPE_SELECTOR", 
      "operator": "equal", 
      "match_all": true, 
      "key": "selector"
    }, 

    // run only if there's no selected text
    {
      "match_all": true, 
      "key": "selection_empty"
    },

    // don't work if there are active tabstops
    {
      "operator": "equal", 
      "operand": false, 
      "match_all": true, 
      "key": "has_next_field"
    }, 

    // don't work if completion popup is visible and you
    // want to insert completion with Tab.
If you want to // expand Emmet with Tab even if popup is visible -- // remove this section { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" }, { "match_all": true, "key": "is_abbreviation" } ] }

Github: см. Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ описаниС

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Ashish Singh Rawat Β  Β  13 августа 2016 Π² 15:46


ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ вопросы:


Π’Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ emmet Π² sublime text

Π’ sublime text с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ emmet я ΠΌΠΎΠ³Ρƒ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Но Ссли я Ρ…ΠΎΡ‡Ρƒ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Π›ΠΎΡ€Π΅ΠΌ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ‚Π΅Π³ послС наТатия клавиши tab я ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠΆΡƒ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ списка ΠΊΠ°ΠΊ ΠΌΠ½Π΅ этого…


Sublime 3 & Emmet

это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π³Π»ΡƒΠΏΡ‹ΠΌ вопросом, Π½ΠΎ я просмотрСл Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈ, ΠΏΠΎΡ…ΠΎΠΆΠ΅, Π½Π΅ ΠΌΠΎΠ³Ρƒ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ. я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ windows 8, я установил emmet Π² свой sublime text 3, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠ» консоль, ΠΈ ΠΎΠ½Π°,…


НС ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π½Π°ΠΉΡ‚ΠΈ Emmet Π² package control Π² Sublime Text 3

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Emmet Ρ‡Π΅Ρ€Π΅Π· Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ Π² Sublime Text 3, Π½ΠΎ всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° я ΠΈΡ‰Ρƒ Π΅Π³ΠΎ, ΠΎΠ½ просто Π½Π΅ появляСтся. Π•ΡΡ‚ΡŒ ΠΈΠ΄Π΅ΠΈ? ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, ΠΌΠ½Π΅ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π°?


Sublime text пСрСопрСдСляСт Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ Emmet

Моя ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° просто Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Emmet ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Ρ‚Π΅Π³Π°ΠΌΠΈ Sublime Text 3 ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ — Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΠ³Π΄Π° я Π½Π°Π±ΠΈΡ€Π°ΡŽ ‘link’ ΠΈ наТимаю TAB, я Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ: <link…


Sublime Text 2 + Emmet-Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚

Π£ мСня Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ Emmet Π½Π° Sublime Text 2, ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Ρ„Π°ΠΉΠ»Π΅ CSS, Π½Π°ΠΆΠ°Π² TAB послС: pos:r Π΄ΠΎΠ»ΠΆΠ½ΠΎ привСсти ΠΊ position:relative Но вмСсто этого послС : Π½Π΅Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ поиск ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ мСняСтся ΠΈ…


Sublime Text 3-Emmet shortcut for HTML 5 Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

НСдавно я скачал sublime text 3 ΠΈ установил emmet. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡΡŒ, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° я ΠΏΠΈΡˆΡƒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΠΊΠΎΠ΄ для HTML 5 ΠΈ наТимаю tab, ΠΎΠ½ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π±Ρ‹Π»…


sublime text 3 Emmet customization

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ST3 с emmet (Windows 7 64-bit) ΠΈ Ρ…ΠΎΡ‡Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ css для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ запроса ipad media. Π― Π½Π΅ ΠΌΠΎΠ³Ρƒ Π½Π°ΠΉΡ‚ΠΈ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° настроСк emmet, Ρ‚Π°ΠΊ…


Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΠ»Π°Π³ΠΈΠ½Π° Sublime text 3 для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ автозаполнСния, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ emmet?

Π― Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой собствСнный ΠΏΠ»Π°Π³ΠΈΠ½, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ emmet, для автоматичСского Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Ρ‚Π΅Π³ΠΎΠ² для html Ρ‚Π΅Π³ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ h3>span .myclass, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ привСсти ΠΊ <div…


Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ CTRL+E Π² Sublime Text Emmet?

Π― Ρ…ΠΎΡ‡Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Emmet-sublime Π² Sublime Text 3,Π½ΠΎ мСня Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π°Ρ€ΡƒΡˆΠ°Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ярлыки. На самом Π΄Π΅Π»Π΅, всС, Ρ‡Ρ‚ΠΎ я Ρ…ΠΎΡ‡Ρƒ, — это ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π½Π°ΠΆΠ°Ρ‚ΡŒ CTRL + e ΠΈ. ..


Как ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Emmet для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ синтаксиса Π² Sublime Text 3?

Π£ мСня Π΅ΡΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ Emmet , установлСнный для Sublime Text 3 Ρ‡Π΅Ρ€Π΅Π· Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ. Π― ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΡŽ Markdown Π² Sublime, ΠΈ я Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ», Ρ‡Ρ‚ΠΎ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ„Π°ΠΉΠ»Ρ‹ Markdown становятся большС,…

НС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Emmet послС обновлСния

Π’ ΠΌΠΎΠ΅ΠΌ случаС послС обновлСния Emmet Π² Sublime Text Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ.

Π”ΠΎ обновлСния Emmet мСня большС устраивал, поэтому я Ρ€Π΅ΡˆΠΈΠ» ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Emmet ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ вСрсии Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ.


ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ, Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρƒ Π±Π»ΠΎΠ³Π° Π΅ΡΡ‚ΡŒ Ρ‚Π΅Π»Π΅Π³Ρ€Π°ΠΌ ΠΊΠ°Π½Π°Π» https://t.me/frontips, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ·Π½Π°Π²Π°Ρ‚ΡŒ ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ Π½ΠΎΠ²Ρ‹Ρ… статСй ΠΈ со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ большС интСрСсной ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ Π±Π»ΠΎΠ³Π° ΠΈ ΠΊΠ°Π½Π°Π»Π° подпиской!

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Ρ‘ΠΌ ΠΊ Ρ‚Π΅ΠΌΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ πŸ˜‰ ΠŸΡ€ΠΈΡΡ‚Π½ΠΎΠ³ΠΎ чтСния!


Π‘Π½Π°Ρ‡Π°Π»Π° удаляСм Emmet ΠΈΠ· Sublime Text — Π² самом Sublime Text Π²Ρ‹Π·Ρ‹Π²Π°Π΅ΠΌ Ctrl+Shift+P, Π²Π²ΠΎΠ΄ΠΈΠΌ rp Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ Package Control: Remove Package, Π΄Π°Π»Π΅Π΅ Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ Emmet ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π΅Π³ΠΎ, послС Ρ‡Π΅Π³ΠΎ Emmet Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ΄Π°Π»Π΅Π½. Π—Π°Ρ‚Π΅ΠΌ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Sublime Text.

Π‘ΠΊΠ°Ρ‡ΠΈΠ²Π°Π΅ΠΌ Π°Ρ€Ρ…ΠΈΠ²: ссылка Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ — Emmet

Π’ Windows 10 ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Sublime Text Π»Π΅ΠΆΠ°Ρ‚ Π² скрытой ΠΏΠ°ΠΏΠΊΠ΅ AppData\Roaming\Sublime Text 3\Packages

Π§Ρ‚ΠΎΠ±Ρ‹ Π΅Π΅ Π½Π°ΠΉΡ‚ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Win+R ΠΈ Π²Ρ‹Π·Ρ‹Π²Π°Π΅ΠΌ %appdata%

Π”Π°Π»Π΅Π΅ ΠΈΡ‰Π΅ΠΌ AppData\Roaming\Sublime Text 3\Packages

Π’ ΠΏΠ°ΠΏΠΊΡƒ Package ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ ΠΏΠ°ΠΏΠΊΡƒ emmet-sublime-master ΠΈΠ· скачанного Π°Ρ€Ρ…ΠΈΠ²Π°

Π—Π°Ρ‚Π΅ΠΌ запускаСм Sublime Text, ΠΏΠ»Π°Π³ΠΈΠ½ ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ установлСн, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ это ΠΌΠΎΠΆΠ½ΠΎ Ссли Π·Π°ΠΉΡ‚ΠΈ Π² ΠΏΡƒΠ½ΠΊΡ‚ мСню Preferences -> Package Settings ΠΈΠ»ΠΈ Ρ‡Π΅Ρ€Π΅Π· Ctrl+Shift+P -> lp -> Package Control: List Packages


Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ любой ΠΏΠ»Π°Π³ΠΈΠ½ для Sublime Text, Ссли ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π΅ устанавливаСтся Π² самом Sublime Text Ρ‡Π΅Ρ€Π΅Π· Ctrl+Shift+P -> pi -> Package Control: Install Package -> НазваниС ΠΏΠ»Π°Π³ΠΈΠ½Π°

ВсС ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π° сайтС https://packagecontrol. io/

На сайтС ΠΈΡ‰Π΅ΠΌ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰ΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈ Π½Π° страницС ΠΏΠ»Π°Π³ΠΈΠ½Π° Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ HOMEPAGE: github.com, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π½Π° страницу ΠΏΠ»Π°Π³ΠΈΠ½Π° Π½Π° Github ΠΈ Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ скачиваСм Π°Ρ€Ρ…ΠΈΠ² ΠΈ ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ Π² ΠΏΠ°ΠΏΠΊΡƒ AppData\Roaming\Sublime Text 3\Packages

Для Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹ Π΅ΡΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ установкС/настройкС Sublime Text


Π”Ρ€ΡƒΠ·ΡŒΡ, ΡΡ‚Π°Ρ€Π°ΡŽΡΡŒ для вас, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚!

ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ, Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ всСго интСрСсного ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ³ΠΎ πŸ˜‰

Telegram — https://t.me/frontips

VK — https://vk.com/frontips

sublime text emmet ΠΏΠ»Π°Π³ΠΈΠ½ для быстрой вСрстки

Плагин emmet для Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° sublime text позволяСт быстро ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ для html ΠΈcss.

Для ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ достаточно Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π²ΠΎΡΠΊΠ»ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π·Π½Π°ΠΊ ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ tab.

РаспакуСтся ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Π°Ρ структура Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

ВСрстка Π΄ΠΈΠ²ΠΎΠ² с emmet

Π‘ emmet ΡƒΠ΄ΠΎΠ±Π½ΠΎ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π΄ΠΈΠ²Ρ‹, для этого достаточно Ρ‡Π΅Ρ€Π΅Π· Ρ‚ΠΎΡ‡ΠΊΡƒ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ класса . Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ span Π½Π΅ Π² ul, Π° Π²Ρ‹ΡˆΠ΅ Π² Π΄Π΅Ρ€Π΅Π²Π΅.

Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ°

Если ΠΌΡ‹ сдСлаСм .item1>(.item2+.item3), Ρ‚ΠΎ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π΄Π²Π° item Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ΄Ρ‚ΠΈ Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

.items1&gt;(.item2+.item3)

.items1&gt;(.item2+.item3)

Π£ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ нумСрация

Если ΠΌΡ‹ Ρƒ li сдСлаСм класс .class Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π·Π½Π°ΠΊ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ $ ΠΈ ΡƒΠΌΠ½ΠΎΠΆΠΈΠΌ * Π½Π° 4. ul>li.class$*4.

Π‘ΡƒΠ΄Π΅Ρ‚ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ класса Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ li.

ИспользованиС Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… скобок

Допустим пишСм ссылка Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ сайт.

Для emmet Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ a[href=’ya.ru’] ΠΈ tab распакуСтся ΠΊΠ°ΠΊ ссылка.

Π‘Π²ΠΎΠ±ΠΎΠ΄Π½Ρ‹ΠΉ тСкст ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π² Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Ρ… скобках.

ПишСм Π΄ΠΈΠ² с классом .text{тСкст}, распакуСм.

a[href=’ya.ru’] .text{тСкст}

a[href=’ya. ru’]

.text{тСкст}

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ сокращСния emmet Π² html

a link script:src img form input btn sect ol+ table+ c

a

link

script:src

img

form

input

btn

sect

ol+

table+

c

ВставляСм Π² sublime text ΠΈ Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сокращСния Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ tab.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ сокращСния emmet Π² css

ВсС сокращСния emmet ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ Π΄ΠΎΠ³Π°Π΄Π°Ρ‚ΡŒΡΡ, Π·Π°ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ.

pos posa t r b l z fl d di dtc v ow cup mt mb p w h mh f fz ta tt lh bg bcg c bd lst ! @f @i cm trf

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

pos

posa

t

r

b

l

z

fl

d

di

dtc

v

ow

cup

mt

mb

p

w

h

mh

f

fz

ta

tt

lh

bg

bcg

c

bd

lst

!

@f

@i

cm

trf

Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ соврСмСнной вёрстки pug + gulp + sass + sublime text + emmet

20 Π€Π΅Π²Ρ€Π°Π»ΡŒ 2020

posted in Вёрстка, БайтостроСниС |

ПослСднСС врСмя ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π΄Π°ΠΆΠ΅ Π½Π° пост Π² Π±Π»ΠΎΠ³Π΅ β€” ΠΏΠΎΠΌΠΈΠΌΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ погрузился Π² Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ соврСмСнной вёрстки.
БобствСнно, случайно наткнулся Π½Π° Π²ΠΈΠ΄Π΅ΠΎ FrontCoder-a БоврСмСнная вСрстка сайта с нуля ΠΈ понСслось …
Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для пСрСваривания ΠžΠ§Π•ΠΠ¬ ΠΌΠ½ΠΎΠ³ΠΎ, ΠΈ вся Π½Π° вСс Π·ΠΎΠ»ΠΎΡ‚Π°!
Одно Π΄Π΅Π»ΠΎ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ ΡΡƒΡ…ΡƒΡŽ Ρ‚Π΅ΠΎΡ€ΠΈΡŽ, Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π΄Π΅Π»ΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ своими Π³Π»Π°Π·Π°ΠΌΠΈ нСпосрСдствСнно процСссинг, ΠΏΡ€ΠΈΡ‡Ρ‘ΠΌ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ вёрстка Π½ΠΎ ΠΈ описаниС Ρ€Π°Π±ΠΎΡ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… инструмСнтов Π²Π΅Π±-программиста, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ информация ΠΏΠΎ ΠΈΡ… установкС ΠΈ настройкС.
Π’Π°ΠΊ ΠΆΠ΅ Π°Π²Ρ‚ΠΎΡ€ Π΄Π°Ρ‘Ρ‚ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ свой Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ настроСнный шаблон для связки gulp + pug + sass
Если ΠΊΡ€Π°Ρ‚ΠΊΠΎ gulp β€” инструмСнт для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ (Π°Π²Ρ‚ΠΎΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° прСпроцСссоров pug sass less slylus ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ…). НСпосрСдствСнно для ΠΊΠΎΠ΄ΠΈΠ½Π³Π° я ΠΏΠΎΠΊΠ° остановился Π½Π° sublime text Ρ‚.ΠΊ. с VS Code я постоянно сталкивался с нСудобствами, послСднСС Ρ‡Ρ‚ΠΎ Π²Ρ‹Π±ΠΈΠ»ΠΎ β€” ΠΊΡ€ΠΈΠ²ΠΎΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ emmet.

БобствСнно, для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Π± программистов Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΊΠ°Π½Π°Π» FrontCoder-a, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ Π΅Π³ΠΎ Π³Ρ€ΡƒΠΏΠΏΡƒ Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅ https://vk.com/frontcoder

Π’Π°ΠΊ ΠΆΠ΅ случайно Π½Π°Ρ‚Ρ‹ΠΊΠ°Π» Π½Π° курсы htmlacademy β€” ΠΏΡ€ΠΈΠΌΠ΅Ρ€ https://htmlacademy. ru/courses/44/run/18
НСмного Ρ‚Π΅ΠΎΡ€ΠΈΠΈ Π±Π΅Π· Π²ΠΎΠ΄Ρ‹ + сразу ΠΆΠ΅ практичСская Ρ‡Π°ΡΡ‚ΡŒ = идСально для Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ обучСния (ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Ρ‘Ρ‚ совсСм совсСм для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²)

PS
МнС Π΅Ρ‰Ρ‘ с GIT ΠΎΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Ρ€ΡƒΠΆΠΈΡ‚ΡŒΡΡ, всё Ρ€ΡƒΠΊΠΈ Π½Π΅ доходят, Π΄Π° особой нСобходимости ΠΏΠΎΠΊΠ° нСт…

PPS
Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ β€” шаблон для Π²ΠΈΠ΄Π΅ΠΎ «БоврСмСнная вСрстка сайта с нуля» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ Π½Π° gulp3 для соврСмСнной вСрсии node.js ΠΈ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚

Π—Π°ΠΏΠΈΡΡŒ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π° on 20.02.2020 at 10:04 and is filed under Вёрстка, БайтостроСниС. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ RSS-Π»Π΅Π½Ρ‚Ρƒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Ρ‚Ρ€Π΅ΠΊΠ±Π΅ΠΊ с Π’Π°ΡˆΠ΅Π³ΠΎ сайта.

Плагин Emmet Sublime — РусскиС Π‘Π»ΠΎΠ³ΠΈ

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π²ΠΎΠ·Π²Ρ‹ΡˆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ emmet ΠΈΠ·-Π·Π° Π½Π΅ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… установочных ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ².
Π‘Π½Π°Ρ‡Π°Π»Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π²ΠΎΠ·Π²Ρ‹ΡˆΠ΅Π½Π½ΠΎΠ΅ Π½Π° ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ Π²Π΅Π±-сайтС вмСсто Π·Π΅Π»Π΅Π½ΠΎΠΉ ΠΈ Π²Π·Π»ΠΎΠΌΠ°Π½Π½ΠΎΠΉ вСрсии Π²Π΅Π±-сайта, Π° Π·Π°Ρ‚Π΅ΠΌ установитС ΠΏΠ»Π°Π³ΠΈΠ½ emmet.

УстанавливаСм ΠΏΠ»Π°Π³ΠΈΠ½ Emmet:
Π² строкС мСню Perferences -> Package Control
ΠΏΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡ‚Π΅ ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅pcip, Найти установочный ΠΏΠ°ΠΊΠ΅Ρ‚ управлСния ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ, поискemmetНаТимаСм Enter ΠΈ ΠΆΠ΄Π΅ΠΌ установки.
ΠŸΠ΅Ρ€Π΅Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π²ΠΎΠ·Π²Ρ‹ΡˆΠ΅Π½Π½ΠΎΠ΅.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ сочСтаниС клавиш ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ctrl + E Π½Π° ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Tab:
Π’ строкС мСню Preferences -> PackageSettings -> Emmet -> KeyBindings -> User Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅
[{"keys": ["tab"], "args": {"action": "expand_abbreviation"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.expand_abbreviation"}]}], Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΈ пСрСзапуститС Π²ΠΎΠ·Π²Ρ‹ΡˆΠ΅Π½Π½ΠΎΠ΅.

Но эту Π²ΠΊΠ»Π°Π΄ΠΊΡƒ настроСк ΠΌΠΎΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ, Π½ΠΎ Π±Π΅Π· отступа. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄ Π² строкС мСню Preferences -> PackageSettings -> Emmet -> KeyBindings -> User ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚:

    // Press the tab indent a sufficient distance
    { "keys": ["tab"], "command": "reindent", "context":
        [
            { "key": "setting. $", "match_all": true }
        ]
    }

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ ΠΈ пСрСзапуститС.

1. Π¨Π°Π³ΠΈ ΠΏΠΎ быстрому созданию ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° HTML5:

Π’Π²Π΅Π΄ΠΈΡ‚Π΅!, Π—Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Tab ΠΈΠ»ΠΈ Ctrl + E, Ρ‡Ρ‚ΠΎΠ±Ρ‹ быстро ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ‰ΡƒΡŽ структуру HTML5.

2. Часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ сочСтания клавиш:

Ctrl + P, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΎΠΊΠ½ΠΎ поиска. К ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ опСрациям относятся: 1. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Ρ„Π°ΠΉΠ»Π° Π² Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, быстро Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ поиск Π² Ρ„Π°ΠΉΠ»Π΅, 2. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ @ ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова, Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ имя Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² Ρ„Π°ΠΉΠ»Π΅, 3. Π’Π²Π΅Π΄ΠΈΡ‚Π΅: ΠΈ числа, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ строкС ΠΊΠΎΠ΄Π° Π² Ρ„Π°ΠΉΠ»Π΅, 4. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ # ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ имя ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ.
Ctrl + Enter, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡƒΡΡ‚ΡƒΡŽ строку ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ строкС Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строки.
Ctrl + Shift + Enter, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡƒΡΡ‚ΡƒΡŽ строку ΠΊ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ строкС Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строки.
Ctrl + Z, ΠΎΡ‚ΠΌΠ΅Π½Π°.
Ctrl + Y, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΡ‚ΠΌΠ΅Π½Ρƒ.
Ctrl +] ΠΈΠ»ΠΈ клавиша Tab, отступ Π²ΠΏΡ€Π°Π²ΠΎ.
Ctrl + [ΠΈΠ»ΠΈ Shift + Tab, отступ Π²Π»Π΅Π²ΠΎ.
Ctrl + Shift + V, ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ отступ ΠΏΡ€ΠΈ вставкС.
Alt + F3, Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ΅ слово.

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ руководство — Scotch.io

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π­ΠΌΠΌΠ΅Ρ‚?

Π‘ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ сайта Emmet: Β«Emmet — это ΠΏΠ»Π°Π³ΠΈΠ½ для ΠΌΠ½ΠΎΠ³ΠΈΡ… популярных тСкстовых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс HTML ΠΈ CSSΒ». ΠšΠΎΡ€ΠΎΡ‚ΠΊΠΎ ΠΈ ΠΏΠΎ Π΄Π΅Π»Ρƒ. Emmet ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ваш Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс ΠΏΡ€ΠΈ создании сайтов. Emmet Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π½ΡŒΡˆΠ΅ назывался Zen Coding для Ρ‚Π΅Ρ… ΠΈΠ· вас, ΠΊΠΎΠΌΡƒ Π·Π½Π°ΠΊΠΎΠΌ синтаксис.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅!

ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² ΠΊΠΎΠ½Π΅Ρ† этой строки ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ . Π›Π΅Π³ΠΊΠΈΠΉ сыр!

Bonus : Π½Π°ΠΆΠΌΠΈΡ‚Π΅ tab нСсколько Ρ€Π°Π·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ HTML-ΠΊΠΎΠ΄, созданный Emmet.

ul.my-list> li * 3> a.item $

Emmet ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΎΡ‚ Sublime Text (наш Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ) Π΄ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Ace. ΠœΡ‹ сосрСдоточимся Π½Π° использовании Emmet Π² Sublime, Π½ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π²ΠΎ всСх направлСниях.

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Emmet

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ всС способы использования Emmet, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ Emmet Github Available Actions. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ способы Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ Π­ΠΌΠΌΠ΅Ρ‚Π° (ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ Π² Ρ„Π°ΠΉΠ»Π΅ синтаксиса HTML):

  • Π’ΠΊΠ»Π°Π΄ΠΊΠ° Π Π°Π·Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ : Π²Π²Π΅Π΄ΠΈΡ‚Π΅ свой ΠΊΠΎΠ΄ Emmet ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ
  • Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ сокращСниС : ctrl + alt + Π²Π²Π΅Π΄ΠΈΡ‚Π΅

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ€Π°Π·Π²Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΊΠΎΠ΄, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΆΠ°Ρ‚ΡŒ , Π²ΠΊΠ»Π°Π΄ΠΊΡƒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· свой HTML-ΠΊΠΎΠ΄ ΠΊΠΎ всСм частям, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΌ Π²Π²ΠΎΠ΄Π°.Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ быстрый способ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ HTML.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Emmet ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, насколько быстро ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ‚ наш Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠΌ сСбя ΠΈ посмотрим, насколько быстро ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ вСсь сайт.

Π§Ρ‚ΠΎ ΠΌΡ‹ строим

ΠœΡ‹ создадим 4 Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»Π° , ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅Π»ΠΎ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ функциями Emmet.

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ Tailwind CSS с нуля
  • Basic HTML Foundation (Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ HTML ΠΈ настраиваСмыС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹)
  • Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ (нумСрация элСмСнтов, тСкст, ΡƒΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты)
  • Jumbotron (Π±Ρ€Π°Ρ‚ΡŒΡ ΠΈ сСстры)
  • Π”Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ (Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ°)

HTML

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ всю эту страницу, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ ΠΈ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ вСсь HTML ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. Π₯отя Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² этом Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎΠ³ΠΎ, ΠΌΠ½Π΅ нравится Π΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ каТдая миллисСкунда, сэкономлСнная Π² процСссС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, составляСт ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’ ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ², ΠΌΡ‹ всС стараСмся Π±Ρ‹Ρ‚ΡŒ эффСктивными, Π²Π΅Ρ€Π½ΠΎ?

Π­Ρ‚Π° дСмонстрация ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° Bootstrap 3.

 



     Π‘Π΅Π·ΡƒΠΌΠ½ΠΎ быстрый HTML 

    


Π‘Π΅Π·ΡƒΠΌΠ½ΠΎ быстрый HTML

БыстрСС, Ρ‡Π΅ΠΌ Π»Π΅Π², ΠΏΡ€Π΅ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ газСль.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅β€¦

Π›ΡŒΠ²Ρ‹

ΠžΡ‡Π΅Π½ΡŒ быстро. ОсобСнно ΠΊΠΎΠ³Π΄Π° Π³ΠΎΠ»ΠΎΠ΄Π΅Π½.

Π­ΠΌΠΌΠ΅Ρ‚

Π•Ρ‰Π΅ быстрСС.ОсобСнно Π² Ρ€ΡƒΠΊΠ°Ρ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°.

ΠœΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» ΠΈ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Emmet с Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 1 строкой .

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ нас с Ρ‡Π΅ΠΌ-Ρ‚ΠΎ Π½ΠΎΠ²Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π½Π°ΠΌ Π­ΠΌΠΌΠ΅Ρ‚. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Emmet ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ Π²Π΅Ρ‰ΠΈ, ΠΊΠ°ΠΊ Π΄Π΅Ρ‚Π΅ΠΉ , Π±Ρ€Π°Ρ‚ΡŒΠ΅Π² ΠΈ сСстСр , тСкст , с ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ΠΌ числа ΠΈ Π΄Π°ΠΆΠ΅ настраиваСмыС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ .

НаписаниС HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Emmet

HTML Starter

(сокращСния, настраиваСмыС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹)

Emmet ΠΈΠΌΠ΅Π΅Ρ‚ сокращСния, ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ Π½Π° сниппСты. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ html: 5 ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML 5.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅!

  1. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ html: 5 ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ .

    • ПослС </code> Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π°ΡˆΡƒ ссылку Π½Π° Bootstrap, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ: link [rel = «stylesheet» href = «// netdna.ul.nav.navbar-nav> li.menu — $ 3</p><p> Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ ΡƒΡ‚ΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π½ΠΎ ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ освоитС ΠΊΠΎΠ΄ Emmet, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ»Π΅Ρ‚Π΅Ρ‚ΡŒ Π½Π΅Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ.</p><h3><span class="ez-toc-section" id="Jumbotron"> Jumbotron </span></h3><small> (Π±Ρ€Π°Ρ‚ΡŒΡ ΠΈ сСстры) </small></h3><p> Нашим основным фокусом здСсь Π±ΡƒΠ΄Π΅Ρ‚ использованиС Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π° Π±Ρ€Π°Ρ‚ΡŒΠ΅Π² ΠΈ сСстСр (<code> + </code>). Благодаря этому ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ элСмСнты Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ.</p><p> div.jumbotron.text-center> h2 + p + a # go-button.btn.btn-dangerous</p><h3><span class="ez-toc-section" id="i-11"> Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ ΠΎ Π΄Π²ΡƒΡ… столбцах </span></h3><small> (Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ°) </small></h3><p> Π’ этом Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΌΡ‹ сосрСдоточимся Π½Π° Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ΅ <code> () </code>.Π­Ρ‚ΠΎ позволяСт Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ ΠΊΠΎΠ΄Π° вмСстС.</p><p> div.row.text-center> (div.col-sm-4> div.info-box> span.glyphicon.glyphicon-fire + h3 {Lions} + p) + (div.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.stack.imgur.com/H4lgS.png' /><noscript><img src='/800/600/https/i.stack.imgur.com/H4lgS.png' /></noscript> col-sm-8> div .info-box> span.glyphicon.glyphicon-send + h3 {Emmet} + p)</p>.<h3><span class="ez-toc-section" id="i-12"> Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ </span></h3><p> Π’ΠΎΡ‚ Ρ‚Π°ΠΊ, Ρƒ нас Π΅ΡΡ‚ΡŒ вся HTML-страница <strong> всСго Π·Π° 5 строк ΠΊΠΎΠ΄Π° </strong>. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π±Ρ‹Π»ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ интСрСсно, Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π΄Π°ΠΆΠ΅ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ это Π΄ΠΎ 1 строчки!</p><h4><span class="ez-toc-section" id="i-13"> Бонус! </span></h4><p> Π”Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм это Π² 1 строку.</p><p> html: 5> div.container> (nav.navbar.navbar-inverse> div.navbar-header> a.navbar-brand {Crazy Fast} + ul.nav.navbar-nav> li * 2> a.menu- $ {ΠŸΡƒΠ½ΠΊΡ‚ мСню $}) + (div.jumbotron.text-center> h2 {Π‘Π΅Π·ΡƒΠΌΠ½ΠΎ быстрый HTML} + p + a # go-button.btn.btn-dangerous {ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅β€¦}) + (div.row.text- Ρ†Π΅Π½Ρ‚Ρ€> (div.col-sm-4> div.info-box> span.glyphicon.glyphicon-fire + h3 {Lions} + p) + (div.col-sm-8> div.info-box> span. glyphicon.glyphicon-send + h3 {Emmmet} + p))</p><h3><span class="ez-toc-section" id="i-14"> Π”Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΏΠ΅Ρ€Π΅Π΄ </span></h3><p> Π­Ρ‚ΠΎ лишь Ρ‡Π°ΡΡ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, Π½Π° Ρ‡Ρ‚ΠΎ способСн Π­ΠΌΠΌΠ΅Ρ‚.Π’ Π½Π΅ΠΌ Π΄Π°ΠΆΠ΅ Π΅ΡΡ‚ΡŒ сокращСния для CSS. Π― Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΡƒ Emmet Cheat Sheet, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ всС Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ этот инструмСнт.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/img.my7life.ru/upload_image/screen/h_1507502912_6842764_53fc5a5128.jpg' /><noscript><img src='/800/600/https/img.my7life.ru/upload_image/screen/h_1507502912_6842764_53fc5a5128.jpg' /></noscript></p><p> ΠŸΠΎΠ½Ρ€Π°Π²ΠΈΠ»Π°ΡΡŒ эта ΡΡ‚Π°Ρ‚ΡŒΡ? ΠŸΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° @chris__sev Π² Twitter</p><h2><span class="ez-toc-section" id="_HTML_Sublime"> Как ΠΏΠΈΡΠ°Ρ‚ΡŒ свСрхбыстрый HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Sublime </span></h2><p> Как Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, ΠΌΡ‹ всСгда стараСмся ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ поисковый инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π½Π°ΠΌ Π² этом.</p><p> Если Π²Ρ‹ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΏΠΈΡˆΠ΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ HTML ΠΈ CSS, Ρ‚ΠΎ этот пост для вас.</p><p> По сути, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ тСкстовых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ. А сниппСты — это Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ способ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ Π²Π°ΡˆΡƒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ. Π£ всСх Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΉ Π΅ΡΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠ΅ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½Ρ‹Π΅ ΠΊΠ°ΠΌΠ½ΠΈ: сначала Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ сниппСт, ΠΈ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ ΠΈΡ… Π²ΠΎ врСмя выполнСния.</p><p> Π£ всСх Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΉ Π΅ΡΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠ΅ ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½Ρ‹Π΅ ΠΊΠ°ΠΌΠ½ΠΈ: сначала Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ сниппСт, ΠΈ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ ΠΈΡ… Π²ΠΎ врСмя выполнСния.</p><p> Emmet Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ идСю сниппСтов Π½Π° ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½ΠΎΠ²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ CSS-ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ выраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ динамичСски Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅ Π² сокращСнии.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/camo.githubusercontent.com/6e29c4974bd477a61274666886fcbd8ae2775024/687474703a2f2f692e696d6775722e636f6d2f4c566852396a712e706e67' /><noscript><img src='/800/600/https/camo.githubusercontent.com/6e29c4974bd477a61274666886fcbd8ae2775024/687474703a2f2f692e696d6775722e636f6d2f4c566852396a712e706e67' /></noscript></p><p> Emmet Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², Ρ‡Π΅ΠΉ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс зависит ΠΎΡ‚ HTML / XML ΠΈ CSS, Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ с языками программирования.</p><p> Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ нСсколько интСрСсных совСтов ΠΏΠΎ быстрому написанию HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Emmet.</p><p> Π’ этом руководствС я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Sublime Π² качСствС тСкстового Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°, Π½ΠΎ Emmet Ρ‚Π°ΠΊΠΆΠ΅ доступСн для ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… выпусков, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Adobe DreamWeaver, TextMate, Eclipse ΠΈ Notepad ++.</p><h3><span class="ez-toc-section" id="_Emmet-3"> Установка Emmet </span></h3><p> Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π­ΠΌΠΌΠ΅Ρ‚ ΠΎΡ‚ΡΡŽΠ΄Π°.Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Sublime text, ΠΊΠ°ΠΊ я, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ прямо ΠΈΠ· установщика ΠΏΠ°ΠΊΠ΅Ρ‚Π° Sublime.</p><p> Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ любой ΠΏΠ°ΠΊΠ΅Ρ‚ Sublime, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ установщик ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ². Для установки ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² <strong> Tools -> Install Package Control </strong> ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ, ΠΈ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ установлСн автоматичСски. Когда Π²Ρ‹ снова Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚Π΅ установку управлСния ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ T <strong> ools-> command palette </strong> ΠΈ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ Install Package.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/src.onlinedown.net/d/file/p/2019-01-03/bb26039b0ff87ce1cd60356c1dfc3827.png' /><noscript><img src='/800/600/https/src.onlinedown.net/d/file/p/2019-01-03/bb26039b0ff87ce1cd60356c1dfc3827.png' /></noscript> <br/> Когда Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Β«Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚Β», Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части ΠΎΠΊΠ½Π° Sublime, ΠΈ откроСтся Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ поиска.</p><p> Π—Π΄Π΅ΡΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ любой ΠΏΠ»Π°Π³ΠΈΠ½ Sublime. НайдитС Β«Π­ΠΌΠΌΠ΅Ρ‚Β» ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½Π΅ΠΌΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ.</p><p> <b> ΠŸΠ Π˜ΠœΠ•Π§ΠΠΠ˜Π•- </b> Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… клавиша Tab ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для раскрытия Ρ‚Π΅Π³ΠΎΠ². Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ тСкстовых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅ встроСнныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.</p><h3><span class="ez-toc-section" id="1_HTML"> 1. Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML </span></h3><p> Π§Ρ‚ΠΎ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Π½Π°Ρ‡Π½Π΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ любой HTML-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. Π’Ρ‹ ΠΏΠΈΡˆΠ΅Ρ‚Π΅ сам ΠΊΠΎΠ΄ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΠ»ΠΈ ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π΅Π³ΠΎ ΠΎΡ‚ΠΊΡƒΠ΄Π° ΡƒΠ³ΠΎΠ΄Π½ΠΎ. Но Emmet прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π»Π΅Π³ΠΊΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²ΡƒΡŽ структуру HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.</p><p> Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, просто Π½Π°Π±Ρ€Π°Π²! (Π’ΠΎΡΠΊΠ»ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π·Π½Π°ΠΊ) + Tab ΠΈΠ»ΠΈ doc + Tab ΠΈΠ»ΠΈ HTML: 4t + Tab ΠΈ HTML doc Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄ Π²Π°ΠΌΠΈ</p><p></p><h3><span class="ez-toc-section" id="2_HTML"> 2. НаписаниС простого Ρ‚Π΅Π³Π° HTML </span></h3><p> Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ простой HTML, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для Ρ‚Π΅Π³Π° div, ΠΌΡ‹ просто Π½Π°Π±ΠΈΡ€Π°Π΅ΠΌ div ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Tab. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания любого Ρ‚Π΅Π³Π°.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/itman.in/wp-content/uploads/2015/10/sublime-text-emmet.png' /><noscript><img src='/800/600/https/itman.in/wp-content/uploads/2015/10/sublime-text-emmet.png' /></noscript></p><p></p><h3><span class="ez-toc-section" id="3"> 3. ΠΠ°Π·Π½Π°Ρ‡ΡŒΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ элСмСнту </span></h3><p> ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ любой Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ class, id, src ΠΈ Ρ‚. Π”., Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Emmet-</p><p> Если ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Id ΠΈΠ»ΠΈ класс, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ # ΠΈΠ»ΠΈ.ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π² CSS.</p><p></p><p> Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Ссли Π²Ρ‹ просто Π½Π°Π±Π΅Ρ€Π΅Ρ‚Π΅ #firstdiv, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΡƒΠ΄Π΅Ρ‚ создан элСмСнт div. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ элСмСнт, Π²Π²Π΅Π΄ΠΈΡ‚Π΅ section # firstelement</p>.<p></p><p> Но Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² скобках []. ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src Ρ‚Π΅Π³Ρƒ img, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ</p><p></p><h4><span class="ez-toc-section" id="4"> 4. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ элСмСнта </span></h4><p> РодствСнный элСмСнт относится ΠΊ элСмСнту Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ ΡƒΡ€ΠΎΠ²Π½Π΅ влоТСнности.Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ родствСнников ΠΈΠ»ΠΈ ΠΏΠ°Ρ€Π°Π»Π»Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ + ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами.</p><p></p><h3><span class="ez-toc-section" id="5-2"> 5. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ элСмСнта / Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ </span></h3><p> Emmet ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ синтаксис, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ CSS, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ элСмСнт Π² CSS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π·Π½Π°ΠΊΠ°>.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.ytimg.com/vi/JTHM077EHbI/maxresdefault.jpg' /><noscript><img src='/800/600/https/i.ytimg.com/vi/JTHM077EHbI/maxresdefault.jpg' /></noscript> Π’ Emmet ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚ΠΎΡ‚ ΠΆΠ΅ синтаксис для создания Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ элСмСнта.</p><p></p><h3><span class="ez-toc-section" id="6"> 6. Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ° </span></h3><p> Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта Π±Ρ‹Π»ΠΎ нСсколько элСмСнтов, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ этого, сгруппировав ΠΈΡ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ().</p><p></p><h3><span class="ez-toc-section" id="7"> 7.Π£ΠΌΠ½ΠΎΠΆΠ΅Π½ΠΈΠ΅ </span></h3><p> Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ элСмСнт нСсколько Ρ€Π°Π·, это Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ нСсколько элСмСнтов со Π·Π½Π°ΠΊΠΎΠΌ Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠΈ *.</p><p> ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ 6 div с class = ”main”, ΠΌΡ‹ просто Π½Π°Π±ΠΈΡ€Π°Π΅ΠΌ — .main * 6</p><p></p><h3><span class="ez-toc-section" id="8"> 8. АвтоматичСская нумСрация </span></h3><p> АвтоматичСская нумСрация ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ имя с автоматичСским ΠΏΡ€ΠΈΡ€Π°Ρ‰Π΅Π½ΠΈΠ΅ΠΌ Π½ΠΎΠΌΠ΅Ρ€Π°. ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ синтаксис этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ — Π·Π½Π°ΠΊ Π΄ΠΎΠ»Π»Π°Ρ€Π° $.</p><p></p><p> <b> Π’Π°ΠΊΠΆΠ΅ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚: </b></p><blockquote><p> Essential Sublime Text Plugins для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²</p></blockquote><h3><span class="ez-toc-section" id="9"> 9.Π€ΠΈΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст </span></h3><p> Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ„ΠΈΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст, копируя ΠΈΠ· lorem ΠΈΠ»ΠΈ lipsum, ΠΈΠ»ΠΈ ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ мСста, Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ этого Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Emmet.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/4.bp.blogspot.com/-j491sO3gckU/V8bYPPvXzvI/AAAAAAAAAdw/O3GuCeqmpOgh4OowOqVPPXv5dgMQNofDACLcB/w1200-h630-p-k-no-nu/sublime.png' /><noscript><img src='/800/600/https/4.bp.blogspot.com/-j491sO3gckU/V8bYPPvXzvI/AAAAAAAAAdw/O3GuCeqmpOgh4OowOqVPPXv5dgMQNofDACLcB/w1200-h630-p-k-no-nu/sublime.png' /></noscript> Π­ΠΌΠΌΠ΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ для вас Ρ„ΠΈΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст lorem ipsum. ΠΌΡ‹ просто пишСм lorem. Он Π±ΡƒΠ΄Π΅Ρ‚ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ 5 Π΄ΠΎ 7 строк тСкста Ipsum.</p><p> Π’ Emmet ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, сколько слов Π½ΡƒΠΆΠ½ΠΎ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π‘ΠΊΠ°ΠΆΠΈΡ‚Π΅, 7, Π·Π°Ρ‚Π΅ΠΌ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ lorem7</p><p></p><h3><span class="ez-toc-section" id="10"> 10. Π―Ρ€Π»Ρ‹ΠΊ ссылки </span></h3><p> Если Ρƒ вас Π΅ΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ, rss ΠΈΠ»ΠΈ внСшний Ρ„Π°ΠΉΠ» CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² свой Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ»ΠΎΠ²ΠΊΠΈ со ссылками для ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ быстрого написания.</p><ul><li> Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ css-ссылку: css</li><li> Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ favicon- ссылку: favicon</li></ul><p></p><h3><span class="ez-toc-section" id="i-15"> Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ </span></h3><p> Emmet — Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ инструмСнт для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ продуктивности Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ трудностями ΠΏΡ€ΠΈ запускС, Π½ΠΎ ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π²ΠΎΠ·ΡŒΠΌΠ΅Ρ‚Π΅ Π΅Π³ΠΎ Π² Ρ€ΡƒΠΊΠΈ, это ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ Π²Π°ΡˆΡƒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. Π’Ρ‹ смоТСтС ΠΏΠΈΡΠ°Ρ‚ΡŒ HTML ΠΈ CSS быстрСС, Ρ‡Π΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡ€Π΅ΠΆΠ΄Π΅.</p><p><h4></h4><em> Π›ΡŽΠ΄ΠΈ Π’Π°ΠΊΠΆΠ΅ Ρ‡ΠΈΡ‚Π°ΡŽΡ‚ </em></h4></p><h2><span class="ez-toc-section" id="_Emmet_Sublime_text_Keksus"> ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ΄Π° Emmet Π² Sublime text — Keksus </span></h2><p> Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π² Sublime menu <strong> Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ: Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ </strong>, Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Emmet ΠΈ установитС Π΅Π³ΠΎ.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.ytimg.com/vi/1-A5Sy5M4eA/maxresdefault.jpg' /><noscript><img src='/800/600/https/i.ytimg.com/vi/1-A5Sy5M4eA/maxresdefault.jpg' /></noscript> <br/> Π‘Π½Π°Ρ‡Π°Π»Π° Π²Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΊΠΎΠ΄ Π² синтаксисС <strong> Emmet </strong>, послС Ρ‡Π΅Π³ΠΎ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ <strong> Tab </strong> Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅ ΠΈ просмотритС Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.</p><p> <strong> ul.nav </strong></p><p> <strong> li {Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст} * 2 </strong></p><p><li> тСкст</li><li> тСкст</li></p><table><tr><td data-settings="show"></td><td><p><li> Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст</li></p><p><li> Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст</li></p></td></tr></table><p> <strong> ΡƒΠ».nav> li {Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст} * 2 </strong></p><p><ul><li> тСкст</li><li> тСкст</li></ul></p><table><tr><td data-settings="show"></td><td><p><ul></p><p><li> Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст</li></p><p><li> Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст</li></p><p></ul></p></td></tr></table><p> <strong> a {тСкст ссылки} </strong></p><p> <strong> a [href = #] {тСкст ссылки} </strong></p><p> <a href="#"> тСкст ссылки </a></p><table><tr><td data-settings="show"></td><td><p> <a href="#"> тСкст ссылки </a></p></td></tr></table><p> <strong> li> a [href = #] {тСкст ссылки} * 3 </strong></p><p><li> <a href="#"> тСкст ссылки </a> <a href="#"> тСкст ссылки </a> <a href="#"> тСкст ссылки </a></li></p><table><tr><td data-settings="show"></td><td><p><li></p><p> <a href="#"> тСкст ссылки </a></p><p> <a href="#"> тСкст ссылки </a></p><p> <a href="#"> тСкст ссылки < / a></p><p></li></p></td></tr></table><p> <strong> ΡƒΠ».<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i1.wp.com/web-revenue.ru/wp-content/uploads/2017/06/package-control.gif' /><noscript><img src='/800/600/https/i1.wp.com/web-revenue.ru/wp-content/uploads/2017/06/package-control.gif' /></noscript> nav> li * 3> a [href = #] {тСкст ссылки $} </strong></p><p><ul><li> <a href="#"> тСкст ссылки1 </a></li><li> <a href="#"> тСкст ссылки2 </a></li><li> <a href="#"> тСкст ссылки3 </a></li></ul></p><table><tr><td data-settings="show"></td><td><p><ul></p><p><li> <a href="#"> тСкст ссылки1 </a></li></p><p><li> <a href="#"> тСкст ссылки2 </a> </ li ></p><p><li> <a href="#"> тСкст ссылки3 </a></li></p><p></ul></p></td></tr></table><p> <strong>.menu> ul.nav> li * 3> a [href = #] {тСкст ссылки $} </strong></p><p><div><ul><li> <a href="#"> тСкст ссылки1 </a></li><li> <a href="#"> тСкст ссылки2 </a></li><li> <a href="#"> тСкст ссылки3 </a></li></ul></div></p><table><tr><td data-settings="show"></td><td><p><div></p><p><ul></p><p><li> <a href="#"> тСкст ссылки1 </a></li></p><p><li> <a href="#"> тСкст ссылки2 </ a></li></p><p><li> <a href="#"> тСкст ссылки3 </a></li></p><p></ul></p><p></div></p></td></tr></table><p> <strong>.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.ytimg.com/vi/PI9_XGKoVP8/maxresdefault.jpg' /><noscript><img src='/800/600/https/i.ytimg.com/vi/PI9_XGKoVP8/maxresdefault.jpg' /></noscript> мСню> .ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ + .Π²Ρ‚ΠΎΡ€ΠΎΠΉ </strong></p><p><div><div></div><div></div></div></p><table><tr><td data-settings="show"></td><td><p><div></p><p><div></div></p><p><div></div></p><p></div></p></td></tr></table><p> <strong> .мСню> .Π±Π»ΠΎΠΊ * 2 </strong></p><p><div><div></div><div></div></div></p><table><tr><td data-settings="show"></td><td><p><div></p><p><div></div></p><p><div></div></p><p></div></p></td></tr></table><p> <strong>.menu> .block * 2> li {Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст} * 2 </strong></p><p><div><div><li> тСкст</li><li> тСкст</li></div><div><li> тСкст</li><li> тСкст</li></div></div></p><table><tr><td data-settings="show"></td><td><p><div></p><p><div></p><p><li> Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст</li></p><p><li> Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст</li></p><p></div></p><p><div></p><p><li> Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ тСкст</li></p><p><li> Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ тСкста</li></p><p></div></p><p></div></p></td></tr></table><p> <strong>.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/sun9-42.userapi.com/hQQaqbqclRVykk4eO-c5mxVaevcBj2N8s1cSjA/Em_CMgpu9IY.jpg' /><noscript><img src='/800/600/https/sun9-42.userapi.com/hQQaqbqclRVykk4eO-c5mxVaevcBj2N8s1cSjA/Em_CMgpu9IY.jpg' /></noscript> menu> .block * 2> ul.nav> li * 3> a [href = #] {тСкст ссылки $} </strong></p><p><div><div><ul><li> <a href="#"> тСкст ссылки1 </a></li><li> <a href="#"> тСкст ссылки2 </a></li><li> <a href="#"> тСкст ссылки3 </a></li></ul></div><div><ul><li> <a href="#"> тСкст ссылки1 </a></li><li> <a href="#"> тСкст ссылки2 </a></li><li> <a href="#"> тСкст ссылки3 </a></li></ul></div></div></p><table><tr><td data-settings="show"></td><td><p><div></p><p><div></p><p><ul></p><p><li> <a href="#"> тСкст ссылки1 </a></li></p><p><li> <a href = "#" > тСкст ссылки2 </a></li></p><p><li> <a href="#"> тСкст ссылки3 </a></li></p><p></ul></p><p></div></p><p><div ></p><p><ul></p><p><li> <a href="#"> тСкст ссылки1 </a></li></p><p><li> <a href="#"> тСкст ссылки2 </a> </ li></p><p><li> <a href="#"> тСкст ссылки3 </a></li></p><p></ul></p><p></div></p><p></div></p></td></tr></table><h2><span class="ez-toc-section" id="25"> 25 совСтов, ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² ΠΈ ярлыков </span></h2><p> Sublime Text 3 (ST3) — послСдняя вСрсия ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… тСкстовых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ, ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊΠ°ΠΌΠΈ ΠΈ программистами.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvd3c0LnNpbmFpbWcuY24vbGFyZ2UvN2NjODI5ZDNndzFlbHp1Zmw0bDI3ajIwbTgwNm90OXYuanBn.jpg' /><noscript><img src='/800/600/https/bbsmax.ikafan.com/static/L3Byb3h5L2h0dHAvd3c0LnNpbmFpbWcuY24vbGFyZ2UvN2NjODI5ZDNndzFlbHp1Zmw0bDI3ajIwbTgwNm90OXYuanBn.jpg' /></noscript> Он доступСн для Mac, Windows ΠΈ Linux, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ бСсплатно Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.</p><p> Π˜Π·Π²Π»Π΅ΠΊΠΈΡ‚Π΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·Ρƒ ΠΈΠ· ST3 с 25 совСтами ΠΈ ΠΏΡ€ΠΈΠ΅ΠΌΠ°ΠΌΠΈ, содСрТащимися Π² этом ΠΏΠΎΠ»Π½ΠΎΠΌ руководствС для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π£Π·Π½Π°ΠΉΡ‚Π΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Sublime Text 3, Π½ΠΎ ΠΈ ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… ΠΏΠ°ΠΊΠ΅Ρ‚Π°Ρ…, ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… сочСтаниях клавиш ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΌ Π΄Ρ€ΡƒΠ³ΠΎΠΌ.</p><p> 1. Настройки ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ</p><p> По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ST3 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ТСсткиС Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π΄Π»ΠΈΠ½ΠΎΠΉ 4 символа. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ большиС Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Π΅ отступы ΡΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Π²Π°ΡˆΡƒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π²ΠΏΡ€Π°Π²ΠΎ.Π― Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ всСм Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ это Π² свои ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ настройки (<code> Sublime Text 3 => Preferences => Settings - User </code>):</p><pre> { "draw_white_space": "всС", "ΠΏΡ€Π°Π²ΠΈΡ‚Π΅Π»ΠΈ": [80], "tab_size": 2, "translate_tabs_to_spaces": true } </pre><p> Π­Ρ‚ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ ТСсткиС табуляции Π² ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹, Π΄Π΅Π»Π°Π΅Ρ‚ отступы Π΄Π»ΠΈΠ½ΠΎΠΉ всСго Π΄Π²Π° символа, ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π»ΠΈΠ½Π΅ΠΉΠΊΡƒ Π½Π° ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΊΡƒ 80 символов (Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌ) ΠΈ добавляСт ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ².<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/4.bp.blogspot.com/-uqqkOebwKwk/VEjNV_hkLLI/AAAAAAAAAmA/UGfocwkvH9Y/s1600/how-to-install-emmet-on-sublime-text.jpg' /><noscript><img src='/800/600/https/4.bp.blogspot.com/-uqqkOebwKwk/VEjNV_hkLLI/AAAAAAAAAmA/UGfocwkvH9Y/s1600/how-to-install-emmet-on-sublime-text.jpg' /></noscript> Π’ΠΎΡ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² настройки, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ настройку срСды ST3.<br/></p><p> 2. ПанСль ΠΊΠΎΠΌΠ°Π½Π΄</p> ΠŸΠ°Π»ΠΈΡ‚Ρ€Π° ΠΊΠΎΠΌΠ°Π½Π΄<p> ST3 ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ дСйствия Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ синтаксис ΠΊΠΎΠ΄Π° для ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π°), Π½Π΅ снимая ΠΏΠ°Π»ΡŒΡ†Π° с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹. Π₯отя ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ ΠΊΠΎΠΌΠ°Π½Π΄ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΡ‹ΡˆΠΈ Ρ‡Π΅Ρ€Π΅Π· <code> Tool => Command Palette </code>, Π»ΡƒΡ‡ΡˆΠΈΠΉ способ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ подсказку Command Palette — ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сочСтаниС клавиш <code> CTRL / ⌘-SHIFT-P </code>.</p><p></p><p> <em> Π‘Π½ΠΈΠΌΠΎΠΊ экрана ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ ΠΊΠΎΠΌΠ°Π½Π΄ Π² Sublime Text 3 </em></p><p> 3.ПанСли Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ пространства столбцов ΠΈ строк</p><p> Π―Π²Π»ΡΠ΅Ρ‚Π΅ΡΡŒ Π»ΠΈ Π²Ρ‹ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊΠΎΠΌ с нСсколькими ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ? ST3, ΠΊΠ°ΠΊ ΠΈ любой Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, позволяСт Π²Π°ΠΌ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ рядом, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ„Π°ΠΉΠ»ΠΎΠΌ HTML ΠΈ Π΅Π³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ CSS:</p><p></p><p> Для просмотра Π΄Π²ΡƒΡ… столбцов (Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ…) Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ярлык <code> ALT-UP-2 </code> (ПК) ΠΈΠ»ΠΈ <code> OPTION-⌘-2 </code> (Mac).<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.ytimg.com/vi/FUaFDo95acg/maxresdefault.jpg' /><noscript><img src='/800/600/https/i.ytimg.com/vi/FUaFDo95acg/maxresdefault.jpg' /></noscript> Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ послСдний ΡˆΡ‚Ρ€ΠΈΡ… Π½Π° Β«3Β» ΠΈΠ»ΠΈ Β«4Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‚Ρ€ΠΈ ΠΈΠ»ΠΈ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΏΠ°Π½Π΅Π»ΠΈ соотвСтствСнно.ИспользованиС Β«5Β» Π΄Π°Π΅Ρ‚ сСтку ΠΈΠ· 4 ΠΏΠ°Π½Π΅Π»Π΅ΠΉ.</p><p> Для просмотра двухрядных (Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ…) ΠΏΠ°Π½Π΅Π»Π΅ΠΉ рядом ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ярлык <code> SHIFT-ALT-UP-2 </code> (ПК) ΠΈΠ»ΠΈ <code> SHIFT-OPTION-⌘-2 </code> (Mac). Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ послСдний ΡˆΡ‚Ρ€ΠΈΡ… Π½Π° Β«3Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‚Ρ€ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ соотвСтствСнно.</p><p></p><p> <em> Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ†, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠΏΠΎΠ»Π°ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€ΠΈΠ·Π½Π°ΠΊΠ° Π³Ρ€ΡƒΠΏΠΏΡ‹ ST3 </em></p><p> Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ панСль дальшС, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ST3 Β«Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ». Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <code> CTRL-K, SHIFT-CTRL-UP </code> (ПК) ΠΈΠ»ΠΈ <code> ⌘-K, SHIFT-⌘-UP </code> (Mac), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Π³Ρ€ΡƒΠΏΠΏΡƒ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ.</p><p> 4. ΠŸΠ°ΠΊΠ΅Ρ‚Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ</p><p> ST3 поставляСтся с мноТСством Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Β«ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈΒ», Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Β«ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ²Β» — ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², написанных большим сообщСством ST3. Π‘Π°ΠΌΡ‹ΠΉ простой способ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ эти ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ — ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Package Control. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Package Control Π½Π° ST3, слСдуйтС инструкциям ΠΏΠΎ установкС Π½Π° Π²Π΅Π±-сайтС Package Control.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/farm2.static.flickr.com/1660/25478819674_dbec0466aa_z.jpg' /><noscript><img src='/800/600/https/farm2.static.flickr.com/1660/25478819674_dbec0466aa_z.jpg' /></noscript></p><p> Если Package Control установлСн ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ, Π²Ρ‹ смоТСтС ΠΈΡΠΊΠ°Ρ‚ΡŒ дСйствия Package Control Π² ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ ΠΊΠΎΠΌΠ°Π½Π΄ (<code> CTRL / ⌘-SHIFT-P </code>):</p><p></p><p> <em> Доступ ΠΊ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡŽ ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ ΠΊΠΎΠΌΠ°Π½Π΄ </em></p><p> ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚ Sublime Text 3</p><p> <em> ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. УстановитС эти ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Package Control, ΠΎΡ‚ΠΊΡ€Ρ‹Π² панСль ΠΊΠΎΠΌΠ°Π½Π΄ (CTRL / ⌘-SHIFT-P), Π²Ρ‹Π±Ρ€Π°Π² Β«Package Control: Install PackageΒ» ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² поиск ΠΏΠ°ΠΊΠ΅Ρ‚Π° ΠΏΠΎ Π΅Π³ΠΎ ΠΈΠΌΠ΅Π½ΠΈ.</em></p><p> 5. Π£Π»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ</p><p> Sidebar Enhancements Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ST3, позволяя Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ дСйствия с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ ΠΈ ΠΏΠ°ΠΏΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ нСдоступны. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ смоТСтС Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ эти дСйствия ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ ΠΊΠΎΠΌΠ°Π½Π΄ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΏΠ°ΠΊΠ΅Ρ‚Π°.</p><p></p><p> <em> Π Π°ΡΡˆΠΈΡ€Π΅Π½Π½Π°Ρ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ с ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ </em></p><p> 6. Π­ΠΌΠΌΠ΅Ρ‚</p><p> Emmet Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ HTML Π·Π° счСт использования ярлыков Π½Π° основС сСлСкторов CSS. Π§Ρ‚ΠΎ это ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚? Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ сами Π² Π³ΠΈΡ„ΠΊΠ΅ Π½ΠΈΠΆΠ΅:</p><p> <br/> <br/> Π­ΠΌΠΌΠ΅Ρ‚ Π½Π΅ останавливаСтся Π½Π° HTML-Ρ‚Π΅Π³Π°Ρ…, классах ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°Ρ….<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/img.my7life.ru/upload_image/screen/h_1522494422_9804243_f698b0b7ac.png' /><noscript><img src='/800/600/https/img.my7life.ru/upload_image/screen/h_1522494422_9804243_f698b0b7ac.png' /></noscript> ВСкст Lorem ipsum — это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚. Часто ΠΎΠ½ΠΈ ΠΎΠ±Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ ΠΊ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρƒ lorem ipsum, Π½ΠΎ с Π­ΠΌΠΌΠ΅Ρ‚ΠΎΠΌ просто Π²Π²Π΅Π΄ΠΈΡ‚Π΅ <code> lorem </code> ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Tab. Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ количСство слов-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»Π΅ΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 100 слов lorem ipsum)? ВмСсто этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <code> lorem100 </code>.</p><p> Emmet Ρ‚Π°ΠΊΠΆΠ΅ распространяСтся Π½Π° CSS. НапримСр, прСфиксы поставщиков CSS всСгда ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, поэтому Emmet позволяСт Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сокращСниС <code> -bdrs </code> для установки радиуса Π³Ρ€Π°Π½ΠΈΡ†Ρ‹:</p><p></p><p> 7. Git</p><p> ΠŸΠ°ΠΊΠ΅Ρ‚ Git позволяСт Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Git (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€,Π³Ρ€Π°ΠΌΠΌ. Β«Git DiffΒ» ΠΈΠ»ΠΈ Β«Git BlameΒ») прямо ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ ΠΊΠΎΠΌΠ°Π½Π΄ ST3.</p><p></p><p> НС Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Git ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ? ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π²Π²ΠΎΠ΄Π½Ρ‹ΠΉ Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊ General Assembly <br/> «Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Git ΠΈ GithubΒ».</p><p> 8. GitGutter</p><p> GitGutter ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ нСзафиксированныС добавлСния, измСнСния ΠΈ удалСния рядом с Π½ΠΎΠΌΠ΅Ρ€Π°ΠΌΠΈ строк ST3:</p><p></p><p> 9. SASS</p><p> ST3 Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ собствСнного синтаксиса SASS ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ², Π½ΠΎ ΠΏΠ°ΠΊΠ΅Ρ‚ ST3 SASS добавляСт ΠΈΡ….<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.ytimg.com/vi/6OIyOTr0OQU/maxresdefault.jpg' /><noscript><img src='/800/600/https/i.ytimg.com/vi/6OIyOTr0OQU/maxresdefault.jpg' /></noscript> ΠΠ°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ рСкомСндуСтся для ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² интСрфСйса ΠΈ программистов Π½Π° Ruby on Rails:</p><p></p><p> 10. Π›ΡƒΡ‡ΡˆΠ΅ CoffeeScript</p><p> Π’Π°ΠΊΠΆΠ΅ Π½Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ синтаксиса ΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² для CoffeeScript Π² ST3, поэтому этот ΠΏΠ°ΠΊΠ΅Ρ‚ заполняСт этот ΠΏΡ€ΠΎΠ±Π΅Π»:</p><p></p><p> 11. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки OSX</p><p> Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Mac ΠΈ Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π», тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Sublime Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ инструмСнт ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки <code> subl </code>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ прямо ΠΈΠ· Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»Π°.Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ Π² своСм Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ этот ярлык:</p><pre> ln -s "/ Applications / Sublime Text.app/Contents/SharedSupport/bin/subl" ~ / bin / subl </pre><p> Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Homebrew ΠΈΠ»ΠΈ <code> / usr / local / bin </code> находится Π² вашСм $ PATH, ΠΊΠΎΠΌΠ°Π½Π΄Π° для запуска:</p><pre> ln -s "/ Applications / Sublime Text.app/Contents/SharedSupport/bin/subl" / usr / local / bin / subl </pre><p></p><p> БочСтания клавиш</p><p> Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ сочСтаний клавиш Π² ST3 ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ вас ΠΈΠ· ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Sublime Π² экспСрта ΠΏΠΎ Sublime.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/1.bp.blogspot.com/-nKyluAhoMBw/WZD3XBOkcgI/AAAAAAAAAUA/PRe0cB_FLo0tlfEgQfwTeNXgk-k-jdLKgCLcBGAs/s1600/13.png' /><noscript><img src='/800/600/https/1.bp.blogspot.com/-nKyluAhoMBw/WZD3XBOkcgI/AAAAAAAAAUA/PRe0cB_FLo0tlfEgQfwTeNXgk-k-jdLKgCLcBGAs/s1600/13.png' /></noscript> Π’ΠΎΡ‚ нСсколько Ρ„Π°Π²ΠΎΡ€ΠΈΡ‚ΠΎΠ²:</p><p> 12. НСсколько курсоров</p><p> ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅ курсоры — отличная ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ Sublime Text. Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ Π½Π°Π±ΠΈΡ€Π°Ρ‚ΡŒ тСкст Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… мСстах ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, экономя врСмя Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ. Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ нСсколько курсоров, Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ курсор Π½Π° слово, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΈ Π½Π°ΠΆΠΈΠΌΠ°ΠΉΡ‚Π΅ <code> CTRL / ⌘-D </code>, ΠΏΠΎΠΊΠ° Π½Π΅ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚Π΅ всС Π½ΡƒΠΆΠ½Ρ‹Π΅ слова. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ нСсколько курсоров с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <code> CTRL / ⌘-MOUSECLICK </code> Π²ΠΎ всСх мСстах, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ курсор.</p><p></p><p> 13.ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ Ρ‡Π΅ΠΌΡƒ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ</p><p> Подобно ΠΏΠ°Π»ΠΈΡ‚Ρ€Π΅ ΠΊΠΎΠΌΠ°Π½Π΄, ST3 ΠΈΠΌΠ΅Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Goto Anything (произносится ΠΊΠ°ΠΊ Β«ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈΒ»), которая позволяСт ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ Ρ„Π°ΠΉΠ»Ρƒ, строкС ΠΈΠ»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°. Π’Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ панСль поиска Goto Anything с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <code> CTRL / ⌘-P </code>. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ, Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ имя Ρ„Π°ΠΉΠ»Π°. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Π½Π΅Ρ‡Π΅Ρ‚ΠΊΠΈΠΉ поиск, поисковый запрос Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ‚ΠΎΡ‡Π½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½ΠΈ, ΠΈ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ:</p><p></p><p> 14.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/1.bp.blogspot.com/-Y61_nmAAgdk/YAWf4LOigZI/AAAAAAAADPY/V6QbRFc3qNgf-JdTriSp5vLV2KCLdmtDACLcBGAsYHQ/s558/2-min.JPG' /><noscript><img src='/800/600/https/1.bp.blogspot.com/-Y61_nmAAgdk/YAWf4LOigZI/AAAAAAAADPY/V6QbRFc3qNgf-JdTriSp5vLV2KCLdmtDACLcBGAsYHQ/s558/2-min.JPG' /></noscript> ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ строкС Π² Ρ„Π°ΠΉΠ»Π΅</p><p> Goto Anything — это Π½Π΅ просто ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ, ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ вас ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ строкС Π² Ρ„Π°ΠΉΠ»Π΅.Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ строкС Π² Π½ΠΎΠ²ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅, просто Π²Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ Goto Anything ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π΄Π²ΠΎΠ΅Ρ‚ΠΎΡ‡ΠΈΠ΅, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт Π½ΠΎΠΌΠ΅Ρ€ строки (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, <code>: 18 </code> для строки 18). Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ строкС Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅, Π²Π²Π΅Π΄ΠΈΡ‚Π΅ имя Ρ„Π°ΠΉΠ»Π°, Π·Π°Ρ‚Π΅ΠΌ Π΄Π²ΠΎΠ΅Ρ‚ΠΎΡ‡ΠΈΠ΅ ΠΈ Π½ΠΎΠΌΠ΅Ρ€ строки:</p><p></p><p> 15. ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ Π² Ρ„Π°ΠΉΠ»Π΅</p><p> Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ класса, ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΈΠ»ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² Ρ„Π°ΠΉΠ»Π΅, Goto Anything ΠΈΠΌΠ΅Π΅Ρ‚ синтаксис, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρƒ ΠΊ строкС. ВмСсто двоСточия Goto Definition ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ <code> @ </code>. Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ список всСх ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π² Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌ Π²Π°ΠΌΠΈ Ρ„Π°ΠΉΠ»Π΅, ΠΈ, Π½Π°Π±Ρ€Π°Π² имя ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Π½Π°ΠΆΠ°Π² ENTER, Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚Π΅ ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡƒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ:</p><p></p><p> 16.Π Π΅ΠΆΠΈΠΌ Π±Π΅Π· ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΡ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ²</p><p> Иногда Π±Ρ‹Ρ‚ΡŒ самым ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΊΠΎΠ΄Π΅Ρ€ΠΎΠΌ ΠΈΠ»ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ интСрфСйса ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ всСх ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΡ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ². Никаких Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΎΠΊΠΎΠ½, Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΠΈ мСню.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i0.wp.com/cracx.com/wp-content/uploads/2015/09/Sublime-Text-3-Keygen-Serial-Number-Full-Free-Download.png' /><noscript><img src='/800/600/https/i0.wp.com/cracx.com/wp-content/uploads/2015/09/Sublime-Text-3-Keygen-Serial-Number-Full-Free-Download.png' /></noscript> ΠŸΡ€Π΅Π²ΠΎΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ простой способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π΅ΠΆΠΈΠΌΠ° Π±Π΅Π· ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΡ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ². ЗапуститС Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ <code> SHIFT-F11 </code> (ПК) ΠΈΠ»ΠΈ <code> ⌘-CTRL-SHIFT-F </code> (Mac):</p><p></p><p> 17. Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ / ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль</p><p> Боковая панСль ΠΏΠΎΠ»Π΅Π·Π½Π° для отобраТСния Π²Π°ΡˆΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ структуры ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ΠΎΠ², Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС мСста Π² ΠΎΠΊΠ½Π΅ для ΠΊΠΎΠ΄Π°.ИспользованиС сочСтания клавиш <code> CTRL / ⌘-K, CTRL / ⌘-B </code> (Π² этом порядкС) ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ боковая панСль Π±ΡƒΠ΄Π΅Ρ‚ доступна для просмотра, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Ρƒ вас ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎ нСсколько Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ»ΠΈ ΠΏΠ°ΠΏΠΊΠ°.</p><p> 18. Быстро ΠΏΡ€ΠΎΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ свой ΠΊΠΎΠ΄</p><p> Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ совСт, Ссли Π²Ρ‹ постоянно ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ свой ΠΊΠΎΠ΄ ΠΈΠ»ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ провСряСтС, ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ΄Π° влияСт Π½Π° ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. Π§Ρ‚ΠΎΠ±Ρ‹ быстро ΠΏΡ€ΠΎΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² ST3, Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΊΠΎΠ΄ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <code> CTRL / ⌘- / </code>. Если Π²Ρ‹ Π½Π΅ выдСляСтС ΠΊΠΎΠ΄, ΠΏΡ€ΠΈ использовании этого ярлыка Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π° вся строка.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/hiksolo.files.wordpress.com/2015/01/1.png' /><noscript><img src='/800/600/https/hiksolo.files.wordpress.com/2015/01/1.png' /></noscript></p><p></p><p> Π’Ρ‹Π±ΠΎΡ€ тСкста</p><p> ΠœΡ‹ ΡƒΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ слово (<code> CTRL / ⌘-D </code>), Π½ΠΎ Π² ST3 Π΅ΡΡ‚ΡŒ нСсколько Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΎΠΏΡ†ΠΈΠΉ Π²Ρ‹Π±ΠΎΡ€Π°.</p><p> 19. Π’Ρ‹Π±ΠΎΡ€ всСй строки</p><p> Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ всю Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ строку: <code> CTRL / ⌘-L </code>.</p><p> 20. Π’Ρ‹Π±ΠΎΡ€ ΠΊΠΎΠ΄Π° с Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ отступом</p><p> Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ вСсь ΠΊΠΎΠ΄ с Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΌ отступом: <code> CTRL / ⌘-SHIFT-J </code>.</p><p></p><p> 21. Π’Ρ‹Π±ΠΎΡ€ всСго Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° HTML</p><p> Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ всС Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Ρ‚Π΅Π³Π° HTML: <code> CTRL / ⌘-SHIFT-A </code></p><p></p><p> 22.Быстрый отступ</p><p> Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΎΡΠΎΠ·Π½Π°ΡŽΡ‚ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ отступов, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ ваш ΠΊΠΎΠ΄ Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²Ρ‹ΠΌ ΠΈ Π»Π΅Π³ΠΊΠΈΠΌ для понимания. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ отступ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ строки, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <code> CTRL / ⌘-] </code>. Для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ отступа ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ другая квадратная скобка (<code> CTRL / ⌘- [</code>).</p><p></p><p> 23. Вставка с отступом</p><p> Если Π²Ρ‹ ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅Ρ‚Π΅ / Π²Ρ‹Ρ€Π΅Π·Π°Π΅Ρ‚Π΅ ΠΊΠΎΠ΄ с отступом ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ отступа ΠΏΡ€ΠΈ вставкС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <code> CTRL / ⌘-Shift-V </code> для вставки с отступом.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/generalassemb.ly/blog/wp-content/uploads/2013/11/sublime-text-3-nathos-sass.png' /><noscript><img src='/800/600/https/generalassemb.ly/blog/wp-content/uploads/2013/11/sublime-text-3-nathos-sass.png' /></noscript></p><p> 24. ΠšΠΎΠΌΠΌΡƒΡ‚Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ</p><p> Π’Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ писали ΠΊΠΎΠ΄ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ строки Π½Π΅ Π² порядкС? Π’ ST3 Π΅ΡΡ‚ΡŒ ярлык для экономии Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π·Π°Π΄Π°Π½Π½ΡƒΡŽ строку Π²Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ· Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅. <code> CTRL-SHIFT-UP </code> (ПК) ΠΈΠ»ΠΈ <code> CTRL-⌘-UP </code> (Mac) ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ линию Π²Π²Π΅Ρ€Ρ…, Π° <code> CTRL-SHIFT-DOWN </code> (ПК) ΠΈΠ»ΠΈ <code> CTRL-⌘-DOWN </code> (Mac) ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ линию Π²Π²Π΅Ρ€Ρ…. линия Π²Π½ΠΈΠ·.</p><p></p><p> 25. Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ строк</p><p> На Ρ‚ΠΎΡ‚ случай, ΠΊΠΎΠ³Π΄Π° строка ΠΊΠΎΠ΄Π° Π½Π΅ Π²Ρ‹ΡˆΠ»Π° ΠΈΠ· строя, Π° Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ просто ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ, Π² ST3 Π΅ΡΡ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ярлык для удалСния строк Π±Π΅Π· нСобходимости Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒ всю строку.<code> CTRL-SHIFT-K </code> (ПК ΠΈ Mac) ΡƒΠ΄Π°Π»ΠΈΡ‚ Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ строку, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ находится курсор.</p><p> — <br/> Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ освоили Sublime Text 3, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° написании ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΈ ΡΡ‚Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ интСрфСйса. ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ½Π»Π°ΠΉΠ½-Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ проводят экспСрты-ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ°ΠΌ программирования, бизнСса ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/info10ribuan.files.wordpress.com/2015/01/66.jpg' /><noscript><img src='/800/600/https/info10ribuan.files.wordpress.com/2015/01/66.jpg' /></noscript> <br/> НачнитС Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ с нашСго иммСрсивного курса Β«Π˜Π½ΠΆΠ΅Π½Π΅Ρ€ΠΈΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния».</p><p> Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π½Π°ΡˆΠΈΡ… курсах программирования</p><p dir="ltr"> Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΠΈ GA, прСдстоящиС события ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.</p><h2><span class="ez-toc-section" id="_emmet_sublime_text_2_3_windows"> Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ emmet sublime text 2 3 windows </span></h2><p> Emmet — это бСсплатный ΠΏΠ»Π°Π³ΠΈΠ½ для популярных Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΎΡ‡Π΅Π½ΡŒ быстро ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ HTML ΠΈ CSS. Emmet доступСн практичСски для всСх популярных Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΊΠΎΠ΄Π°. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Emmet Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΊΠΎΠ΄Π° SUblimeText ΠΈ Brackets.</p><p> Если Π²Ρ‹ Π½Π΅ установили Brackets ΠΈΠ»ΠΈ SublimeText, скачайтС эти Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΊΠΎΠ΄Π°.</p><p> <strong> <br/> Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° SublimeText <br/> Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ бСсплатно скобки бСсплатный Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° <br/> </strong></p><h3><span class="ez-toc-section" id="i-16"> Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π­ΠΌΠΌΠ΅Ρ‚ Π² скобки </span></h3><p> ΠŸΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ запускС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΊΠΎΠ΄Π° скобок Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ экран.Π€Π°ΠΉΠ» index.html ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ «ΠΠ°Ρ‡Π°Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹» Π² скобках.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/forum.sublimetext.com/uploads/default/original/3X/9/0/90b43356f7ab173795805851b023826d1fb0c007.png' /><noscript><img src='/800/600/https/forum.sublimetext.com/uploads/default/original/3X/9/0/90b43356f7ab173795805851b023826d1fb0c007.png' /></noscript> Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ рСсурс для изучСния HTML-Ρ‚Π΅Π³ΠΎΠ². Π’ этом Ρ„Π°ΠΉΠ»Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ мноТСство HTML-Ρ‚Π΅Π³ΠΎΠ² Π² дСйствии.</p><p></p><p> Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ <strong> Extension Manager </strong> Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ. Π—Π½Π°Ρ‡ΠΎΠΊ Live Preview. Если Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ Live Preview, ваш Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ HTML-Ρ„Π°ΠΉΠ» откроСтся Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ HTML Π² скобках ΠΈ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ измСнСния Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome.</p><p> ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ <strong> Extension Manager </strong> ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Emmet Π² ΠΏΠΎΠ»Π΅ поиска. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Emmet. По Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ установки создайтС Π½ΠΎΠ²Ρ‹ΠΉ HTML-Ρ„Π°ΠΉΠ» ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ„Π°ΠΉΠ» index.html Brackets.</p><p> Π£Π΄Π°Π»ΠΈΡ‚Π΅ вСсь HTML-ΠΊΠΎΠ΄ ΠΈΠ· Ρ„Π°ΠΉΠ»Π° index.html. Π²Π²Π΅Π΄ΠΈΡ‚Π΅ <code>! </code> ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ TAB, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ. Π’ΠΎΡΠΊΠ»ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π·Π½Π°ΠΊ <code>! </code> — это базовая Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° Π­ΠΌΠΌΠ΅Ρ‚Π° для создания Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΠΌΠ΅Ρ‚ΠΊΠΈ для HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.</p><p> Если Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π±Π°Π·ΠΎΠ²ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, ΠΊΠΎΠ³Π΄Π° Π½Π°Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ <code>! </code> ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ, это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ установили Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Emmet Π² скобках.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/camo.githubusercontent.com/74d48cb9ba09fd64e164250104c4e1d0e7ab1667/687474703a2f2f692e696d6775722e636f6d2f4e6679326f366a2e706e67' /><noscript><img src='/800/600/https/camo.githubusercontent.com/74d48cb9ba09fd64e164250104c4e1d0e7ab1667/687474703a2f2f692e696d6775722e636f6d2f4e6679326f366a2e706e67' /></noscript></p><p> ΠœΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ большС ΠΎΠ± Emmet ΠΏΠΎΠ·ΠΆΠ΅, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Emmet Π² SublimeText.</p><h4><span class="ez-toc-section" id="_Emmet_SublimeTex"> ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Emmet Π² SublimeTex </span></h4><p> Установка Emmet Π² SublimeText — это Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠ»Π³ΠΈΠΉ процСсс. Π‘Π½Π°Ρ‡Π°Π»Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ диспСтчСр ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ² для SublimeText. Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ диспСтчСр ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΎΡ‡Π΅Π½ΡŒ просто: Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ со страницы диспСтчСра ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ² SublimeText ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ этот ΠΊΠΎΠ΄ Π² SublimeText.</p><p> Код отличаСтся для SublimeText вСрсии 2 ΠΈ 3. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΊΠΎΠ΄ для вашСй вСрсии, запуститС SublimeText ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ <kbd> Ctrl + `</kbd> ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² <strong> View> Show Console </strong>.Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° Π²Π½ΠΈΠ·Ρƒ SublimeText. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ сюда ΠΊΠΎΠ΄, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Enter, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ установку диспСтчСра ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ².</p><p> ΠΊΠΎΠ΄ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ для управлСния ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ SublimeText</p><p> По Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ установки пСрСзапуститС SublimeText. ПослС пСрСзапуска SublimeText ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² «Настройки»> Β«Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈΒ» ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚Β». НайдитС ΠΈ установитС Emmet.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/1.bp.blogspot.com/-bjSyKPhfWqw/YAW8BcSxv6I/AAAAAAAADP8/RhItpp-xYb8Mfy4IhmItNpWbLV17uarvACLcBGAsYHQ/s526/5-min.JPG' /><noscript><img src='/800/600/https/1.bp.blogspot.com/-bjSyKPhfWqw/YAW8BcSxv6I/AAAAAAAADP8/RhItpp-xYb8Mfy4IhmItNpWbLV17uarvACLcBGAsYHQ/s526/5-min.JPG' /></noscript> ПослС ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ установки Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ страницу успСха.</p><p> Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ придСтся снова ΠΏΠ΅Ρ€Π΅Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ SublimeText послС установки Emmet.Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» index.html ΠΈΠ»ΠΈ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° HTML Π² SublimeText. Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ всС Ρ„Π°ΠΉΠ»Ρ‹ Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ SublimeText.</p><p> ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» index.html Ρ‚ΠΈΠΏΠ° <code>! </code> ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ HTML для HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ вашСй HTML-страницы Π½Π° Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ подходящСС.</p><h4><span class="ez-toc-section" id="_Emmet-4"> Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Emmet </span></h4><p> Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Emmet для написания ΠΊΠΎΠ΄Π° HTML ΠΈ CSS ΠΎΡ‡Π΅Π½ΡŒ просто. Π’Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ символы. Π‘ Emmet Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΈ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ строку ΠΊΠΎΠ΄Π°, ΠΈΠ·Π²Π΅ΡΡ‚Π½ΡƒΡŽ ΠΊΠ°ΠΊ Emmet Abreviation, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠ°Ρ‚ΡŒ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ своС сокращСниС.</p><p> Если Π²Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π½Π°Π±Π΅Ρ€Π΅Ρ‚Π΅ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ, Emmet сгСнСрируСт для вас ΠΏΠΎΠ»Π½ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ HTML ΠΈΠ»ΠΈ CSS. АббрСвиатура Π­ΠΌΠΌΠ΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΉ ΠΈ простой ΠΈΠ»ΠΈ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ ΠΈ слоТной. Π₯ΠΎΡ‚ΠΈΡ‚Π΅ Π²Π΅Ρ€ΡŒΡ‚Π΅, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π΅Ρ‚, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ для ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ½ΠΎΠ³ΠΎΠΎΠ±Π»ΠΎΠΌΠΎΡ‡Π½ΠΎΠΉ слоТной Π²Π΅Π±-страницы HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ СдинствСнной Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Emmet.</p><p> Tab — это клавиша-Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΊΠΎΠ΄Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, SublimeText ΠΈ Brackets) для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Emmet. ΠŸΡ€ΠΈ использовании Emmet Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹Π΅ HTML-Ρ‚Π΅Π³ΠΈ. просто Π²Π²Π΅Π΄ΠΈΡ‚Π΅ h2 ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Tab. Emmet сгСнСрируСт для вас <code><h2></h2> </code>.</p><p> ΠŸΡ€ΠΎΡΡ‚ΠΎ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ любоС имя Ρ‚Π΅Π³Π° HTML (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, h3, h4, h5, p, nav, main. Aside ΠΈ Ρ‚. Π”.) И Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Tab, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ.</p><h4><span class="ez-toc-section" id="HTML-_Emmet"> HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Emmet </span></h4><p> Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ простых сокращСний emmet, доступных для создания Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ для ссылок CSS, Π°Ρ‚ΠΎΠΌΠ°, RSS-ΠΊΠ°Π½Π°Π»Π° ΠΈΠ»ΠΈ скриптов.</p><p> На ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ Π½ΠΈΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ сокращСния Emmet ΠΈ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ.</p><p></p><p> Π‘Π΅Π»Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ сокращСния Emmet, Π° ΠΏΠΎΠ΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ сокращСниСм Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ эти сокращСния Emmet Π±ΡƒΠ΄ΡƒΡ‚ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.Π­Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ быстрый ΠΈ простой способ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ HTML.</p><p> Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Ρ‚ΡŒ всю HTML-ΠΏΠΎΠΌΠ΅Ρ‚ΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ HTML ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ создаСтС Π½ΠΎΠ²Ρ‹ΠΉ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.</p><h4><span class="ez-toc-section" id="i-17"> символов Π­ΠΌΠΌΠ΅Ρ‚Π° </span></h4><p> Π­ΠΌΠΌΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ мноТСство символов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ простыС ΠΈΠ»ΠΈ слоТныС сокращСния. Π’ΠΎΡ‚ нСсколько основных символов Π­ΠΌΠΌΠ΅Ρ‚Π°.</p><p> <strong>. символ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° </strong> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ классов.</p><pre> <code>. ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ div.wrapper.success header.siteHeader </code> </pre><p> Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° HTML</p><pre> <code> <div> </div> <div> </div> <header> </header> </code> </pre><p> <strong> # символ </strong> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ div с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌΠΈ.</p><p> Π­ΠΌΠΌΠ΅Ρ‚ АббрСвиатура</p><pre> <code> #container div # wrapper.success Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ # siteHeader </code> </pre><p> HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°</p><pre> <code> <div> </div> <div> </div> <header> </header> </code> </pre><p> <strong> + Π·Π½Π°ΠΊ </strong> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания родствСнных элСмСнтов</p><p> Π­ΠΌΠΌΠ΅Ρ‚ АббрСвиатура</p><pre> <code> Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» + основной ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ + Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» </code> </pre><p> HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°</p><pre> <code> <header> </header> <div> </div> <footer> </footer> </code> </pre><p> <strong>> большС Ρ‡Π΅ΠΌ </strong> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов.Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» </code> </pre><p> HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°</p><pre> <code> <Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> <nav> </nav> </header> <основной> <article> </article> </main> <footer> </footer> </code> ΠΈΠ»ΠΈ ΠΆΠ΅ <Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> <nav> <ul> </ul> </nav> </header> <основной> <article> </article> <aside> </aside> </main> <footer> </footer> </pre><p> <strong> () символы </strong>, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ.</p><p> ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Π­ΠΌΠΌΠ΅Ρ‚Π°:</p><pre> <code> (Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> навигация) (главная> ΡΡ‚Π°Ρ‚ΡŒΡ) (Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ») </code> </pre><p> HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°</p><pre> <code> <Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> <nav> </nav> </header> <основной> <article> </article> </main> <footer> </footer> </code> </pre><p> <strong> * символ </strong> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для умноТСния</p><p> Π­ΠΌΠΌΠ΅Ρ‚ АббрСвиатура</p><pre> <code> Π»ΠΈ * 3 </code> </pre><pre> <code> <li> </li> <li> </li> <li> </li> </code> </pre><p> ΠΈΠ»ΠΈ</p><pre> Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> nav> ul> li * 3> a <code/> </pre><pre> <code> <Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ> <nav> <ul> <li> <a href=""> </a> </li> <li> <a href=""> </a> </li> <li> <a href=""> </a> </li> </ul> </nav> </header> </code> </pre><p> <strong> Π­ΠΌΠΌΠ΅Ρ‚ для ссылок </strong></p><p> Π­ΠΌΠΌΠ΅Ρ‚ для ссылок</p><pre> <code> Π° ссылка a: ссылка [title = ""] a [href = "http: // google.com "] a [href = "http://google.com" title = "visit google.com"] </code> </pre><p> HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°</p><pre> <code> <a href=""> </a> <a href="http://"> </a> <a href="http://" title=""> </a> <a href="http://google.com"> </a> <a href="http://google.com" title="visit google.com"> </a> </code> </pre><p>, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅, я использовал символы [] для прСдоставлСния Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.</p><p> НадСюсь, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Emmet для быстрого ΠΈ простого создания HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ.Π― постарался всС ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ Π½Π° простых ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…. ΠŸΡ€ΠΎΡΡ‚ΠΎ установитС Emmet ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ всС Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° Π΄Π΅Π»Π°Π΅Ρ‚ ΠΌΡƒΠΆΡ‡ΠΈΠ½Ρƒ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ ΠΎΠ²Π»Π°Π΄Π΅ΠΉΡ‚Π΅ Π­ΠΌΠΌΠΌΠ΅Ρ‚ΠΎΠΌ.</p><h5><span class="ez-toc-section" id="i-18"> Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ рСсурсы </span></h5><p> Π’ΠΎΡ‚ список Π΄Ρ€ΡƒΠ³ΠΈΡ… рСсурсов для изучСния ΠΈ освоСния Π­ΠΌΠΌΠ΅Ρ‚Π°.</p><p> Π‘ΠΎΠ»Π΅Π΅ быстрый Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс: ОсвоСниС Π­ΠΌΠΌΠ΅Ρ‚Π°, сСрия ΠΈΠ· 4 частСй, Π’Π°Ρ…ΠΈΡ€ Ваус</p><p> ΠŸΠΈΡˆΠΈΡ‚Π΅ HTML ΠΈ CSS быстрСС с Emmet, Π’ΠΎΡ€ΠΈΠΊ Ѐирдаус, Hongkiat</p><p> 7 Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… HTML-совСтов ΠΏΠΎ экономии Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Emmet ΠΎΡ‚ Π”ΠΆΠΎΡˆΡƒΠ° ДТонсона Π½Π° designshack</p><p> Sublime Text для Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π½Π° CSSTricks</p><p> <strong> Π‘ΠΎΠ»Π΅Π΅ быстрый Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс HTML ΠΈ CSS с Emmet + Bootstrap </strong> БСсплатный видСокурс Udemy</p><p> Если Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ вопросы, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΡ… Π² коммСнтариях.</p><p><h4></h4><em> БвязанныС </em></h4></p><h2><span class="ez-toc-section" id="Sublime_Text_Emmet_Sass"> Sublime Text, Emmet ΠΈ Sass Π£Ρ‡Π΅Π±Π½ΠΎΠ΅ пособиС </span></h2><h5><span class="ez-toc-section" id="_Noble_Desktop"> ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ элСктронных ΠΊΠ½ΠΈΠ³ Noble Desktop </span></h5><ul><li> Доступный для поиска, с ΠΆΠΈΠ²Ρ‹ΠΌ тСкстом, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ.</li><li> ВСрсия для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ.</li><li> Π³Ρ€Π°Ρ„ΠΈΠΊΠ° для элСктронных ΠΊΠ½ΠΈΠ³ — Ρ†Π²Π΅Ρ‚Π½Ρ‹Π΅ (ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹Π΅ ΠΊΠ½ΠΈΠ³ΠΈ — Ρ‡Π΅Ρ€Π½ΠΎ-Π±Π΅Π»Ρ‹Π΅).</li><li> Широкая ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ: ΠΌΡ‹ прСдоставляСм Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнныС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ элСктронных ΠΊΠ½ΠΈΠ³ (EPUB, MOBI ΠΈ PDF), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΈΡ… Π½Π° любоС устройство ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‹Π±ΠΎΡ€Ρƒ; Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Mac, ПК, iPhone, iPad, Kindle, Android ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅.</li><li> БСсплатныС обновлСния для ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π΅Π½Π½ΠΎΠ³ΠΎ Π²Π°ΠΌΠΈ выпуска. Когда ΠΌΡ‹ вносим Π² ΠΊΠ½ΠΈΠ³Ρƒ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Ρ‹Π΅ измСнСния (Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠ΅ Π½ΠΎΠ²ΠΎΠ³ΠΎ издания), Π±ΡƒΠ΄Π΅Ρ‚ доступСн доступный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ обновлСния.</li><li> DRM-free: Ρ„Π°ΠΉΠ»Ρ‹ слСгка ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ водяными Π·Π½Π°ΠΊΠ°ΠΌΠΈ с вашим ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΈ адрСсом элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹, Π½ΠΎ ΠΌΡ‹ Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅ΠΌ устройства ΠΈΠ»ΠΈ прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для просмотра Π½Π°ΡˆΠΈΡ… элСктронных ΠΊΠ½ΠΈΠ³.</li><li> ΠŸΠΎΠΆΠΈΠ·Π½Π΅Π½Π½Ρ‹ΠΉ доступ ΠΊ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°ΠΌ ΠΈΠ· вашСй ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи Noble Desktop.</li></ul><h5><span class="ez-toc-section" id="i-19"> Π›ΡƒΡ‡ΡˆΠΈΠΉ способ Π½Π°ΡΠ»Π°Π΄ΠΈΡ‚ΡŒΡΡ нашими ΠΊΠ½ΠΈΠ³Π°ΠΌΠΈ </span></h5><p> Наши Ρ€Π°Π±ΠΎΡ‡ΠΈΠ΅ Ρ‚Π΅Ρ‚Ρ€Π°Π΄ΠΈ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для использования Π²ΠΎ врСмя Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π·Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠΌ.ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ½ΠΈ содСрТат ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹Π΅ упраТнСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡ΠΈ Π½Π° вашСм ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅. ИдСальной настройкой Π±Ρ‹Π»ΠΎ Π±Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСктронная ΠΊΠ½ΠΈΠ³Π° Π±Ρ‹Π»Π° Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π° Π½Π° устройство (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ / смартфон) ΠΈΠ»ΠΈ Π½Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΊΠ½ΠΈΠ³Ρƒ Π²ΠΎ врСмя Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΏΠ΅Ρ‡Π°Ρ‚Π°Ρ‚ΡŒ PDF-Ρ„Π°ΠΉΠ», Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.</p><h6><span class="ez-toc-section" id="PDF"> PDF </span></h6><ul><li> ИдСально для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ.</li><li> Π’ΠΎΡ‡Π½ΠΎΠ΅ совпадСниС с ΠΏΠ΅Ρ‡Π°Ρ‚Π½ΠΎΠΉ ΠΊΠ½ΠΈΠ³ΠΎΠΉ. Если ΠΏΠ΅Ρ€Π΅ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° тСкста Π² Ρ„Π°ΠΉΠ»Π΅ EPUB ΠΈΠ»ΠΈ MOBI сбиваСт с Ρ‚ΠΎΠ»ΠΊΡƒ, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ PDF-Ρ„Π°ΠΉΠ»Ρƒ.</li><li> PDF совмСстим с Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎΠΌ устройств, Π½ΠΎ Π½Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ для ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранов. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ экран мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π²Ρ‹, вСроятно, Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ EPUB ΠΈΠ»ΠΈ MOBI.</li></ul><h6><span class="ez-toc-section" id="EPUB"> EPUB </span></h6><ul><li> Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ отраслСвой Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ элСктронных ΠΊΠ½ΠΈΠ³, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ со всСми устройствами, ΠΊΡ€ΠΎΠΌΠ΅ Amazon Kindle. EPUB ΠΌΠΎΠΆΠ½ΠΎ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π½Π° Mac, ПК, iPhone, iPad, iPod Touch, Nook, Sony Reader, Kobo, Android ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ….</li><li> ИдСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚ пСрСформатируСтся Π² соотвСтствии с Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΌ устройством (с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‹Π±ΠΎΡ€Ρƒ).</li></ul><h6><span class="ez-toc-section" id="MOBI"> MOBI (Ρ€Π°Π·ΠΆΠ΅Ρ‡ΡŒ) </span></h6><ul><li> Π€ΠΎΡ€ΠΌΠ°Ρ‚ Amazon для устройств Kindle ΠΈ прилоТСния Kindle.</li><li> ИдСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚ пСрСформатируСтся Π² соотвСтствии с Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΌ устройством (с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‹Π±ΠΎΡ€Ρƒ).</li><li> Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ устройство iOS, Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠ°ΠΊ iPhone ΠΈ iPad? ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Kindle для устройств Apple iOS Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌ. Π₯отя наш MOBI Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Kindle, ΠΎΠ½ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° устройствах iOS. ΠœΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ EPUB с ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Apple iBooks ΠΏΡ€ΠΈ Ρ‡Ρ‚Π΅Π½ΠΈΠΈ Π½Π° устройствС iOS.</li></ul><h6><span class="ez-toc-section" id="iPhone_iPad"> iPhone, iPad </span></h6><h6><span class="ez-toc-section" id="Mac"> Mac </span></h6><h6><span class="ez-toc-section" id="_Windows"> ПК с Windows </span></h6><h6><span class="ez-toc-section" id="Android"> Android </span></h6> Книги<p> Noble Desktop ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для использования Π²Π°ΠΌΠΈ ΠΊΠ°ΠΊ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Π΅ΠΌ. Они Π½Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π»ΠΈΡ†Π°ΠΌ. Π€Π°ΠΉΠ»Ρ‹ слСгка ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ водяными Π·Π½Π°ΠΊΠ°ΠΌΠΈ с вашим ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΈ адрСсом элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹, Π½ΠΎ ΠΌΡ‹ Π½Π΅ примСняСм DRM. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои элСктронныС ΠΊΠ½ΠΈΠ³ΠΈ Π½Π° любоС ΠΈΠ· Π²Π°ΡˆΠΈΡ… устройств Π±Π΅Π· ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΏΠ΅Ρ‡Π°Ρ‚Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ PDF для собствСнного использования, Π½ΠΎ Π½Π΅ для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π»ΠΈΡ†Π°ΠΌ. Π’Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½Π½Ρ‹Π΅ элСктронныС ΠΊΠ½ΠΈΠ³ΠΈ.ΠŸΡ€Π°Π²ΠΎ собствСнности ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π°ΠΌ ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½ΠΎ ΠΊΠΎΠΌΡƒ-Π»ΠΈΠ±ΠΎ Π΅Ρ‰Π΅.</p><p> УчитСля ΠΈ ΡƒΡ‡Π΅Π±Π½Ρ‹Π΅ Ρ†Π΅Π½Ρ‚Ρ€Ρ‹, ΠΆΠ΅Π»Π°ΡŽΡ‰ΠΈΠ΅ Ρ€Π°ΡΠΏΠ΅Ρ‡Π°Ρ‚Π°Ρ‚ΡŒ ΠΊΠΎΠΏΠΈΠΈ для студСнтов, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ элСктронноС письмо для получСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ… лицСнзирования ΠΈ Ρ†Π΅Π½Π°Ρ….</p><h2><span class="ez-toc-section" id="_HTML_Emmet_Sublime_Text"> БыстроС созданиС HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Emmet ΠΈ Sublime Text </span></h2><p> Π’ Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΆΠΈΠ·Π½ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° инструмСнты Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·. ОсобСнно это касаСтся тСкстового Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°; ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ часто ΠΏΠΎΡ…ΠΎΠΆ Π½Π° ΡƒΡŽΡ‚Π½Ρ‹ΠΉ Π΄ΠΎΠΌ для ΠΎΠΏΡ‹Ρ‚Π½ΠΎΠ³ΠΎ застройщика. НСкоторыС ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ чистыС тСкстовыС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ IDE, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, я) ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±Ρ€ΠΈΠ΄Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ высокой Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΡΡ‚ΡŒΡŽ ΠΈ обСспСчит Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ прСимущСств IDE Π±Π΅Π· Π½Π°ΠΊΠ»Π°Π΄Π½Ρ‹Ρ… расходов.Для мСня ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ являСтся Sublime Text 3, Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΠ»ΠΎΡΡŒ, ΠΊΠΎΠ³Π΄Π° я ΠΎΡ‚ΠΊΡ€Ρ‹Π» для сСбя ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Zen.</p><h3><span class="ez-toc-section" id="_Zen"> Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ° Zen? </span></h3><p> Zen Coding (Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ извСстный ΠΊΠ°ΠΊ Emmet — уТасноС имя, Π½Π° ΠΌΠΎΠΉ взгляд) — это Π½Π°Π±ΠΎΡ€ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… тСкстовых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ². Он позволяСт быстро Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ HTML, записывая Π΅Π³ΠΎ с синтаксисом, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌ CSS, Π° Π·Π°Ρ‚Π΅ΠΌ просто наТимая ΠΊΠ»Π°Π²ΠΈΡˆΡƒ TAB, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Β«ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ» Π΅Π³ΠΎ.</p><p> Π‘Π°ΠΌΡ‹ΠΉ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€:</p><h4><span class="ez-toc-section" id="_HTML-2"> ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ синтаксис HTML </span></h4><pre> <code> <h2><span class="ez-toc-section" id="Hello_World"> Hello World & </span></h2> <p> Π­Ρ‚ΠΎ Π°Π±Π·Π°Ρ† с классом "тСкст" </p> </code> </pre><h4><span class="ez-toc-section" id="_Emmet-5"> Бинтаксис Emmet </span></h4><pre> <code> h2 {Hello World} + p.text {Π­Ρ‚ΠΎ Π°Π±Π·Π°Ρ† с классом "text"} </code> </pre><p> Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΡ‡Π΅Π½ΡŒ простой ΠΈ Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ возмоТности Π­ΠΌΠΌΠ΅Ρ‚Π°, поэтому Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с ΡƒΡ‡Π΅Π±Π½ΠΈΠΊΠ°. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ я большой ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ Sublime Text 3, я Π±ΡƒΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎ Ρ‚Π°ΠΌ Π΅ΡΡ‚ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ список Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… ΠΏΠ»Π°Π³ΠΈΠ½ Emmet, ΠΈ, ΠΊΡ€ΠΎΠΌΠ΅ ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Ρ‹ установки, синтаксис ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ² для всСх.</p><h3><span class="ez-toc-section" id="_Sublime_Text"> Установка (Sublime Text) </span></h3><p> Если Ρƒ вас ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ², установка Ρ‚Π°ΠΊ ΠΆΠ΅ проста, ΠΊΠ°ΠΊ поиск Β«EmmetΒ» Π² спискС ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ².</p><p> Если Ρƒ вас Π΅Ρ‰Π΅ Π½Π΅ установлСн ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ², я Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых простых способов Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ваш Sublime Text. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ, здСсь:</p><p> https://packagecontrol.io/installation</p><h3><span class="ez-toc-section" id="i-20"> ПониманиС синтаксиса </span></h3><p> Бинтаксис ΠΎΡ‡Π΅Π½ΡŒ прост для изучСния ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ соотвСтствуСт синтаксису CSS.</p><p> <strong> ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: </strong> Когда Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ <code> [TAB] </code>, это Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Β«Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ TABΒ».</p><h4><span class="ez-toc-section" id="i-21"> Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ элСмСнта </span></h4><p> <em> Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π΅Π³ HTML, просто Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ Π΅Π³ΠΎ, ΠΊΠ°ΠΊ Π² CSS.</em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><p> <em> Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс ΠΊ Ρ‚Π΅Π³Ρƒ, ΠΏΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄ Π½ΠΈΠΌ Ρ‚ΠΎΡ‡ΠΊΡƒ. </em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><p> <em> Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ…Π΅Ρˆ. </em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><pre> <code> <h2> </h2> </code> </pre><p> <em> Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Π΅ скобки. </em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><pre> <code> h2 {Π­Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ} [TAB] </code> </pre><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><pre> <code> <h2><span class="ez-toc-section" id="i-22"> Π­Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ </span></h2> </code> </pre><h4><span class="ez-toc-section" id="i-23"> ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ </span></h4><p> Для Π­ΠΌΠΌΠ΅Ρ‚Π° Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ уровням DOM, Π½Π° самом Π΄Π΅Π»Π΅ довольно Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ скСлСт ΠΏΠΎΠ»Π½ΠΎΠΉ страницы, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Ρƒ строку ΠΊΠΎΠ΄Π° Emmet.div.second> h3 {Π­Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ div} [TAB] </code> </pre><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><pre> <code> <div> <h2><span class="ez-toc-section" id="_div"> Π­Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ div </span></h2> <p> Π­Ρ‚ΠΎ Π°Π±Π·Π°Ρ† рядом с ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ </p> <div> <div> <h3><span class="ez-toc-section" id="_div-2"> Π­Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ div </span></h3> </div> </code> </pre><h4><span class="ez-toc-section" id="i-24"> Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ° </span></h4><p> ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ станут ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΌΠΈ ΠΏΠΎΠ·ΠΆΠ΅ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ «итСрация», Π½ΠΎ ΠΈΡ… слСдуСт ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ здСсь.</p><p> <em> Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ΡΡ Π² ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ скобки. </em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><pre> <code> <ul> <li> <a href=""> ссылка </a> </li> </ul> </code> </pre><h4><span class="ez-toc-section" id="i-25"> Π˜Ρ‚Π΅Ρ€Π°Ρ†ΠΈΡ </span></h4><p> Одна ΠΈΠ· самых ΠΌΠΎΡ‰Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Emmet — это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ элСмСнты. Π’Ρ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ Π²Ρ‹ΡˆΠ΅, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ элСмСнтов, Π½ΠΎ Ρ‡Ρ‚ΠΎ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ список элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ структуру?</p><p> <em> Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠ΅ΡΡ элСмСнты Ρ‚Π°ΠΊ ΠΆΠ΅ просто, ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ количСство элСмСнтов послС символа Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠΈ (*).</em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><p> <em> Π’Π°ΠΊ ΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ списки с использованиСм этого Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠΈ: </em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><pre> <code> <ul > <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </code> </pre><p> <em> Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΈ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ числа-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΠΈ, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Π΄Π΅ ΡƒΠ³ΠΎΠ΄Π½ΠΎ, ΠΈ ΠΎΠ½ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ символа $.</em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><pre> <code> <ul> <li> ΠŸΡƒΠ½ΠΊΡ‚ 1 </li> <li> ΠŸΡƒΠ½ΠΊΡ‚ 2 </li> <li> ΠŸΡƒΠ½ΠΊΡ‚ 3 </li> </ul> </code> </pre><h4><span class="ez-toc-section" id="i-26"> Π Π°Π±ΠΎΡ‚Π° с ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ </span></h4><p> Emmet Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² создании HTML с нуля, Π½ΠΎ ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π΅Π½ ΠΏΡ€ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ тСкстового Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Β«ΠŸΠ΅Ρ€Π΅Π½Π΅ΡΡ‚ΠΈ с сокращСниСм». Π•Π³ΠΎ использованиС Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Π²Π°ΠΌΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°, ΠΊΠ°ΠΊ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡŒ Ρ€Π°Π½Π΅Π΅ — Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ прСдполагаСтся, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Sublime Text.</p><p> Π”Π°Π²Π°ΠΉΡ‚Π΅ прСдставим, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π΄Π°Π»ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, содСрТащий ΠΏΠΈΡΡŒΠΌΠ΅Π½Π½Ρ‹ΠΉ список, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ:</p><p> ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² список Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, Π½ΠΎ Ссли Π±Ρ‹ этот список Π±Ρ‹Π» Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π»ΠΈΠ½Π½Π΅Π΅, это ΠΌΠΎΠ³Π»ΠΎ Π±Ρ‹ ΡΡ‚Π°Ρ‚ΡŒ ΡƒΡ‚Π΅Ρ‡ΠΊΠΎΠΉ Π² β€‹β€‹Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.</p><p> <em> Π‘ Emmet ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π»Π΅Π³ΠΊΠΎ: Π²Ρ‹ просто Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ тСкст, Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ ctrl-w (Π² Sublime Π² MacOS это ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠ° с горячСй клавишСй сокращСния, хотя это ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ вашСй ОБ) ΠΈ Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ box: </em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> Π—Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠ° ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π­ΠΌΠΌΠ΅Ρ‚Ρƒ ΠΏΡ€ΠΎΠΉΡ‚ΠΈΡΡŒ ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкС ΠΈ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π² список, поэтому, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π²Ρ‹ΠΉΠ΄Π΅Ρ‚Π΅ ΠΈΠ· Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:</p><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><pre> <code> <ul> <li> - Молоко </li> <li> - Π―ΠΉΡ†Π° </li> <li> - Π₯Π»Π΅Π± </li> </ul> </code> </pre><p> Ой, ΠΏΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡ‚Π΅, Π½Π° Π½Π΅ΠΌ всС Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ символы минуса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ нСкрасиво ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π½Π° нашСм сайтС, Π½Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΠΌ это ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π΅Ρ‰Π΅.</p><p> <em> НаТмитС ctrl-w ΠΈ вмСсто этого Π²Π²Π΅Π΄ΠΈΡ‚Π΅: </em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> Команда Β«| tΒ» Π² сочСтании с Β«*Β» ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π­ΠΌΠΌΠ΅Ρ‚Ρƒ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ°ΠΆΠ΄ΡƒΡŽ строку, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ исходныС Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ списка. ΠΈΠ· тСкста, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π½Π°ΠΌ красивый Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΉ список:</p><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><pre> <code> <ul> <li> Молоко </li> <li> Π―ΠΉΡ†Π° </li> <li> Π₯Π»Π΅Π± </li> </ul> </code> </pre><p> Намного Π»ΡƒΡ‡ΡˆΠ΅.</p><p> Из всСх инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСдоставляСт Emmet, Wrap с сокращСниСм — это Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ экономит ΠΌΠ½Π΅ большС всСго Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌΠΈ функциями.ΠžΠ΄Π½Π°ΠΆΠ΄Ρ‹ я ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π» 40-страничный Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ с полоТСниями ΠΈ условиями ΠΈΠ· Word Π² HTML ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π·Π° 20 ΠΌΠΈΠ½ΡƒΡ‚!</p><p> Для Ρ†Π΅Π»Π΅ΠΉ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, ΠΎΠ΄Π½Π°ΠΊΠΎ я Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ Π²Π΅Π±-сайт emmet.io ΠΈ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ всС Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Wrap with Abbreviation.</p><p> Π”Π°Π²Π°ΠΉΡ‚Π΅ вСрнСмся ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ списку Π²Ρ‹ΡˆΠ΅, ΠΈ Π½Π° этот Ρ€Π°Π· ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ наш Ρ‚Π΅Π³ UL ΠΈΠΌΠ΅Π» класс ΠΈ Ρ€ΠΎΠ»ΡŒ Π°Ρ€ΠΈΠΈ, плюс ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт списка Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ data-item.</p><p> ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, Π² Π΄Π»ΠΈΠ½Π½ΠΎΠΌ спискС, это Π±Ρ‹Π»ΠΎ Π±Ρ‹ довольно Ρ‚Ρ€ΡƒΠ΄ΠΎΠ΅ΠΌΠΊΠΎΠΉ Π·Π°Π΄Π°Ρ‡Π΅ΠΉ, Π½ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹, вСроятно, ΡƒΠΆΠ΅ поняли, с Π­ΠΌΠΌΠ΅Ρ‚ΠΎΠΌ это Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.</p><p> <em> ΠŸΡ€ΠΎΡΡ‚ΠΎ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ctrl-w ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅: </em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><pre> <code> ul.shopping [role = "main"]> li [data-item = "$"] {$ #} * | t </code> </pre><p> <strong> Π’Ρ‹Π²ΠΎΠ΄ HTML: </strong></p><pre> <code> <ul role = "main"> <li data-item = "1"> Молоко </li> <li data-item = "2"> яйца </li> <li data-item = "3"> Π₯Π»Π΅Π± </li> </ul> </code> </pre><p> Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ здСсь происходит?</p><p> <code> [] </code> — это Ρ‚ΠΎ, ΠΊΠ°ΠΊ указываСтся Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΠ· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° <code> role </code>, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΈ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π² Ρ‚Π΅Π³ Β«ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒΒ» (ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ <code> href </code> Π² Ρ‚Π΅Π³Π΅ привязки, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ автоматичСски, ΠΈ ΠΈΡ… Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π² Emmet, Ссли Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡ… Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ).</p><p> Π’Ρ‹ ΡƒΠΆΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ <code> $ </code> Ρ€Π°Π½ΡŒΡˆΠ΅, это просто ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ Π½ΠΎΠΌΠ΅Ρ€ элСмСнта Π² Ρ†ΠΈΠΊΠ»Π΅, Π²Ρ‹, вСроятно, Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ <code> $ # </code>, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π΄ΠΎΠ³Π°Π΄Π°Ρ‚ΡŒΡΡ, ΠΎΠ½ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ содСрТимоС Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ тСкст, Π° Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ Π΅Π³ΠΎ Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ строку <code> $ # </code>. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ Ρ€Π°Π·, Π½ΠΎ, ΠΊ соТалСнию, строка <code> | t </code> Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ….</p><h3><span class="ez-toc-section" id="i-27"> Π§Ρ‚ΠΎ дальшС? </span></h3><p> Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Emmet — нСвСроятно ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ ΠΌΠΎΡ‰Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΡƒΡˆΠ»ΠΈ часы, Π² Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всСго нСсколько ΠΌΠΈΠ½ΡƒΡ‚.</p><p> Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΠΎΠΊΠ°Π·Π°Π»Π° Π²Π°ΠΌ лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· основных ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ², поэтому я Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ emmet.io ΠΈ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΈΡ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ я Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ†Π°Ρ€Π°ΠΏΠ°Π» ΠΏΠΎΠ²Π΅Ρ€Ρ…Π½ΠΎΡΡ‚ΡŒ.</p><p> Π― ΠΎΡΡ‚Π°Π²Π»ΡŽ Π²Π°ΠΌ послСдний ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄Π΅Π»Π°Π΅Ρ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ я Π΄ΡƒΠΌΠ°ΡŽ, Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ приятно ΡƒΠ΄ΠΈΠ²Π»Π΅Π½Ρ‹, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚Π΅ Π΅Π³ΠΎ сами.</p><p> <em> Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ пустой Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ синтаксис — HTML, Π·Π°Ρ‚Π΅ΠΌ просто Π²Π²Π΅Π΄ΠΈΡ‚Π΅: </em></p><p> <strong> Код Π­ΠΌΠΌΠ΅Ρ‚Π°: </strong></p><p> Π£Π΄Π°Ρ‡Π½ΠΎΠ³ΠΎ кодирования! πŸ˜„</p>.<div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/raznoe-2/sublime-text-emmet-sublime-text-3-ustanovka-rusifikacziya-ustanovka-emmet.html" data-text="Sublime text emmet: Sublime Text 3 — установка, русификация + установка emmet" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/raznoe-2/sublime-text-emmet-sublime-text-3-ustanovka-rusifikacziya-ustanovka-emmet.html" data-text="Sublime text emmet: Sublime Text 3 — установка, русификация + установка emmet" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/raznoe-2/sublime-text-emmet-sublime-text-3-ustanovka-rusifikacziya-ustanovka-emmet.html" data-text="Sublime text emmet: Sublime Text 3 — установка, русификация + установка emmet" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/raznoe-2/sublime-text-emmet-sublime-text-3-ustanovka-rusifikacziya-ustanovka-emmet.html" data-text="Sublime text emmet: Sublime Text 3 — установка, русификация + установка emmet" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/razmer-dlya-bannera-na-yutub-poshagovaya-instrukcziya-i-idei-dlya-vdohnoveniya.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Π’ΠΏΠ΅Ρ€Π΅Π΄</strong> <span>Π Π°Π·ΠΌΠ΅Ρ€ для Π±Π°Π½Π½Π΅Ρ€Π° Π½Π° ΡŽΡ‚ΡƒΠ±: пошаговая инструкция ΠΈ ΠΈΠ΄Π΅ΠΈ для вдохновСния</span></a></li><li class="previous"><a href="https://ylianova.ru/html/html-otstup-sleva-kak-izmenit-otstup-sleva-ot-markerov-spiska.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Html отступ слСва: Как ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ отступ слСва ΠΎΡ‚ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² списка?</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/sublime-text-emmet-sublime-text-3-ustanovka-rusifikacziya-ustanovka-emmet.html#respond" style="display:none;">ΠžΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½.</span> <span class="required-field-message">ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Π‘Π°ΠΉΡ‚</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ" /> <input type='hidden' name='comment_post_ID' value='11090' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Π Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡƒΡŽ Ρ„Ρ€Π°Π·Ρƒ';" onfocus="if(this.value=='Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡƒΡŽ Ρ„Ρ€Π°Π·Ρƒ')this.value='';" value="Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡƒΡŽ Ρ„Ρ€Π°Π·Ρƒ" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Π ΡƒΠ±Ρ€ΠΈΠΊΠΈ</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">ВСрстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">ΠœΠ°ΠΊΠ΅Ρ‚</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Π Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Π‘Π°ΠΉΡ‚</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Π¨Π°Π±Π»ΠΎΠ½</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Π¨Ρ€ΠΈΡ„Ρ‚</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Π Π°Π·Π½ΠΎΠ΅</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Π ΡƒΠ±Ρ€ΠΈΠΊΠΈ</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">ВСрстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">ΠœΠ°ΠΊΠ΅Ρ‚</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Π Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Π Π°Π·Π½ΠΎΠ΅</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Π‘Π°ΠΉΡ‚</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Π‘ΠΎΠ²Π΅Ρ‚Ρ‹</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Π¨Π°Π±Π»ΠΎΠ½</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Π¨Π°Π±Π»ΠΎΠ½Ρ‹</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Π¨Ρ€ΠΈΡ„Ρ‚</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Π‘Π»ΠΎΠ³ ΡΡƒΠΌΠ°ΡΡˆΠ΅Π΄ΡˆΠ΅Π³ΠΎ сисадмина © 2024. ВсС ΠΏΡ€Π°Π²Π° Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Ρ‹.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">ΠšΠ°Ρ€Ρ‚Π° сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--></body></html>