Еммет, раније познат као Зен Цодинг, је један од најбољих алата који треба да повећате продуктивност док кодирате ХТМЛ или ЦСС. Ради као кодирање, али је моћније и невероватније. Он је у стању да аутоматизује ваш ХТМЛ / ЦСС од једноставног облика до комплексног.
Еммет нуди добру подршку за уређивање текста или ИДЕ (Интегратед Девелопмент Енвиронмент) као што су Дреамвеавер, Ецлипсе, Сублиме Тект, ТектМате, Екпрессо, Цода, заграде, Нотепад ++, ПХПСторм и још много тога. Такође подржава онлине алатке за уређивање као што су ЈСФиддле, ЈСБин, ЦодеПен, ИцеЦодер и Цодио .
Начин рада Еммет-а је да откуцате тастер за тастатуру на картици када завршите синтаксу писања. Следећи су најчешћи Емметови симболи које можете користити. Да бисте их видели у акцији, наставите са читањем.
Еммет - ХТМЛ Бест Трицкс
Бићете запањени када пишете ХТМЛ са Емметом као што сам и ја. Као што је раније речено, Еммет је у стању да скрати једноставан ХТМЛ на веома сложен. И они су написани само на једној линији кода. Подразумевано, ако скратите име непознате ознаке, Еммет ће аутоматски написати ознаку коју пишете. Погледајте анимацију испод да бисте је лакше разумели.
1. Нестинг
Да бисте угнијездили неке елементе потребно је само додати већи знак > након сваке ознаке коју желите користити. На пример, када желим да имам header са nav, div, ul и li у мени је потребно само да унесем header>nav>div>ul>li и притисни тастер.
2. Сиблинг
Ако не желите да угнијежете своје елементе, можете једноставно користити знак плус + и ознаке које желите додати. На пример, header+section+article+footer ће дати друго место за header, section, article и footer .
3. Попните се горе
Када се налазите у елементу подређеног и желите да имате други елемент изван тог детета, можете лако да се попнете на један елемент са знаком ^ . Ако га упишете два пута, онда ћете се попети на двоструки елемент и тако даље. На пример, ако куцате header>div>h1>nav имат ћете нав елемент још увијек унутар х1. Да бисте је извукли, замијените посљедњи > знак знаком ^ .
4. Додајте класу
Еммет је такође у могућности да укључи ваше жељено име класе унутар ознаке. Знак који ћете користити је исти као и селектор класа у ЦСС-у који је тачка . знак. На пример, ако желим да имам div са .container класом, h1 са .title и nav са .fixed, онда само морам да напишем div.container>header>h1.title+nav.fixed .
Ако желите да имате више од једне класе, онда укуцајте вашу додатну класу после прве класе заједно са тачком . знак. Пример: div.container.center ће произвести .
5. Додајте ИД
Осим класе, можете додати ИД унутар ознаке са знаком # . Употреба је иста као и додавање класе, али не можете да упишете дупли ИД унутар. Ако покушате да то урадите, Еммет ће прочитати само последњи ИД који унесете.
6. Додајте текст
Еммет није тако једноставан као што само скраћује неке ознаке, чак можете додати и ред текста. Да бисте додали неки текст, морате само да омотате текст са знаком увијене заграде {} . Не морате додати већи > знак јер ће се текст аутоматски додати унутар ознаке.
7. Додајте атрибут
Ако желите додати други атрибут осим класе и ид, само мјесто атрибут желите додати унутар заграда [] знак. На пример, желим да имам слику која има лого.пнг извор са логом alt, тако да само куцам img[src="logo.png"] .
8. Груписање
Када желите да имате елемент са вишеструким угњежђеним елементима, групирање са знаком () ће вам помоћи да то лако постигнете. На пример, желим да имам контејнер који има заглавље са х1 и нав унутра, а други део изван заглавља, једноставно ћу написати: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Мултиплицатион
Ова функција може постати једна од ваших омиљених од Еммет-а. Као и код множења, можемо множити сваки елемент онолико колико желимо. Да бисте га користили, једноставно додајте знак звездице * након елемента који желите да помножите и додате број елемента. На пример, желим да напишем пет ли ставку унутар ул, онда је права синтакса ul>li*5 .
10. Аутоматско нумерисање
Аутоматско нумерисање ће вам помоћи да лако напишете друго име са повећаним бројем. Права синтакса за ову функцију је знак долар $ . Аутоматско нумерисање се најбоље користи са множењем. На пример, желим да додам моју претходну ставку li са класом од ставке item1 до item5 . Дакле, само морам да додам име класе са знаком долара: ul>li.item$*5 .
11. Лорем
Ако сте некада писали неки лажни текст отварањем липсум генератора као што је липсум.цом, са Емметом то више не морате радити. Еммет такође подржава lipsum генератор текста са lipsum или lipsum . Такође можете одредити колико дуго ће текст постати. На пример, желим да имам неки текст са 10 речи, онда ћу укуцати lorem10 .
12. Ауто Доцумент
Када покрећете нови пројекат, уместо да ручно пишете структуру ХТМЛ или копирате лепљење из других ресурса, Еммет то може учинити боље за вас. Све што треба да урадите је да откуцате узвичник ! знак, погодак и чаролија. То ће генерисати структуру ХТМЛ5 документа за вас, ако желите да користите ХТМЛ4 уместо, онда само укуцајте html:4t .
13. Линк
Ако имате фавицон, рсс или спољашњу ЦСС датотеку коју желите да додате у документ, можете користити трикове за повезивање да бисте их брже записивали. Да бисте укључили фавицон, откуцајте link:favicon и генерисаће вам фавицон везу са подразумеваним favicon.ico именом фајла. А за цсс, link:css ће вам генерисати ЦСС везу са подразумеваним стилом style.css . РСС ће бити rss.xml као подразумевано име.
Можете их комбиновати са знаком плус + да бисте генерисали брже ресурсе.
14. Сидро
Подразумевано, када откуцате ознаку, а затим кликнете на картицу, добићете комплетан таг са атрибутом href . Али можете додати вредност // ако је комбинујете са линком, на пример a:link . Ако желите уместо тога да имате линк за пошту, користите a:mail .
15. Смарт прескакање
Последњи ХТМЛ трикови које ћу вам дати је функција паметног прескакања. У основи, немате писати име ознаке када желите да имате класу или ид унутар њега. Ово важи само за неке одређене услове.
Прво, ако желите да имате div са ИД-ом или класом унутра, не морате да пишете име ознаке, само директно упишите ид или симбол класе заједно са његовим именом.
Друго, када се налазите унутар ul таг-а, прескочите писање li таг-а ако има класу или ид.
И последњи се примењује у оквиру table . Можете прескочити писање tr и td ознака ако имају класу или ид и Еммет ће их аутоматски додати за вас.
Еммет - Бест ЦСС Трицкс
Након што научите неке ХТМЛ трикове, сада је време за ЦСС. Неки од уобичајених симбола приказаних на врху слике неће радити са ЦСС-ом. Они су већи > и пењу се ^ симболима. Ако их користите, они ће произвести као и плус + симбол. Па, идемо.
1. Ширина и висина
Дефинисање width и height са Емметом је веома једноставно. Само треба да напишете прву реч од њих, а затим величину коју желите да додате. По дефаулту, ако не наведете јединице, Еммет ће их генерисати са px јединицом. Симбол расположиве јединице је посто % и em .
2. Текст
Постоје неки једноставни симболи својстава текста који ће бити генерисани са подразумеваном вредношћу. ta ће генерисати text-align са left вредношћу, td ће бити text-decoration none вредности и tt ће постати text-transform са uppercase .
3. Позадина
Да бисте додали позадину, једноставно користите скраћеницу bg . Можете га комбиновати са bgi да бисте добили background-image, bgc за background-color и bgr за background-repeat . Такође можете написати bg+ да бисте добили комплетну листу својстава позадине.
4. Фонт Фаце
Знак плус није примјењив само за позадину. За @font-face, можете једноставно написати @f+ за комплетну листу својства @font-face . Ако куцате @f без знака плус, тада ћете добити само основно @font-face .
5. Разно
Други велики трикови су скраћивање писања animation са anim текстом. Ако додате минус - знак, добићете својство анимације са пуном вредношћу. Ту је и @ @kf текст који ће произвести потпуну листу @ @keyframe .
Закључак
Еммет је веома велики алат за уштеду времена који поједностављује ваш развојни процес. Ако само знате Еммета, сада није касно да га испробате. Ти трикови су само неке од Емметових карактеристика. Постоји много других симбола и синтаксе у Еммету, посебно за ЦСС. Само идите код Емметових доктора или преварите лист како бисте наставили са читањем.
