Kuidas kasutada Google Chrome'i CSS-i silumiseks

Tööriist Inspect Element on suurepärane, kui tegemist on veebilehtede reaalajas silumisega. Seda tööriista saate kasutada veebisaidi eelvaate kuvamiseks ja kujunduse muutmiseks. See võimaldab teil seda teha ka ilma, et peaksite lehte uuesti laadima, kuvades kohe teie CSS-i muudatused.

Selles artiklis kirjeldatakse, kuidas vaadata CSS-i klasse ja nende rakendatud stiile aknas Inspect Element. See hõlmab ka seda, kuidas saate seda kasutada CSS-is tehtavate muudatuste reaalajas eelvaateks.

Inspect Element avamine Google Chrome'is

Võite külastada mis tahes veebisaiti ja avada akna Inspect Element, et näha, kuidas selle HTML- või CSS-kood välja näeb. See õpetus kasutab näidisveebisait demonstreerima.

Saate avada Google Chrome'is akna Inspect Element, vajutades nuppu F12 võti. Samuti saate lehel suvalises kohas paremklõpsata ja klõpsata Kontrollige.

Elemendi kontrollimise aken avaneb veebisaidi selle osa HTML-koodiga, millel paremklõpsasite. See on koht, kus saate ka muutke veebisaidi teksti Google Chrome'i abil.

Vahekaart Stiilid elemendi kontrollimise aknas

Aknas Kontrolli elementi all Elemendid vahekaardil on koht nii HTML- kui ka CSS-koodi vaatamiseks. HTML-koodi näete aknast Kontrolli elementi vasakul. CSS-koodi leiate paremalt, all Stiilid sakk.

Oletame, et teil oli HTML-element klassiga "card-padding", millele on rakendatud parem- ja vasakpoolne polster:

.card-padding {
 polsterdus-parem: 0vh;
 polster-vasak: 0vh;
}

Kui vaatasite selle veebisaidi eelvaadet brauseris, saate valida div element klassiga "card-padding". Kõik stiilid, mis on rakendatud klassile "card-padding", kuvatakse paremal all Stiilid sakk.

Kui hõljutate kursorit HTML-koodivaates elemendi kohal, tõstetakse see veebilehe osa veebibrauseris esile. HTML-elemendi tüüp koos klassinimedega kuvatakse ka elemendi kõrval asuvas dialoogiboksis.

Sel juhul näete lehel div-konteinerit, mille klassinimed "rida", "kaart-padding" ja "pb-5" on esile tõstetud.

Kuidas CSS-is reaalajas muudatusi teha

CSS-i saate muuta otse vahekaardilt Stiilid.

1. Kasutades sellel veebisaidil, paremklõpsake esimesel pealkirjal.
2. Sellel konkreetsel h4 pealkirjal näete klassi, mida nimetatakse "tekstihalliks" ja mille värv on #8a8a8a.
3. Muutke selle asemel värvi millekski muuks, näiteks oranžiks. Soovite muuta ainult väärtust ennast, mitte atribuudi nime, "värvi".
4. Näete, et pealkiri muutub tumehallist oranžiks.
5. Kui soovite teatud CSS-stiili keelata, tühjendage stiilist vasakul olev ruut.
6. Algsele komplektile saate lisada ka rohkem stiile. Uue atribuudi lisamise alustamiseks klõpsake atribuudi all või paremal. Uute stiilide lisamisel peaksite kasutama sama süntaksit, mida kasutaksite tavalises CSS-failis.
7. Kui vaatate kohalikku veebisaiti, saate jätkata CSS-i muudatuste tegemist, kuni jõuate oma kasutajaliidese nõutavale välimusele ja tundele lähemale. Pärast seda saate tehtud CSS-i muudatused oma kohalikku koodi tagasi kopeerida.

Kuidas muuta CSS-i kolmanda osapoole raamatukogudest või raamistikest

HTML-i elemente saate muuta ka siis, kui kasutate kolmanda osapoole teeke või raamistikke, näiteks Bootstrapi.

