Kuinka käyttää Google Chromea CSS-virheenkorjaukseen

Inspect Element -työkalu on loistava, kun on kyse verkkosivujesi vianetsinnästä reaaliajassa. Tämän työkalun avulla voit esikatsella ja muuttaa verkkosivuston ulkoasua. Sen avulla voit myös tehdä sen ilman, että sinun tarvitsee ladata sivua uudelleen, jolloin CSS-muutoksesi näkyvät välittömästi.

Tässä artikkelissa käydään läpi CSS-luokkien ja niiden sovellettujen tyylien tarkastelu Inspect Element -ikkunassa. Se kattaa myös, kuinka voit käyttää tätä CSS: ään tekemiesi muutosten esikatseluun reaaliajassa.

Tarkastuselementin avaaminen Google Chromessa

Voit vierailla millä tahansa verkkosivustolla ja avata Inspect Element -ikkunan nähdäksesi, miltä sen HTML- tai CSS-koodi näyttää. Tämä opetusohjelma käyttää esimerkkisivusto näyttää.

Voit avata Tarkista elementti -ikkunan Google Chromessa painamalla F12 avain. Voit myös napsauttaa hiiren kakkospainikkeella mitä tahansa sivulla ja napsauttaa Tarkastaa.

Tarkista elementti -ikkuna avautuu HTML-koodille sen verkkosivuston osan kohdalla, jota napsautat hiiren kakkospainikkeella. Täällä voit myös muokata verkkosivun tekstiä Google Chromella.

Tyylit-välilehti Tarkista elementti -ikkunassa

Itse Tarkista elementti -ikkunan alla Elementit -välilehdellä on paikka tarkastella sekä HTML- että CSS-koodia. Näet HTML-koodin Tarkista elementti -ikkunan vasemmalla puolella. Löydät CSS-koodin oikealta, alta Tyylit -välilehti.

Oletetaan, että sinulla oli HTML-elementti, jossa on luokka nimeltä "card-padding", johon on sovellettu oikeaa ja vasenta täytetystä:

.card-täyte {
 pehmuste-oikea: 0vh;
 pehmuste-vasen: 0vh;
}

Jos esikatselit tätä verkkosivustoa selaimessa, voit valita div elementti "card-padding"-luokassa. Kaikki "card-padding" -luokkaan sovelletut tyylit näkyvät oikealla, alla Tyylit -välilehti.

Kun viet hiiren osoittimen elementin päälle HTML-koodinäkymässä, se verkkosivun osa korostuu verkkoselaimessa. HTML-elementin tyyppi ja mahdolliset luokkanimet näkyvät myös elementin vieressä olevassa valintaikkunassa.

Tässä tapauksessa näet sivulla div-säiliön, jossa on luokkanimet "row", "card-padding" ja "pb-5".

Kuinka tehdä muutoksia CSS: ään reaaliajassa

Voit muuttaa CSS: ää suoraan Tyylit-välilehdeltä:

1. Käyttämällä tämä sivusto, napsauta ensimmäistä otsikkoa hiiren kakkospainikkeella.
2. Tuossa tietyssä h4-otsikossa näet siihen sovelletun luokan, jonka nimi on "tekstiharmaa" ja jonka väri on #8a8a8a.
3. Vaihda sen sijaan väri johonkin muuhun, kuten oranssiin. Haluat muuttaa vain itse arvoa, et ominaisuuden nimeä, "väriä".
4. Näet otsikon muuttuvan tummanharmaasta oranssiksi.
5. Jos haluat poistaa tietyn CSS-tyylin käytöstä, poista valinta tyylin vasemmalla puolella olevasta ruudusta.
6. Voit myös lisätä tyylejä alkuperäiseen sarjaan. Aloita uuden lisääminen napsauttamalla omaisuuden alapuolella tai oikealla puolella. Sinun tulee käyttää samaa syntaksia kuin tavallisessa CSS-tiedostossa, kun lisäät uusia tyylejä.
7. Jos esikatselet paikallista verkkosivustoa, voit jatkaa CSS-muutosten tekemistä, kunnes pääset lähemmäksi käyttöliittymäsi vaadittua ulkoasua. Tämän jälkeen voit kopioida tekemäsi CSS-muutokset takaisin paikalliseen koodiisi.

CSS: n muokkaaminen kolmannen osapuolen kirjastoista tai kehyksistä

Voit myös tehdä muutoksia HTML-elementteihin, jos käytät kolmannen osapuolen kirjastoja tai kehyksiä, kuten Bootstrapia.

