Kaip greičiau rašyti HTML / CSS naudojant „Emmet Cheat-Codes“

„Emmet“ yra viena iš mano mėgstamiausių „VS Code“ integruotų funkcijų. Jis taip pat prieinamas kaip plėtinys kituose kodų redaktoriuose.

Pagalvokite apie Emmetą kaip apie trumpinį. Su juo galite greitai parašyti daug kodo. Tai labai pagreitina jūsų HTML ir CSS darbo eigą.

Suprasti, kaip naudotis „Emmet“, tiesiogine to žodžio prasme yra supervalstybė. Kai kurie netgi pavadino jį koduojančiu „cheat-code“. ?

Ir tai tik viena iš daugelio nuostabių integruotų „VS Code“ funkcijų.

Neseniai aš pradėjau išsamų ir išsamų kursą „ Tapk VS Code SuperHero“ . Jis labai išsamiai aprėpia visus VS kodekso aspektus.

Šis straipsnis yra pagrįstas vienu iš 11 kurso skyrių: Rašymas ir formatavimas .

HTML

Naudodamiesi „Emmet“ galite greitai sukurti HTML katilą akimirksniu. HTML faile tiesiog įveskite !ir pamatysite, kad Emmetas pasirodė kaip pasiūlymas. Dabar pataikė Enter. Čia jūs turite pagrindinį tuščią HTML tinklalapį, paruoštą naudoti.

Jei dar niekada nematėte HTML ir neturite supratimo, kas visa tai yra, nesijaudinkite. Aš tik demonstruoju „VS Code“ ir „Emmet“ galimybes. Šiuo metu neturite žinoti, ką tai reiškia.

Pagrindinės žymos

Norėdami sukurti pagrindines HTML žymes, tiesiog įveskite žymos pavadinimą ir paspauskite Enter. Atkreipkite dėmesį, kaip Emmetas žymeklį įdeda į žymę. Dabar esate pasirengę toliau rašyti žymos viduje.

  • Pabandykite įvesti: divtada Enter, arba h1 Enter, arba p Enter.
  • Tai taip pat veikia: bqa , hdra , ftra , btna ir sectskyriui.

Užsiėmimai

Jei esate susipažinę su CSS, Emmetas tuo pačiu būdu nurodo klases, naudodamas a .. Norėdami apibrėžti klasę kartu su žyma, paprasčiausiai pridėkite ją taip:

  • div.wrapper ->
  • h1.header.center ->

Asmens tapatybės dokumentai

Id darbas labai panašus:

  • div#hero ->

Derinant

Galite sujungti šiuos elementus:

  • div#hero.wrapper ->

Atributai

Taip pat galime nurodyti žymių atributus:

  • img[src="cat.jpg"][alt="Cute cat pic"] ->

Turinys

Norėdami į žymą įtraukti turinį, mes tiesiog apvyniojame turinį garbanotais petnešomis { },.

  • p{This is a paragraph} ->

    This is a paragraph

Broliai ir seserys

