Emmet, varem tuntud kui Zen Coding, on üks parimaid vahendeid, mida peaksite suurendama oma tootlikkust HTML- või CSS-koodi kodeerimisel. See toimib nagu koodide lõpetamine, kuid see on võimsam ja hämmastav. See on võimeline automatiseerima oma HTML / CSSi lihtsast vormist keerukaks.
Emmet pakub head toetust tekstiredaktorile või IDE (Integrated Development Environment), nagu Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm ja palju muud. Samuti toetab see veebipõhist redigeerimistööriista nagu JSFiddle, JSBin, CodePen, IceCoder ja Codio .
Emmeti tööde viis on sünkroniseerimise lõpetamisel klaviatuuri klahvi sisestamine. Järgmised on kõige tavalisemad Emmet'i sümbolid, mida saate kasutada. Nende tegevuse vaatamiseks jätkake lugemist.
Emmet - HTML parimad trikid
Teil on üllatunud, kui kirjutad HTML-i Emmetiga nagu mina. Nagu varem öeldud, suudab Emmet lihtsat HTML-i lühendada väga keeruliseks. Ja need on kirjutatud ainult ühel koodireal. Vaikimisi kirjutab Emmet automaatselt teie kirjutatud sildi, kui lühendate teadmata sildi nime. Vaadake allpool olevat animatsiooni, et seda kergesti mõista.
1. Pesemine
Mõnede elementide pesemiseks peate pärast iga kasutatava sildi lisamist lisama suurema märgi. Näiteks, kui ma tahan, et header oleks nav, div, ul ja li sees, pean lihtsalt sisestama header>nav>div>ul>li ja tabamisklahvi.
2. Sibling
Kui te ei soovi oma elemente pesa, võite lihtsalt kasutada plussmärki, millele järgneb sildid, mida soovite lisada. Näide, header+section+article+footer annab teisele kohale header, section, article ja footer .
3. Roni üles
Kui olete lapse elemendi sees ja soovite, et lapsest väljapoole jääks teine element, saate hõlpsasti ühte elementi ^ märgiga üles ronida. Kui sisestate selle kaks korda, siis ronige topeltelement ja nii edasi. Näiteks kui header>div>h1>nav siis on teil veel element h1 sees. Selle väljavahetamiseks asenda viimane märk ^ .
4. Lisa klass
Emmet suudab ka lisada oma eelistatud klassi nime sildile. Kasutatav märk on sama, mis klassi valija CSS-is, mis on punkt . märk. Näiteks, kui ma tahan olla .container klassiga div ja .container ja nav .title, siis pean lihtsalt kirjutama div.container>header>h1.title+nav.fixed .
Kui soovite, et sees oleks rohkem kui üks klass, siis tippige oma lisaklass pärast esimest klassi koos punktiga . märk. Näide: div.container.center toodab .
5. Lisa ID
Lisaks klassile saate ID-sse lisada ka märgi # . Kasutamine on sama nagu klassi lisamine, kuid te ei tohi sisestada topelt ID-d. Kui proovite seda teha, loeb Emmet ainult viimast kirjutatavat ID-d.
6. Lisage tekst
Emmet ei ole lihtsalt nii lihtne, et lihtsalt lühendada mõningaid silte, saate lisada isegi teksti rea. Teksti lisamiseks peate teksti lihtsalt murdma {} märgiga. Kui tekst automaatselt sildi sees lisatakse, ei pea te lisama suuremat märki.
7. Lisa atribuut
Kui soovite lisada veel ühe atribuudi peale klassi ja id, lihtsalt koht atribuut, mida soovite lisada sildi [] sildile. Näiteks tahan, et mul oleks pilt, millel on logo.png allikas logo alt, nii et ma lihtsalt img[src="logo.png"] .
8. Grupeerimine
Kui soovite, et elementi, millel on mitmekordne sisemus, siis rühmitades need () märgiga, saate selle hõlpsasti saavutada. Näide, ma tahan, et konteinerisse, millel on päis h1 ja nav sees, ja teisest sektsioonist väljaspool päist, kirjutan lihtsalt: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Korrutamine
See funktsioon võib muutuda Emmeti lemmikuks. Nagu paljundamise puhul, võime iga elementi korrutada nii palju kui soovime. Selle kasutamiseks lisage lihtsalt tähe * märk pärast elementi, mida soovite korrutada, ja lisage elemendi number. Näiteks tahan kirjutada viis li elementi ul sees, siis õige süntaks on ul>li*5 .
10. Automaatne numeratsioon
Automaatne numeratsioon aitab teil kergesti kirjutada erinevat nime. Selle funktsiooni õige süntaks on dollari $ märk. Automaatne numeratsioon on kõige parem kasutada korrutamisel. Näide, ma tahan lisada oma eelmise elemendi item1 punktist item1 kuni item5 . Niisiis, ma pean lihtsalt lisama klassi nime dollari märgiga: ul>li.item$*5 .
11. Lorem
Kui kasutasite mõnda näiv teksti kirjutades, avades lipsumi generaatori nagu lipsum.com, siis Emmet ei pea seda enam tegema. Emmet toetab ka lipsum generaatorit lipsum või lipsum süntaksiga. Samuti saate määrata, kui kaua teie tekst muutub. Näiteks tahan, et mul oleks tekst 10 sõna pikk, siis ma lorem10 .
12. Automaatne dokument
Kui alustate uut projekti, selle asemel, et kirjutada html struktuuri käsitsi või kopeerida kleepida teistest ressurssidest, saab Emmet seda teha teie jaoks paremaks. Kõik, mida pead tegema, on kirjutada hüüatus ! märk, tabamiskleebis ja maagia juhtub. See loob teile HTML5 dokumendistruktuuri, kui soovite selle asemel kasutada HTML4, siis sisestage lihtsalt html:4t .
13. Link
Kui teil on favicon, rss või väline CSS fail, mida soovite oma dokumendile lisada, saate linkide nippe nende kiiremaks kirjutamiseks kasutada. favicon.ico tippige link:favicon siis genereerib see favicon-linki, milles on vaikimisi favicon.ico failinimi. Ja link:css jaoks loob link:css teile CSS-lingi vaikimisi style.css stiili nimega. Ja RSS on rss.xml .
Kiiremate ressursside loomiseks saate neid kombineerida plussmärgiga.
14. Ankur
Vaikimisi, kui sisestate sildi, siis tab tab, siis saad täieliku sildi, millel on href atribuut. Kuid saate lisada väärtuse // kui ühendate selle lingiga näiteks a:link . Ja kui soovid selle asemel lingi linki kasutada, siis kasutage a:mail .
15. Nutikas vahelejätmine
Viimased HTML-nipid, mida ma teile annan, on nutikas vahelejätmise funktsioon. Põhimõtteliselt ei ole teil sildi nime kirjutatud, kui soovite, et selle sees oleks klass või id. See kehtib ainult teatud tingimustel.
Esiteks, kui soovite, et div oleks ID-ga või klassi sees, ei pea te märgi nime kirjutama, lihtsalt kirjutama id või klassi sümboli koos selle nimega.
Teiseks, kui olete ul sildi sees, siis vahele jätta sildi kirjutamine, kui sellel on klass või ID.
Ja viimast rakendatakse table siltis. tr ja td sildi kirjutamise vahelejätmine on võimalik, kui neil on klass või id ja Emmet lisab need automaatselt teie jaoks.
Emmet - parimad CSS trikid
Pärast HTML-trikke õppimist on nüüd aeg CSS-i jaoks. Mõned ülemises pildis kuvatud ühised sümbolid ei tööta CSS-iga. Nad on suuremad > ja ronivad ^ sümbolid. Kui kasutate neid, toodavad nad just nagu pluss + sümbol. Niisiis, lähme.
1. Laius ja kõrgus
width ja height määramine Emmetiga on väga lihtne. Peate lihtsalt kirjutama esimese sõna, millele järgneb suurus, mida soovite lisada. Vaikimisi genereerib Emmet neid, kui te üksusi ei määra. Olemasolev ühiku sümbol on protsent % ja em .
2. Tekst
Seal on mõned kergesti kasutatavad teksti omaduste sümbolid ja need genereeritakse vaikeväärtusega. ta genereerib text-align left väärtusega, td on text-decoration mille väärtus pole ja tt muutub text-transform uppercase väärtustega.
3. Taust
Taustade lisamiseks kasutage lihtsalt bg lühendit. Saate seda kombineerida bgi et saada background-image, bgc background-color ja bgc . Samuti saate kirjutada bg+ et saada täieliku taustaprogrammi nimekirja.
4. Fontide nägu
Plussmärk ei ole ainult tausta jaoks kohaldatav. @font-face puhul saate lihtsalt @f+ kirjutada @font-face omaduste täieliku nimekirja. Kui sisestate @f ilma, siis saad ainult põhi- @font-face .
5. Mitmesugused
Teised suured nipid on, et saate animation teksti lühendada. Kui lisate miinusmärgi, saad täieliku väärtusega animatsiooni. On ka @kf tekst, mis annab täieliku nimekirja @keyframe .
Järeldus
Emmet on väga suur aja säästmise vahend oma arendusprotsessi sujuvamaks muutmiseks. Kui sa lihtsalt tunned Emmetit, siis pole seda liiga hilja proovida. Need trikid on vaid mõned Emmeti funktsioonid. Emmetis on eriti palju muud sümbolit ja süntaksit, eriti CSS-i jaoks. Lihtsalt suunduge Emmeti dokumentidele või petta lehele, et oma lugemist edasi arendada.