1. Käyttämällä tämä sivusto, napsauta hiiren kakkospainikkeella jotakin sivulla olevista Bootstrap-painikkeista.
2. Näet kaksi luokkaa painikkeeseen, "btn" ja "btn-primary". Bootstrapilla on jo oma tyylinsä, jota sovelletaan molempiin näihin luokkiin. Tausta- ja reunavärinä käytetyt värit ovat #007bff. Muuta tämä joksikin muuksi, kuten violetiksi.
3. Jos esikatselet paikallista verkkosivustoa, voit lisätä uudet muutokset takaisin paikalliseen koodiisi. CSS: n järjestyksestä riippuen saatat tarvita käytä tarkempaa CSS-valitsinta. Esimerkiksi, lisää valitsimen eteen ".btn". Tämä ohittaa alkuperäisen Bootstrap-tyylin.

   .btn.btn-primary {
    taustaväri: violetti;
    reunan väri: violetti;
   }

Mitä element.style tarkoittaa Tyylit-välilehdellä?

Jokaisessa Inspect Element -ikkunassa korostamassasi HTML-elementissä on element.styles-lohko. Tämä vastaa upotetun tyylin lisäämistä HTML-elementtiin sen sijaan, että kohdistaisit siihen valitsimen avulla.

1. Napsauta hiiren kakkospainikkeella HTML-elementtiä. Lisää element.style-osioon mikä tahansa tyyli, kuten:

   väri: whitesmoke;

2. Näet, että myös HTML-elementin koodi on muuttunut. HTML-elementin koodilla on nyt uusi rivi:

   tyyli ="väri: whitesmoke;"

Kuinka lapsi-HTML-elementit perivät tyylin

Jos olet käyttänyt kahta eri tyyliarvoa ylä- ja alaelementtiin, alielementin arvo on ensisijainen.

1. Käyttämällä tämä sivusto, napsauta hiiren kakkospainikkeella mitä tahansa verkkosivuston ulkoreunaa.
2. Keskity Tarkista elementti -ikkunan HTML-osiossa kahteen tiettyyn HTML-elementtiin. Siellä on ylätason div-elementti, johon on sovellettu "content"-luokkaa. Tässä HTML-elementissä on h4-alielementti, johon on sovellettu "text-grey"-luokkaa.
3. Valitse lapsi h4 HTML -elementti ja poista värityyli "tekstiharmaa" luokassa.
4. Valitse ylätason HTML-elementti "sisältö"-luokassa. Lisää seuraava CSS-tyyli luokkaan:

   väri punainen;

   Kaikki ylätason div: n teksti muuttuu punaiseksi. Tämä muutos siirtyy myös alatason elementteihin, mikä tarkoittaa, että h4:ssä on myös punainen väri.
5. Valitse ali h4 HTML -elementti ja lisää uusi tyyli "text-grey" -luokkaan:

   väri: vihreä;

   Tämä ohittaa kaikkien vanhempien luokkien tyylin. H4 HTML -elementti muuttuu punaisesta vihreäksi.
6. Näet myös yliviivauksen, jos tarkastelet "sisältö" -luokan tyyliä. Tämä vahvistaa, että h4-alaelementti ohittaa vanhemman värin.

CSS-virheenkorjauksen edut selaimessa

CSS-virheenkorjaus selaimessasi voi säästää paljon aikaa ja nopeuttaa koodaustyönkulkua. Tämä pätee erityisesti, jos haluat nähdä, kuinka uudet CSS-muutoksesi vaikuttavat verkkosivustosi käyttöliittymään reaaliajassa.

Voit käyttää tätä tekniikkaa sen sijaan, että tekisit muutoksia paikalliseen koodiisi ja lataat sovelluksesi uudelleen. Tämä säästää sinua arvaamasta, mitkä CSS-arvot toimivat, sillä voit nyt tarkastella käyttöliittymämuutoksiasi niitä tehdessäsi.

Voit tehdä muutoksia Tarkista elementti -ikkunaan, kunnes saavutat haluamasi mallin. Kun olet saanut, voit kopioida koodin Tarkasta elementti -ikkunasta takaisin paikalliseen koodiisi. Voit silti suorittaa sovelluksesi uudelleen ja testata, että uudet CSS-muutoksesi toimivat edelleen.

Tämä opetusohjelma käsitteli verkkosivuston CSS-virheenkorjauksen perusteet Inspect Element -ikkunan avulla, mukaan lukien CSS: n löytäminen Tyylit-välilehdeltä.

Se käsitteli myös kuinka tehdä muutoksia CSS: ään ja tarkastella käyttöliittymän visuaalisia muutoksia reaaliajassa. Toivottavasti ymmärrät myös, kuinka tehdä muutoksia, kun CSS käyttää kolmannen osapuolen kirjastoa, ja kuinka tyylin periytyminen toimii.

Tarkasta elementti -ikkunassa voit tehdä monia muita mielenkiintoisia asioita.

7 leikkisää asiaa, joita voit tehdä Inspect Elementillä

Lue Seuraava

Kirjailijasta