Tiesiog gerėja. Mes taip pat galite nurodyti brolius ir seseris ir vaikus taip pat galima naudoti +ir >simbolių.

  • section+section ->
  • ul>li ->

    Kopti

    Jūs turite pabandyti įsivaizduoti, ką statote savo galvoje, kai rašote „Emmet“ trumpinį. Šiame pavyzdyje „užlipsime“ medžiu naudodamiesi ^.

    div+div>p>span+em^bq

    Rezultatas:

    Čia norėjome, kad blokinė citata būtų tame pačiame lygyje kaip ir pastraipa. Dėl to mums reikėjo „lipti aukštyn“. Priešingu atveju tai būtų pastraipos viduje.

    Grupavimas

    Jei jūsų struktūra yra labai sudėtinga, galbūt norėsite grupuoti žymes, o ne keliauti lipant.

    Šiame pavyzdyje sukursime antraštę ir poraštę nelipdami naudodami skliaustus ( ).

    div>(header>ul>li>a)+footer>p

    Rezultatas:

      Dauginimas ir $

      Mes galime sugeneruoti kelias žymas, daugindami ( *) ir skaičiaus elementus iš eilės naudodami dolerio ženklą ( $).

      • ul>li*5 ->
        • ul>li{Item $}*3 ->
          • Item 1
          • Item 2
          • Item 3

        Jūs netgi galite pritaikyti numeracijos seką užpildydami nuliais, pradedant nuo konkretaus skaičiaus, ir netgi atvirkštine kryptimi.

        Įklotas su nuliais: ul>li.item$$$*5

        Rezultatas:

          Pradėkite nuo konkretaus skaičiaus: ul>[email protected]*5

          Rezultatas:

            Atvirkštinė kryptis: ul>[email protected]*5

            Rezultatas:

              Konkretaus skaičiaus atvirkštinė kryptis: ul>[email protected]*5

              Rezultatas:

                Numanomi žymų pavadinimai

                Yra tam tikrų žymų, kurių nereikia įvesti, ir jas galima numanyti.

                • Iš pradžių apibrėžta klasė be žymos bus suprantama kaip a .

                  .wrapper ->

                • Pažymėjimo etiketėje apibrėžta klasė bus suprantama kaip a .

                  em>.emphasis ->

                • Sąraše apibrėžta klasė bus suprantama kaip sąrašo elementas.

                  ul>.item ->

                  • Lentelėje apibrėžta klasė bus numanoma kaip ir eilėje būtų a .

                    table>.row>.col ->

                  Apvyniokite žymėmis

                  Bus atvejų, kai turėsite esamą kodą, kurį norite suvynioti su žyma. Su Emmetu galime lengvai susitvarkyti.

                  Tiesiog pažymėkite kodą, kurį norite suvynioti, ir atidarykite komandų padėklą ( F1). Tada ieškokite Emmet: Wrap with Abbreviation. Tada jums bus pateiktas dialogo langas, kuriame galėsite įvesti elementą.

                  test -> test

                  Šiame dialogo lange taip pat galite naudoti standartinę „Emmet“ sintaksę. Pabandykite suvynioti tekstą su span.wrapper.

                  Pagal numatytuosius nustatymus ši funkcija nėra priskirta spartiesiems klavišams. Taigi, jei dažnai jį naudojate, galite pridėti tam pritaikytą nuorodą.

                  Loremas Ipsumas

                  „Lorem Ipsum“ yra fiktyvus tekstas, kurį kūrėjai naudoja duomenims puslapyje pateikti. Tiesiog įveskite loremir paspauskite Enter. „Emmet“ sugeneruos 30 netikrų tekstų žodžių, kuriuos galėsite naudoti kaip užpildą savo projekte.

                  Taip pat galima apibrėžti sugeneruotų žodžių kiekį.

                  • lorem10 suteiks jums 10 žodžių atsitiktinio teksto.

                  Viskas kartu

                  Panaudokime keletą dalykų, kuriuos išmokome iki šiol. Išbandykite:

                  ul.my-list>lorem10.item-$*5

                  Rezultatas:

                  
    
                    
     
                  • Lorem ipsum dolor sit amet.
                    • 
     
                  • Numquam repudiandae fuga porro consequatur?
                    • 
     
                  • Culpa, est. Tenetur, deleniti nihil?
                    • 
     
                  • Numquam architecto corrupti quam repudiandae.
                    •

                  CSS

                  CSS sistemoje „Emmet“ turi kiekvienos nuosavybės santrumpą. Aš jų visų neišvardinsiu, bet nurodysiu dažniausiai naudojamus. Norėdami pamatyti visą sąrašą, žr. „Emmet“ apgaulės lapą.

                  Pozicija

                  • pos-> position:relative;(pagal nutylėjimą)
                  • pos:s ->position:static;
                  • pos:a ->position:absolute;
                  • pos:r ->position:relative;
                  • pos:f ->position:fixed;

                  Ekranas

                  • d-> display:block;(pagal nutylėjimą blokuoti)
                  • d:n ->display:none;
                  • d:b ->display:block;
                  • d:f ->display:flex;
                  • d:if ->display:inline-flex;
                  • d:i ->display:inline;
                  • d:ib ->display:inline-block;

                  Žymeklis

                  • cur ->cursor:pointer;

                  Spalva

                  • c ->color:#000;
                  • c:r ->color:rgb(0, 0, 0);
                  • c:ra ->color:rgba(0, 0, 0, .5);
                  • op ->opacity: ;

                  Marža ir paminkštinimas

                  • m ->margin: ;
                  • m:a ->margin:auto;
                  • mt ->margin-top: ;
                  • mr ->margin-right: ;
                  • mb ->margin-bottom: ;
                  • ml ->margin-left: ;
                  • p ->padding: ;
                  • pt ->padding-top: ;
                  • pr ->padding-right: ;
                  • pb ->padding-bottom: ;
                  • pl ->padding-left: ;

                  Dėžutės dydis

                  • bxz ->box-sizing:border-box;

                  Plotis

                  • w ->width: ;
                  • h ->height: ;
                  • maw ->max-width: ;
                  • mah ->max-height: ;
                  • miw ->min-width: ;
                  • mih ->min-height: ;

                  Pasienis

                  • bd ->border: ;
                  • bd+ ->border:1px solid #000;
                  • bd:n ->border:none;

                  Emmetas nuostabus!

                  Naudodami „Emmet“ galite sukurti tikrai sudėtingą HTML struktūrą su viena eilute. Tai tikrai nuostabu. Jis taip pat veikia su CSS.

                  Galite pamatyti, kaip Emmetas gali smarkiai padidinti jūsų efektyvumą ir greitį rašydamas HTML ir CSS.

                  Jei norite dar labiau padidinti savo efektyvumą ir greitį naudodami „VS Code“, patikrinkite mano kursą „ Tapkite„ VS Code SuperHero ““.

                  Kursas gilinasi į šias sąvokas ir padeda tapti greitu, efektyviu superherojų kūrėju :)

                  Aš Jesse iš Teksaso. Peržiūrėkite kitą mano turinį ir praneškite man, kaip galiu jums padėti jums tapti žiniatinklio kūrėju.

                  • Prenumeruokite „My YouTube“
                  • Sakyk labas! „Instagram“ „Twitter“
                  • Prisiregistruokite gauti mano naujienlaiškį