Cum să utilizați Google Chrome pentru a depana CSS

Instrumentul Inspect Element este excelent atunci când vine vorba de depanarea paginilor dvs. web în timp real. Puteți folosi acest instrument pentru a ajuta la previzualizarea și modificarea designului unui site web. De asemenea, vă permite să faceți acest lucru fără a fi nevoie să reîncărcați pagina, afișând imediat modificările CSS.

Acest articol va descrie cum să vizualizați clasele CSS și stilurile lor aplicate în fereastra Inspectare element. Acesta va acoperi, de asemenea, modul în care puteți utiliza acest lucru pentru a previzualiza modificările pe care le faceți CSS în timp real.

Deschiderea Inspect Element în Google Chrome

Puteți vizita orice site web și puteți deschide fereastra Inspectați elementul pentru a vedea cum arată codul său HTML sau CSS. Acest tutorial va folosi un exemplu de site web a demonstra.

Puteți deschide fereastra Inspectare element în Google Chrome apăsând butonul F12 cheie. De asemenea, puteți face clic dreapta oriunde pe pagină și faceți clic pe Inspecta.

Fereastra Inspectați elementul se va deschide la codul HTML pentru partea site-ului web în care ați făcut clic dreapta. Aici poți și tu

editați textul site-ului web folosind Google Chrome.

Fila Stiluri din fereastra Inspectare element

În fereastra Inspectați elementul, sub Elemente fila, există un loc pentru a vizualiza atât codul HTML, cât și codul CSS. Puteți vedea codul HTML în partea stângă a ferestrei Inspectați element. Puteți găsi codul CSS în dreapta, sub Stiluri fila.

Să presupunem că aveți un element HTML cu o clasă numită „card-padding”, cu umplutură la dreapta și la stânga aplicată:

.căptușeală de carduri {
 padding-dreapta: 0vh;
 padding-stânga: 0vh;
}

Dacă ați previzualizat acest site web în browser, veți putea selecta div element cu clasa „card-padding”. Orice stil aplicat clasei „card-padding” va apărea în partea dreaptă, sub Stiluri fila.

Când treceți cu mouse-ul peste un element din vizualizarea cod HTML, acea parte a paginii web va fi evidențiată în browserul web. Tipul de element HTML, împreună cu orice nume de clasă se vor afișa, de asemenea, într-o casetă de dialog lângă element.

În acest caz, veți vedea containerul div cu numele clasei „row”, „card-padding” și „pb-5” evidențiate pe pagină.

Cum să faceți modificări la CSS în timp real

Puteți schimba CSS-ul direct din fila Stiluri:

1. Folosind acest site web, faceți clic dreapta pe primul titlu.
2. Pe acel titlu specific h4, veți vedea o clasă aplicată acesteia numită „text-grey” cu o culoare #8a8a8a.
3. Schimbați culoarea cu altceva, cum ar fi portocaliu. Doriți doar să schimbați valoarea în sine, și nu numele proprietății, „culoare”.
4. Veți vedea că titlul se schimbă de la gri închis la portocaliu.
5. Dacă doriți să dezactivați un anumit stil CSS, debifați caseta din stânga stilului.
6. De asemenea, puteți adăuga mai multe stiluri la setul original. Faceți clic chiar sub sau în dreapta unei proprietăți pentru a începe să adăugați una nouă. Ar trebui să utilizați aceeași sintaxă ca și într-un fișier CSS obișnuit atunci când adăugați stiluri noi.
7. Dacă previzualizați un site web local, puteți continua să faceți modificări CSS până când vă apropiați de aspectul necesar pentru interfața dvs. de utilizare. După aceea, puteți copia modificările CSS pe care le-ați făcut înapoi în codul local.

Cum se modifică CSS din biblioteci sau cadre terțe

De asemenea, puteți modifica elementele HTML dacă utilizați biblioteci sau cadre terțe, cum ar fi Bootstrap.

