Kaip naudoti „Google Chrome“ CSS derinimui

Elemento tikrinimo įrankis yra puikus, kai reikia derinti tinklalapius realiuoju laiku. Šį įrankį galite naudoti norėdami peržiūrėti ir pakeisti svetainės dizainą. Tai taip pat leidžia jums tai padaryti neperkraunant puslapio ir nedelsiant rodomi CSS pakeitimai.

Šiame straipsnyje apžvelgsime, kaip peržiūrėti CSS klases ir jų taikomus stilius elemento tikrinimo lange. Taip pat bus aprašyta, kaip galite tai naudoti norėdami peržiūrėti CSS pakeitimus realiuoju laiku.

„Google Chrome“ atidaromas tikrinimo elementas

Galite apsilankyti bet kurioje svetainėje ir atidaryti elemento tikrinimo langą, kad pamatytumėte, kaip atrodo jos HTML arba CSS kodas. Ši pamoka bus naudojama svetainės pavyzdys demonstruoti.

Galite atidaryti „Google Chrome“ elemento tikrinimo langą paspausdami F12 Raktas. Taip pat galite dešiniuoju pelės mygtuku spustelėti bet kurią puslapio vietą ir spustelėti Apžiūrėti.

Elemento tikrinimo langas atsidarys ir bus rodomas tos svetainės dalies, kurią spustelėjote dešiniuoju pelės klavišu, HTML kodas. Čia taip pat galite redaguoti svetainės tekstą naudodami Google Chrome.

Stilių skirtukas elemento tikrinimo lange

Pačiame lange Patikrinti elementą po Elementai skirtuke, yra vieta, kur peržiūrėti ir HTML, ir CSS kodus. Elemento tikrinimo lango kairėje galite pamatyti HTML kodą. CSS kodą rasite dešinėje, po Stiliai skirtukas.

Tarkime, kad turėjote HTML elementą su klase, pavadinta „card-padding“, su dešiniuoju ir kairiuoju užpildymu:

.kortelių užpildymas {
 pamušalas-dešinė: 0vh;
 paminkštinimas kairėje: 0vh;
}

Jei peržiūrėjote šią svetainę naršyklėje, galėtumėte pasirinkti div elementas su "card-padding" klase. Bet koks „kortelių užpildymo“ klasei pritaikytas stilius bus rodomas dešinėje, po Stiliai skirtukas.

Užvedus pelės žymeklį virš elemento HTML kodo rodinyje, ta tinklalapio dalis bus paryškinta žiniatinklio naršyklėje. HTML elemento tipas kartu su klasių pavadinimais taip pat bus rodomas šalia elemento esančiame dialogo lange.

Tokiu atveju puslapyje matysite paryškintą „div“ konteinerį su klasių pavadinimais „row“, „card-padding“ ir „pb-5“.

Kaip atlikti CSS pakeitimus realiuoju laiku

CSS galite pakeisti tiesiai iš skirtuko Stiliai:

1. Naudojant ši svetainė, dešiniuoju pelės mygtuku spustelėkite pirmąją antraštę.
2. Toje konkrečioje h4 antraštėje matysite jai pritaikytą klasę, vadinamą „teksto pilka“, kurios spalva yra #8a8a8a.
3. Vietoj to pakeiskite spalvą į kitą, pvz., oranžinę. Norisi pakeisti tik pačią vertę, o ne nuosavybės pavadinimą, „spalvą“.
4. Pamatysite, kad antraštė pasikeis iš tamsiai pilkos į oranžinę.
5. Jei norite išjungti tam tikrą CSS stilių, panaikinkite stiliaus kairėje esančio langelio žymėjimą.
6. Taip pat galite pridėti daugiau stilių prie pradinio rinkinio. Spustelėkite tiesiai po nuosavybe arba jos dešinėje, kad pradėtumėte pridėti naują. Pridėdami naujų stilių turėtumėte naudoti tą pačią sintaksę, kaip ir įprastame CSS faile.
7. Jei peržiūrite vietinę svetainę, galite tęsti CSS pakeitimus, kol priartėsite prie reikiamos vartotojo sąsajos išvaizdos. Po to atliktus CSS pakeitimus galite nukopijuoti atgal į vietinį kodą.

Kaip modifikuoti CSS iš trečiųjų šalių bibliotekų ar rėmų

Taip pat galite keisti HTML elementus, jei naudojate trečiųjų šalių bibliotekas arba sistemas, pvz., „Bootstrap“.

