Si të vendosni përmbajtje brenda një etikete?

Për ta bërë këtë, përdorni kllapat () d.m.th. div+p(Hello world) pasi shtypim Tab marrim

Përshendetje Botë

Si të shtoni një atribut id në një etiketë?

Për të vendosur ID-në në emmet ne përdorim #, marrim div#firs_id.first_class

Ekziston një funksion increment, për shembull duhet të plotësojmë ID-në e etiketës a nga 1 në 5, për këtë përdorim ndërtimin e mëposhtëm div>a#$*5 si rezultat i të cilit të gjitha id-të e etiketës a do të mbushen me vlera nga 1 në 5

Do të doja të shtoja gjithashtu që Emmet mund të punojë me CSS në të njëjtën mënyrë, vetëm në Sublime Text duhet të zgjidhet sintaksa CSS, Emmet i njeh të gjitha vetitë e CSS dhe thjesht shkruani shkronjën e parë të pronës dhe shtypni Tab, ose mundeni gjithashtu specifikoni shkronjën e parë dhe vlerën e kërkuar, për shembull m20 + Tab do të nxjerrë margjinën e mëposhtme të rezultatit: 20 px;

Nëse dikush papritmas ka ndonjë pyetje, pyesni ata në komente, unë do të jem i lumtur t'u përgjigjem atyre.

Jeni ende duke shkruar etiketa? html Dhe css pronat me dorë? Është koha për ta rregulluar! Sot do të flasim për shtojcën emmet, e cila do të na ndihmojë me këtë.

Emmet- Kjo shtojcë e cila do t'ju lejojë të shkruani html Dhe css dhjetë herë më shpejt. Shumë njerëz tashmë e përdorin atë në projektet e tyre, por shumë ende nuk dinë asgjë për të, dhe sot unë do të përpiqem ta rregulloj atë.

Së pari ju duhet ta instaloni atë. NË Tekst sublim, për të cilën është shkruar së fundmi, kjo bëhet shumë thjesht. Hapur paleta e komandave duke shtypur shkurtoren e tastierës cmd+shift+p, ose shkoni te mjetet dhe zgjidhni atje paleta e komandave. Tani hyni "instaloni paketën" dhe shtypni hyjnë. Hyni në vazhdim "emmet" dhe shtypni përsëri hyjnë. Pasi të shkarkohet dhe instalohet shtojca, rinisni Tekst sublim.

Instalimi ka përfunduar dhe tani mund të fillojmë të përdorim shtesën emmet. Hyni

Tani shtypni tastin skedën. Si rezultat i këtyre hapave të thjeshtë do të marrim një etiketë hapëse dhe mbyllëse div, dhe kursori do të vendoset brenda, midis tyre.

Ju mund të bëni të njëjtën gjë me çdo etiketë. Për shembull, le të krijojmë një lidhje.

Tani klikoni skedën, dhe marrim sa vijon

Tani le të shohim se si të shtojmë klasat Dhe id. Kjo bëhet saktësisht në të njëjtën mënyrë si në css: klasa duke përdorur . , dhe duke përdorur id #

Si rezultat marrim

Është e njëjta gjë me id

Ne marrim sa vijon

Vini re se unë nuk e kam shkruar fjalën div, por thjesht vendos një pikë ose një hash dhe shkruaj atë që më duhej Klasa ose id. Çështja është se ne mund të kapërcejmë emrin e etiketës dhe më pas emmet ai do të kuptojë se çfarë etikete duhet të vendosë. Në shumicën e rasteve kjo do të jetë div, por nëse ju, për shembull, e shkruani këtë brenda një etikete ul, atëherë etiketa do të jetë li me të drejtën klasës ose id.

Nëse dëshironi të vendosni vetë ndonjë atribut, atëherë shkruani në kllapa katrore

Ne marrim sa vijon

Për të futur etiketat brenda etiketave të tjera, duhet të përdorni shenjën më të madhe se

Ne marrim sa vijon

Duke përdorur një simbol * ju mund të specifikoni se sa etiketa të tilla na duhen

Kjo është ajo që ne marrim

Nëse keni nevojë të shtoni një etiketë në të njëjtin nivel, përdorni shenjën +

#container>.left+.djathtas

Rezultati

Duke përdorur një simbol $ mund të specifikojmë që çdo etiketë duhet të numërohet automatikisht

Ul>li.artikulli$*5

Rezultati

Nëse keni nevojë për një zero të parë, atëherë shkruani shenjën $ 2 herë nëse 2 zero kryesore, atëherë 3 shenjë $ etj.

Nëse dëshironi të shtoni tekst brenda një etikete, duhet ta specifikoni në kllapa kaçurrelë

A (Disa tekst)

Rezultati

Disa tekst

Nëse gjatë paraqitjes ju nevojitet pak tekst, atëherë thjesht shkruani lorem

Rezultati

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, mollitia quibusdam voluptatibus fuga dolorem officiis animi gabim ex ea ipsa përjashtim ndodhi quis sunt ducimus rerum corrupti obcaecati ipsum quisquam.

Nëse keni nevojë për një numër të caktuar fjalësh, atëherë shkruani një numër që tregon numrin e fjalëve pas.

Rezultati

Lorem ipsum dolor.

Te krijosh html strukturë, thjesht shkruani shenjën !

Rezultati

Tani le të flasim se si emmet do të na ndihmojë në css

Aty thjesht duhet të shkruani shkronjat fillestare të pronës dhe vlerën, dhe më pas të klikoni skedën. Për shembull

Si rezultat marrim

Margjina: 10 px;

Disa veti kanë tashmë vlera të paracaktuara. Për shembull, në pronë rreshtimi i tekstit

Rezultati

Text-align: majtas;