1. Folosind acest site web, faceți clic dreapta pe unul dintre butoanele Bootstrap de pe pagină.
2. Veți vedea două clase aplicate butonului, „btn” și „btn-primary”. Bootstrap are deja propriul stil aplicat ambelor clase. Culorile care sunt folosite ca culori de fundal și de chenar sunt #007bff. Schimbați acest lucru cu altceva, cum ar fi Violet.
3. Dacă previzualizați un site web local, puteți apoi să adăugați noile modificări înapoi în codul local. În funcție de ordinea CSS-ului dvs., poate fi necesar utilizați un selector CSS mai specific. De exemplu, prefixați selectorul cu „.btn”. Acest lucru va înlocui stilul original Bootstrap.

   .btn.btn-primar {
    culoare de fundal: violet;
    culoare-chenar: violet;
   }

Ce înseamnă element.style în fila Stiluri?

Fiecare element HTML pe care îl evidențiați în fereastra Inspectați element are un bloc element.styles. Acesta este echivalentul cu adăugarea unui stil inline la elementul HTML, în loc să îl vizați folosind un selector.

1. Faceți clic dreapta pe un element HTML. Adăugați orice stil în secțiunea element.style, cum ar fi:

   culoare: fum alb;

2. Veți vedea că s-a schimbat și codul pentru elementul HTML. Codul din elementul HTML are acum noua linie:

   stil="culoare: fum alb;"

Cum moștenesc elementele HTML pentru copii stilul

Dacă aveți două valori de stil diferite aplicate unui element părinte și unui element copil, valoarea din elementul copil va avea prioritate.

1. Folosind acest site web, faceți clic dreapta oriunde în marginile exterioare ale site-ului web.
2. În secțiunea HTML a ferestrei Inspectați element, concentrați-vă pe două elemente HTML specifice. Există un element div părinte cu o clasă „conținut” aplicată. Acest element HTML are un element copil h4, cu o clasă „text-gri” aplicată.
3. Selectați elementul HTML h4 copil și dezactivați stilul de culoare în clasa „text-gri”.
4. Selectați elementul HTML părinte cu clasa „conținut”. Adăugați următorul stil CSS la clasă:

   culoarea rosie;

   Tot textul din div-ul părinte va deveni roșu. Această modificare va fi, de asemenea, în cascadă la elementele copil, ceea ce înseamnă că h4 va avea și o culoare roșie.
5. Selectați elementul HTML h4 copil și adăugați un stil nou la clasa „text-gri”:

   culoare: verde;

   Acest lucru va suprascrie stilul oricăror clase părinte. Elementul HTML h4 va deveni de la roșu la verde.
6. Veți vedea, de asemenea, un baraj dacă vedeți stilul pentru clasa „conținut”. Acest lucru confirmă faptul că elementul copil h4 suprascrie culoarea părintelui.

Beneficiile depanării CSS-ului dvs. în browser

Depanarea CSS în browser vă poate economisi mult timp și vă poate accelera fluxul de lucru de codare. Acest lucru este valabil mai ales dacă trebuie să vedeți modul în care noile modificări CSS au impact asupra interfeței de utilizare a site-ului dvs. web în timp real.

Puteți folosi această tehnică în loc să faceți modificări codului local și să reîncărcați aplicația. Acest lucru vă va scuti de a ghici ce valori CSS ar funcționa, deoarece acum puteți vedea modificările UI pe măsură ce le faceți.

Puteți face modificări în fereastra Inspectați element până când vă apropiați de designul dorit. După ce aveți, puteți copia codul din fereastra Inspectați elementul, înapoi în codul local. Puteți încă să rulați din nou aplicația pentru a testa dacă noile modificări CSS încă funcționează.

Acest tutorial a acoperit elementele de bază despre cum să depanați CSS-ul unui site web utilizând fereastra Inspect Element, inclusiv unde să găsiți CSS-ul în fila Stiluri.

De asemenea, a descris cum să faceți modificări la CSS și să vizualizați modificările vizuale ale interfeței de utilizare în timp real. Sperăm că înțelegeți și cum să faceți modificări atunci când CSS utilizează o bibliotecă terță parte și cum funcționează moștenirea stilurilor.

Există multe alte lucruri interesante pe care le puteți face cu fereastra Inspectați element.

7 lucruri jucăușe pe care le poți face cu Inspect Element

Citiți în continuare

Despre autor