Cum să aplicați CSS folosind instrumentul de dezvoltare a browserului

Căutați modalități de a vă stila site-ul cu un pic de CSS? Există diferite moduri de a face asta. În acest ghid, vă vom arăta cum să aplicați CSS folosind instrumentul pentru dezvoltatori de browser, împreună cu câteva exemple de lucruri pe care le puteți face.

Când dezvoltă o aplicație sau un site web, dezvoltatorii folosesc o mare varietate de instrumente care îi ajută să-și facă treaba. Unul dintre cele mai populare este instrumentul de dezvoltare de browser. Fără el, lucrul pe un site web ar fi mult mai complicat.

Majoritatea browserelor oferă propriul instrument de dezvoltator încorporat. Cele mai multe dintre ele sunt similare, dar au câteva opțiuni diferite. Având în vedere că aproape 66% dintre utilizatori folosesc Chrome, în acest ghid ne vom concentra asupra Instrument pentru dezvoltatori Chrome. Este unul dintre cele mai complete și se remarcă față de browsere prin performanța și varietatea de caracteristici.

Înainte de a trece la modul de aplicare a CSS utilizând instrumentul de dezvoltare a browserului, mai întâi, să ne familiarizăm cu instrumentul pentru dezvoltatori Chrome și ce puteți face cu acesta.

NOTĂ : Vom explica câteva concepte aici, dar pentru a urma acest ghid, vă recomandăm să aveți o înțelegere de bază a CSS și a modului în care funcționează.

Instrumentul pentru dezvoltatori Chrome

Mai întâi, trebuie să deschideți instrumentul în Chrome. Pentru asta, există 3 opțiuni:

• Apăsați F12 pe cuvântul cheie
• Faceți clic dreapta oriunde pe ecran și selectați Inspectați
• Apăsați pictograma cu trei puncte din dreapta sus, lângă avatarul dvs. de utilizator și accesați Mai multe instrumente > Instrumentul pentru dezvoltatori

Oricare dintre aceste trei opțiuni va deschide DevTools care ar trebui să arate așa. Instrumentul dvs. de dezvoltator poate arăta ușor diferit, dar elementele vor fi aceleași.

După cum vedeți, există mai multe file, asigurați-vă că vă aflați în fila Elemente care vă arată rezultatul HTML al site-ului web. Rețineți că instrumentul va prelua toate informațiile referitoare la fereastra curentă, adică fila activă din browser când ați deschis DevTools.

Puteți avea mai multe ferestre de instrumente pentru dezvoltatori deschise în același timp, fiecare afișând informațiile unei file diferite în browser.

Cum să găsiți un element HTML în instrumentul de dezvoltare a browserului

Dacă vă uitați mai atent la elementele din instrument, veți vedea că puteți deschide majoritatea elementelor făcând clic pe ele. În plus, elementele imbricate în alte elemente sunt evidențiate pe front-end atunci când treceți cu mouse-ul peste ele.

Privind diferitele elemente, puteți vedea elementele părinte HTML. Vă puteți scufunda în structura HTML deschizând fiecare element cu un clic. În majoritatea site-urilor, codul HTML este destul de lung, așa că poate fi plictisitor dacă trebuie să găsiți un anumit element. Cu atât mai mult dacă elementul pe care îl căutați este profund imbricat într-o listă mare de elemente părinte HTML.

Cu toate acestea, există o modalitate mult mai ușoară de a găsi un anumit element.

Găsirea unor elemente specifice

Pur și simplu faceți clic dreapta pe elementul pe care doriți să îl analizați și selectați Inspectați .

Când se deschide inspectorul, acel element va fi selectat și va apărea evidențiat în DevTools .

După cum puteți vedea în capturile de ecran de mai sus, am făcut clic pe un logo, așa că atunci când inspectăm elementul din instrumentul de dezvoltare, imaginea logo-ului este deja selectată și evidențiată. Acest lucru ne ajută să înțelegem profunzimea elementului din codul sursă HTML complet al site-ului.

Acum că știți cum să selectați anumite elemente folosind instrumentul pentru dezvoltatori, să facem un pas mai departe și să adăugăm un pic de CSS personalizat.