1. Kasutades sellel veebisaidil, paremklõpsake ühel lehel Bootstrapi nuppu.
2. Näete nupule rakendatud kahte klassi, "btn" ja "btn-primary". Bootstrapil on juba mõlemale klassile oma stiil. Tausta- ja äärisevärvidena kasutatavad värvid on #007bff. Muutke see millekski muuks, näiteks violetseks.
3. Kui vaatate kohaliku veebisaidi eelvaadet, saate seejärel lisada uued muudatused tagasi oma kohalikku koodi. Sõltuvalt teie CSS-i järjestusest võib teil olla vaja kasutage spetsiifilisemat CSS-i valijat. Näiteks lisage valija ette ".btn". See tühistab algse Bootstrapi stiili.

   .btn.btn-primary {
    taustavärv: violetne;
    äärevärv: violetne;
   }

Mida element.style tähendab vahekaardil Stiilid?

Igal HTML-i elemendil, mille elemendi kontrollimise aknas esile tõstate, on plokk element.styles. See on samaväärne HTML-i elemendi tekstisisese stiili lisamisega, selle asemel, et seda valija abil sihtida.

1. Paremklõpsake HTML-i elemendil. Lisage jaotisele element.style mis tahes stiil, näiteks:

   värvus: valge suitsu;

2. Näete, et ka HTML-elemendi kood on muutunud. HTML-elemendi koodil on nüüd uus rida:

   stiil="värvus: valge suitsu;"

Kuidas HTML-i alamelemendid stiili pärivad

Kui teil on ülem- ja alamelemendile rakendatud kaks erinevat stiiliväärtust, on alamelemendi väärtus ülimuslik.

1. Kasutades sellel veebisaidil, paremklõpsake veebisaidi välisservade suvalises kohas.
2. Akna Kontrolli elementi jaotises HTML keskenduge kahele konkreetsele HTML-i elemendile. Seal on element div, millele on rakendatud klass "sisu". Sellel HTML-i elemendil on alamelement h4, millele on rakendatud klass "text-grey".
3. Valige alam-h4 HTML-element ja keelake klassis "teksthall" värvistiil.
4. Valige HTML-i põhielement klassiga "sisu". Lisage klassi järgmine CSS-stiil:

   värv: punane;

   Kogu ülemdivisjonis olev tekst muutub punaseks. See muudatus kajastub ka alamelementidega, mis tähendab, et h4-l on samuti punane värv.
5. Valige alam-h4 HTML-element ja lisage klassile "text-grey" uus stiil:

   värv: roheline;

   See tühistab kõigi vanemate klasside stiili. H4 HTML-element muutub punasest roheliseks.
6. Kui vaatate klassi "sisu" stiili, näete ka läbikriipsutamist. See kinnitab, et alamelement h4 ületab vanema värvi.

CSS-i silumise eelised brauseris

CSS-i silumine brauseris võib säästa palju aega ja kiirendada kodeerimise töövoogu. See kehtib eriti siis, kui peate nägema, kuidas teie uued CSS-i muudatused mõjutavad teie veebisaidi kasutajaliidest reaalajas.

Saate seda tehnikat kasutada kohaliku koodi muutmise ja rakenduse uuesti laadimise asemel. See ei lase teil arvata, millised CSS-i väärtused töötavad, kuna saate nüüd vaadata kasutajaliidese muudatusi nende tegemise ajal.

Saate aknas Inspect Element teha muudatusi, kuni jõuate soovitud kujundusele lähedale. Kui olete selle teinud, saate koodi aknast Kontrolli elementi tagasi oma kohalikku koodi kopeerida. Saate siiski oma rakendust uuesti käivitada, et testida, kas teie uued CSS-i muudatused ikka töötavad.

See õpetus käsitles veebisaidi CSS-i silumise põhitõdesid akna Inspect Element abil, sealhulgas seda, kust CSS-i leida vahekaardilt Stiilid.

Samuti käsitleti seda, kuidas CSS-is muudatusi teha ja kasutajaliidese visuaalseid muudatusi reaalajas vaadata. Loodetavasti saate aru ka sellest, kuidas teha muudatusi, kui CSS kasutab kolmanda osapoole teeki, ja kuidas stiili pärimine töötab.

Elemendi kontrollimise aknaga saate teha palju muid huvitavaid asju.

7 mängulist asja, mida saate Inspect Elementiga teha

Loe edasi

Autori kohta