Por ju mund ta ndryshoni atë thjesht duke shkruar shkronjën e vlerës pas shkurtimit të pronës. Për shembull, le të jetë në qendër.

Rezultati

Text-align: qendër;

Nuk ka kuptim të shqyrtojmë gjithçka. Dokumentacioni i shtojcave emmet mund te gjeni ketu: http://docs.emmet.io/cheat-sheet/

Në fund, ia vlen të thuhet se nëse për ndonjë arsye nuk ju pëlqen çelësi skedën, atëherë mund ta ndryshoni. Për ta bërë këtë, shkoni në rrugën e mëposhtme: Preferencat->Cilësimet e paketës->Emmet->Lidhjet e çelësave - e paracaktuar. Përdorni kërkimin ( cmd+f ose ndiqni rrugën Gjeni-> Gjeni) Përdorni kërkimin për të gjetur komandën "expand_abbreviation_by_tab". Mbi të, në grup çelësat, shkruar në thonjëza "skedë". Ndryshojeni këtë vlerë në tuajën, për shembull në "ctrl+e". Por kjo nuk është plotësisht e saktë. Do të jetë më mirë nëse kopjoni të gjithë këtë objekt dhe ngjisni në një skedar Lidhjet kryesore - Përdoruesi, dhe më pas ndryshoni shkurtoren e tastierës. Kjo është bërë në mënyrë që nëse ndodh diçka, ju mund të ktheni të gjitha cilësimet default duke përdorur skedarin Lidhjet e çelësave - e parazgjedhur.

Pra, kjo është ajo. Sot shikuam shtojcën emmet për redaktuesin e tekstit Tekst sublim. Nëse përdorni një redaktues tjetër, atëherë kërkoni këtë shtojcë për të në internet. Paç fat!

Në këtë artikull, ne do të shkarkojmë, instalojmë në Windows dhe Russify Sublime Text 3, gjithashtu do ta aktivizojmë duke përdorur çelësin e licencës dhe do të instalojmë Emmet në të.

Shkarkoni Tekstin Sublime 3

Mund ta shkarkoni Subline Text 3 nga faqja e internetit sublimetext.com, ose nga disku im Yandex (Unë e rekomandoj atë, pasi e instalova, Russified dhe aktivizova, dhe atje do të gjeni çelësat dhe Russification).

Instalimi i tekstit sublime 3

Instalimi i Subline Text 3 është shumë i thjeshtë, për ta bërë këtë, thjesht niseni dhe klikoni në butonin tjetër, nuk do të ndalem në këtë, nuk mendoj se dikush do të ketë ndonjë problem me këtë.

Rusifikimi i tekstit sublim 3

Shpaketoni arkivin ( SublimeText3RussianMenu.zip) dhe kopjoni dosjen E paracaktuar V" c:\Users\Username\AppData\Roaming\Sublime Text 3\Packages\» (Rruga për Windows 7/8/10)

Aktivizimi Teksti Sublime 3

Për të aktivizuar Subline text 3, hapni një dokument teksti Çelësi i licencës , kopjoni një nga çelësat prej tij, më pas hapni Subline dhe shkoni te " Referenca» (« Ndihmë«) - « Fut licencën» (« Fut licencën") futni çelësin dhe klikoni " Përdorni Licencën»

Instalimi i Emmet në tekstin sublim 3 dhe shtimi i kontrollit të paketës në të.

Hapni redaktorin dhe shtypni Ctrl+ ose " Pamje» — « Shfaq/fshih konsolën» (« Pamje» — « Shfaq tastierën"), pas së cilës një panel hyrje do të hapet në fund, futni kodin më poshtë në të, klikoni " Hyni", prisni pak dhe rinisni redaktorin.

Importo urllib.kërkesa,os,hashlib; h = "df21e130d211cfc94d9b0905775a7c0f" + "1e3d39e33b79698005270310898eea76"; pf = "Kontrolli i paketës.sublime-paketë"; ipp = sublime.unstalled_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); nga = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace(" ", "%20")).lexo(); dh = hashlib.sha256(nga).hexdigest(); print("Gabim në verifikimin e shkarkimit (ka %s në vend të %s), ju lutemi provoni instalimin manual" % (dh, h)) nëse dh != h other open(os.path.join(ipp, pf), "wb" ).shkruaj (nga)

Tani shkoni te skeda " Opsione» — « "ose shtypni kombinimin e tastit" Ctrl» + « Zhvendosja» + « P", pas së cilës do të shfaqet një dritare në të cilën zgjedhim " Instaloni paketën“(nëse nuk gabohem, rreshti 6).

Pas së cilës do të shfaqet një dritare tjetër në të cilën duhet të futni " Emmet“, do të shfaqen shumë oferta, klikoni tek e para (ku thjesht Emmet).

Presim pak derisa të hapet një skedë me përmbajtjen që Emmet është instaluar me sukses, mbyllim të gjitha skedat dhe rinisim redaktorin. Gjithçka mund të përdoret!

Me tre fjalë, si funksionon Emmett

Më lejoni t'ju jap disa shembuj për Emmet. Le të themi se kemi nevojë për një kornizë bazë të faqes në internet html5, për ta bërë këtë, thjesht shkruani "!" dhe shtypni "Tab".

Për të ndërtuar shpejt, për shembull, një bllok me një klasë kol-sm-6, duhet të futni " .col-sm-6" dhe shtypni "Tab", marrim "

Për të ndërtuar diçka të tillë:

thjesht fut këtë rresht të vogël " .row>.col-md-3*4>lorem"dhe shtypni" Tab«.

Siç mund ta shihni, Emmet është një shtesë shumë e lezetshme që shpejton shumë procesin e paraqitjes, gjëja kryesore është të dini se si ta përdorni saktë) Unë ju këshilloj të lexoni dokumentacionin.