Editarea scriptului CSS live

Dacă aruncați o privire în partea dreaptă a ferestrei instrumentului de dezvoltare, veți vedea toate regulile CSS care sunt aplicate elementului pe care l-ați selectat sortate după moștenire.

Moștenirea este unul dintre principalele concepte CSS care descriu funcționalitatea CSS. Nu vă faceți griji dacă nu înțelegeți pe deplin ce este, vă vom explica în secțiunea următoare.

Pentru a aplica propriile reguli CSS pe instrumentul de dezvoltare, trebuie să le tastați sau să le lipiți acolo, imediat după declarația în stilul elementului:

În acest caz, urmând exemplul nostru, am schimbat lățimea, culoarea de fundal și chenarul logo-ului pe care l-am selectat anterior.

Puteți, de asemenea, să inserați scripturile în oricare dintre regulile CSS de pe bara laterală, în loc să o faceți pe element.style wrapper.

Moștenirea CSS pe instrumentul de dezvoltare a browserului

S-ar putea să vă întrebați ce rost are să aveți toate acele reguli CSS acolo dacă puteți aplica codul CSS pe oricare dintre ele și nu are nicio diferență.

După cum am menționat anterior, acestea sunt toate regulile CSS aplicate elementului selectat, sortate după moștenire.

Conceptul de moștenire descrie modul în care CSS este aplicat unui document HTML . Practic, controlează ce se întâmplă atunci când nu este specificată nicio valoare pentru o proprietate a unui element dat.

Dacă te uiți mai atent la captura de ecran de mai jos, vei vedea că toți selectoarele CSS de pe bara laterală vizează același element: elementul pe care l-ai selectat în secțiunea principală.

Dacă aplicați două sau mai multe reguli aceluiași element, cea care va fi aplicată este cea mai specifică. Acest lucru ar dezactiva comportamentul de moștenire, care se aplică proprietăților fără definiție.

În captura de ecran de mai sus, proprietatea de culoare de fundal a elementului <body> este dată de următoarea regulă:

 body.custom-background {
culoare de fundal: #d8d7e2;
}

Aceasta suprascrie toate celelalte reguli care se aplică pentru <body> deoarece are un selector mai specific care include clasa .custom-background .

Dacă doriți să aflați mai multe despre moștenirea CSS, puteți arunca o privire la această documentație.

Acum că înțelegeți mai bine elementele sale, să vedem cum puteți aplica CSS folosind instrumentul de dezvoltare a browserului.

Cum să aplicați un script CSS folosind instrumentul de dezvoltare a browserului

După ce ați lucrat cu instrumentul de dezvoltare și după ce ați scris scriptul CSS, trebuie să copiați codul CSS din instrumentul pentru dezvoltatori și să îl adăugați la fișierele CSS ale site-ului dvs. web. În această secțiune, vă vom arăta cum să faceți acest lucru pas cu pas.

1) Obțineți selectorul CSS

În primul rând, trebuie să prindeți selectorul. Deschideți instrumentul pentru dezvoltatori și faceți clic pe elementul HTML pe care doriți să îl editați, astfel încât să fie evidențiat. Apoi, faceți clic dreapta pe elementul evidențiat și accesați Copiere > Selector CSS .

2) Rafinați selectorul

În captura de ecran de mai sus, selectorul CSS pe care l-am copiat în clipboard este:

 .site-branding > div:nth-child(1) > span:nth-child(1) > img

În unele cazuri, acest selector ar putea să nu funcționeze, așa că trebuie să-l rafinați pentru a-l face mai specific. De exemplu, puteți utiliza următorul selector care este mult mai specific și îl va suprascrie pe cel anterior:

 div.site-branding > div.site-logo > span.custom-logo-link > img.custom-logo

3) Copiați regula CSS

După ce ați personalizat selectorul și ați confirmat că funcționează, copiați declarațiile de care aveți nevoie din bara laterală din dreapta a instrumentului de dezvoltare.

Pentru a face acest lucru, faceți clic dreapta pe regula CSS pe care ați adăugat-o la instrumentul de dezvoltare și selectați Copiați regula .