1. Naudojant ši svetainė, dešiniuoju pelės mygtuku spustelėkite vieną iš „Bootstrap“ mygtukų puslapyje.
2. Pamatysite dvi mygtukui pritaikytas klases: „btn“ ir „btn-primary“. „Bootstrap“ jau turi savo stilių, pritaikytą abiem šioms klasėms. Spalvos, kurios naudojamos kaip fono ir kraštinės spalvos, yra #007bff. Pakeiskite tai į ką nors kitą, pvz., Violetinę.
3. Jei peržiūrite vietinę svetainę, galite pridėti naujus pakeitimus į vietinį kodą. Atsižvelgiant į jūsų CSS tvarką, jums gali prireikti naudokite konkretesnį CSS parinkiklį. Pavyzdžiui, prieš parinkiklį įrašykite „.btn“. Tai pakeis originalų „Bootstrap“ stilių.

   .btn.btn-primary {
    fono spalva: violetinė;
    kraštinės spalva: violetinė;
   }

Ką Stilių skirtuke reiškia element.style?

Kiekvienas HTML elementas, kurį pažymėjote lange Elemento tikrinimas, turi elementą.styles bloką. Tai prilygsta tiesioginio stiliaus pridėjimui prie HTML elemento, užuot nukreipus jį į parinkiklį.

1. Dešiniuoju pelės mygtuku spustelėkite HTML elementą. Skiltyje element.style pridėkite bet kokį stilių, pvz.:

   spalva: whitesmoke;

2. Pamatysite, kad pasikeitė ir HTML elemento kodas. HTML elemento kodas dabar turi naują eilutę:

   stilius ="spalva: whitesmoke;"

Kaip vaikų HTML elementai paveldi stilių

Jei pirminiam ir antriniam elementui taikomos dvi skirtingos stiliaus reikšmės, pirmenybė bus teikiama antrinio elemento vertei.

1. Naudojant ši svetainė, dešiniuoju pelės mygtuku spustelėkite bet kurią išorinių svetainės kraštų vietą.
2. Elemento tikrinimo lango HTML skiltyje sutelkite dėmesį į du konkrečius HTML elementus. Yra pirminis div elementas, kuriam taikoma „turinio“ klasė. Šiame HTML elemente yra antrinis elementas h4, kuriam taikoma pilka teksto klasė.
3. Pasirinkite antrinį h4 HTML elementą ir išjunkite spalvų stilių „teksto pilka“ klasėje.
4. Pasirinkite pirminį HTML elementą su „turinio“ klase. Į klasę pridėkite šį CSS stilių:

   spalva: raudona;

   Visas tekstas pirminiame div pasidarys raudonas. Šis pakeitimas taip pat pateks į antrinius elementus, o tai reiškia, kad h4 taip pat bus raudonos spalvos.
5. Pasirinkite antrinį h4 HTML elementą ir pridėkite naują stilių į "text-grey" klasę:

   spalva: žalia;

   Tai nepaisys visų tėvų klasių stiliaus. H4 HTML elementas pasidarys iš raudonos į žalią.
6. Taip pat matysite perbraukimą, jei peržiūrėsite „turinio“ klasės stilių. Tai patvirtina, kad antrinis elementas h4 yra viršesnis už pirminės spalvos spalvą.

CSS derinimo naršyklėje pranašumai

CSS derinimas naršyklėje gali sutaupyti daug laiko ir pagreitinti kodavimo eigą. Tai ypač aktualu, jei norite pamatyti, kaip nauji CSS pakeitimai paveiks jūsų svetainės vartotojo sąsają realiuoju laiku.

Galite naudoti šią techniką, o ne keisti vietinį kodą ir iš naujo įkelti programą. Tai neleis jums spėlioti, kokios CSS reikšmės veiks, nes dabar galėsite peržiūrėti vartotojo sąsajos pakeitimus juos atlikdami.

Galite keisti elemento tikrinimo langą, kol priartėsite prie norimo dizaino. Kai tai padarysite, galite nukopijuoti kodą iš lango Apžiūrėti elementą atgal į vietinį kodą. Vis tiek galite iš naujo paleisti programą, kad patikrintumėte, ar nauji CSS pakeitimai vis dar veikia.

Šiame vadove buvo aprašyti pagrindai, kaip derinti svetainės CSS naudojant langą Inspect Element, įskaitant tai, kur rasti CSS skirtuke Stiliai.

Taip pat buvo aprašyta, kaip atlikti CSS pakeitimus ir peržiūrėti vaizdinius vartotojo sąsajos pakeitimus realiuoju laiku. Tikimės, kad jūs taip pat suprantate, kaip atlikti pakeitimus, kai CSS naudoja trečiosios šalies biblioteką, ir kaip veikia stiliaus paveldėjimas.

Yra daug kitų įdomių dalykų, kuriuos galite padaryti naudodami langą Apžiūrėti elementą.

7 žaismingi dalykai, kuriuos galite padaryti naudodami apžiūros elementą

Skaitykite toliau

Apie autorių