4) Adăugați codul dvs. CSS pe site-ul dvs. web

Pasul final este să adăugați codul CSS personalizat pe care tocmai l-ați creat folosind instrumentul de dezvoltare a browserului la fișierele de stil site-ului dvs., adunând împreună selectorul și declarația.

Pot exista mai multe moduri de a include CSS-ul personalizat în site-ul dvs., în funcție de configurația dvs. Multe plugin-uri și teme oferă propria casetă de editor CSS și, de asemenea, puteți adăuga scripturile direct în fișierele CSS ale temei. Să aruncăm o privire la câteva opțiuni diferite.

4.1) Editor CSS suplimentar al personalizării temei

O metodă simplă de a aplica CSS utilizând editorul CSS suplimentar al personalizării temei. Aceasta este o opțiune pe care WordPress ți-o oferă în mod implicit pentru a adăuga CSS personalizat și este prezentă pe toate site-urile web.

Pentru a adăuga codul CSS pe site, în tabloul de bord, accesați Aspect > Personalizare > CSS suplimentar. Lipiți regulile CSS în editor și apăsați Publicare .

Avantajul acestei metode este că nu aveți nevoie de instrumente suplimentare și puteți vedea o previzualizare live a codului înainte ca acesta să intre live.

4.2) Fișierul CSS al temei copil

Dacă utilizați o temă copil, puteți adăuga scripturi personalizate în fișierul style.css . Aceasta este o opțiune bună dacă aveți mult cod CSS.

Pentru a face acest lucru, deschideți fișierul style.css al temei copil și inserați acolo regulile dvs. CSS. În funcție de tema copilului dvs., fișierul poate avea un nume diferit sau pot exista și alte fișiere. În orice caz, asigurați-vă că fișierul are extensia .css și că editați fișierul corect.

O altă alternativă la editarea fișierelor WordPress ale temei copilului este să utilizați editorul de teme din fila Aspect a tabloului de bord WordPress.

Scripturile CSS pe care le adăugați aici vor funcționa în același mod ca și când le adăugați la personalizarea temei, dar ar putea avea o performanță puțin mai bună.

Verificați fișierele CSS din instrumentul de dezvoltare a browserului

În secțiunea anterioară, am explicat cum să adăugați scripturi CSS pe site-ul dvs. WordPress. După cum vă puteți imagina, toate regulile CSS pe care le vedeți pe instrumentul pentru dezvoltatori provin dintr-un fișier CSS. Aceste fișiere pot fi create de site-ul web în mod dinamic, încărcate de pe server sau dintr-un fișier stocat în cache al browserului client.

Dacă te uiți mai atent, vei vedea că numele fișierului care conține o regulă CSS este afișat imediat după regulă, în bara laterală CSS a instrumentului de dezvoltare.

Dacă faceți clic pe numele fișierului ( style.css ), veți accesa ecranul editor de stil al instrumentului de dezvoltare, unde veți vedea toate fișierele CSS active și conținutul acestora.

Acest lucru poate fi util pentru a înțelege mai bine toate fișierele CSS prezente pe site-ul dvs.

Concluzie

Una peste alta, majoritatea browserelor includ instrumente de dezvoltator foarte puternice pe care dezvoltatorii le folosesc zilnic. În acest ghid, v-am arătat una dintre principalele caracteristici ale instrumentului de dezvoltare de browser. Am văzut cum să găsim anumite elemente HTML în instrumentul de dezvoltare și cum să editați CSS live. În plus, am explicat moștenirea CSS și de ce este importantă.

În cele din urmă, v-am arătat cum să aplicați un script CSS folosind instrumentul de dezvoltare de browser pas cu pas și diferite moduri de a-l adăuga pe site-ul dvs.

Dacă ți s-a părut interesant acest tutorial, distribuie-l prietenilor tăi pe rețelele sociale. Pentru mai multe ghiduri utile pentru a vă îmbunătăți site-ul, aruncați o privire la următoarele articole:

• Cum să personalizați meniul Divi cu CSS
• Cum se editează pagina de magazin WooCommerce cu PHP și CSS