Revizuirea nivelului de prioritate al stilului CSS

Foaia de stil cascadă (CSS) este, cred, cel mai simplu limbaj în comparație cu alte limbi legate de web, deci nu este surprinzător să găsiți mulți oameni care încep să învețe cum să creeze un site web va învăța mai întâi această limbă și mai întâi HTML.

În acest post, vom reveni la elementele de bază ale CSS. Vom analiza modul în care sunt aplicate inițial stilurile CSS, care stiluri se vor aplica, cum se suprascorează unele declarații de stiluri, în timp ce altele nu.

Deci, acest post este dedicat în mod special pentru începătorii care încep să se agațe de provocări, probabil că fac încă greșeli și greșeli atunci când compun prima foaie de stil. Deci, hai să începem.

Șabloane standard de browser

Firefox, Chrome, Safari, Opera și Internet Explorer sunt în prezent cele mai importante cinci browsere desktop de pe piață. Aceste browsere și toate celelalte browsere respectă o regulă standard pentru a include stiluri implicite built-in pentru a reda elementele HTML.

Deci, când introducem elemente HTML aleatoare fără adăugarea de stiluri, veți vedea că acestea sunt încă redate corect în browser.

Dar, dacă inspectăm acel element cu atenție, fiecare browser are valori (ușor) diferite pentru “Mod implicit” care provoacă neconcordanță între browsere, mai ales în cele vechi, cum ar fi IE6, 7 și Firefox 3.0.

De exemplu, după cum puteți vedea din captura de ecran de mai sus, cel mai nou Firefox a făcut blockquote implicit cu margine: 16px 40px 16px 40px, în timp ce pe de altă parte Internet Explorer 7 va face blockquote cu margine: 0px 40px.

Pentru a depăși incoerențele prezentate mai sus, mulți designeri web și dezvoltatori preferă să suprascrie toate aceste stiluri CSS Resetare. Acest fișier CSS conține, în general, aproape toate codurile HTML Tip selectori, definindu-le cu reguli egale.

Există multe resetări CSS disponibile, dar aici sunt primele mele preferate:

• Normalize.css
• CSS Resetare
• Restabilire foaie de stil HTML5

selectori

Probabil ați citit adesea acest termen pe blogurile de design / dezvoltare web pe care le-ați vizitat; selectori.

Selectorul în CSS este sintaxa utilizată pentru a viza orice părți din documentul HTML pentru stilurile care trebuie aplicate. Există trei selectori de bază pe care le vom discuta aici, deoarece probabil vor fi selectorii obișnuiți utilizați pe primul dvs. site web. Vom acoperi alte persoane în posturile viitoare.

Selector de tip

Am menționat deja o dată, selectorul de tip va viza orice element HTML specificat în document. De exemplu:

 Declarația p / ** ** ** / 

se va potrivi cu toate p sau paragraf elementele și utilizarea acestuia vor înlocui în cele din urmă stilurile implicite date de browsere.

Selector de clasă

Când ați adăugat o clasă sau chiar mai multe clase la un element, puteți viza și aceste clase. Selector de clasă începe cu a punct parametru.

 .cutie / ** declarație ** / 

Fragmentul de mai sus se va potrivi cu toate elementele care au clasa casetei sau putem selecta mai specific.

 p.box / ** declarație ** / 

Se va viza numai p element care are cutie clasă.

Când folosim Clasă selector, toate aceleași declarații de stiluri din ambele Tip selector și Browser-ul implicit vor fi suprascrise.

Selectorul de ID-uri

ID-ul este un atribut foarte restrictiv, putem avea doar unul id pe un element și trebuie să fie și unic.

 
Conţinut
 

În cazul în care avem unul id într-un element, putem folosi id selector să vizați acest element; selectorul de id este definit cu hash # parametru.

 #uniqueID / ** declarație ** / 

Din moment ce ID-ul este unic, are cel mai puternic nivel de prioritate a tipului de selector. Deci, atunci când declarăm stiluri cu ID-ul selector va suprascrie în cele din urmă aceeași declarație de la Clasă, Tip selectori și Browser-ul implicit stiluri.

Încorporarea stilurilor

Am ajuns prin toți selectorii de bază esențiali și acum vom analiza modul în care aceste stiluri sunt încorporate într-un document HTML.

Stiluri externe

Stilurile externe sunt stilurile adăugate într-un fișier separat, de obicei în a .css fișier care este apoi legat la documentul HTML folosind pentru a aplica acele stiluri.

Și toate stilurile declarate în fișiere se vor comporta ca cele pe care le-am menționat în selectori mai sus, și anume că va suprascrie în principal browserul implicit stil și suprascrieți unei alte declarații de stil, în funcție de nivelul de prioritate al selectorilor.

Această practică este modalitatea cea mai recomandată de a atașa stilurile, mai ales când aveți mii de linii de coduri CSS cu multe pagini pentru a le atașa.

Procedând astfel, stilurile vor fi de asemenea ușor de gestionat, de exemplu, puteți separa fișierele CSS în mai multe fișiere, în funcție de rolul lor specific, cum ar fi typography.css pentru a controla toate stilurile legate de tipografie și așa mai departe.

Stiluri interne

Stilurile interne sunt stilurile care sunt încorporate direct într-un document HTML, în general în interiorul etichetă.

Dar această practică nu este recomandată atunci când veți avea sute de linii de stiluri pe măsură ce pagina HTML va fi prea lungă și stilul va afecta numai unde sunt încorporate stilurile. Când ai spus să spui zece pagini, va trebui să copiezi acele stiluri și să le încorți în toate paginile și când trebuie să schimbi stilurile trebuie să le schimbi în zece pagini diferite, ceea ce este evident o sarcină plictisitoare.

Pe baza nivelului de prioritate, stilul intern este mai mare, astfel încât va suprascrie stilurile externe.

Stiluri inline

Stilurile inline sunt stilurile care sunt încorporate direct în elementul HTML.

 
Acesta este un paragraf
 

Acest exemplu va fi adăugat mai sus 5px marginea la elementul de paragraf și va suprascrie, de asemenea, marginile care au fost declarate pentru elementul respectiv, atât în ​​stilurile interne, cât și în cele externe.

Dar evitați să faceți acest lucru, deoarece marcajul dvs. va fi aglomerat cu toate aceste declarații de stil; dacă aveți o grămadă de stiluri încorporate, acesta va deveni chiar un coșmar pentru a vedea și a păstra toate html-urile și stilurile dvs..

Citirea ulterioară: Trei moduri de a insera CSS - W3CSchools.

Regula majora

Există anumite circumstanțe când trebuie să aplicăm un anumit stil pentru un element, dar același stil pentru acel element a fost, de asemenea, declarat în altă parte în foaia de stil sau în document. De exemplu:

Avem următoarea etichetă de ancorare cu stiluri încorporate

 Acesta este un link 

Și avem, de asemenea, un stil separat pentru acea etichetă de ancorare în foaia de stil.

 a border: 1px solid # 333; fundal-culoare: # 555;  

În acest exemplu, putem folosi !important pentru a forța browserul să utilizeze stilurile din foaia de stil în locul celei din element.

 o border: 1px solid # 333! important; culoarea de fundal: # 555! important;  

!important regula va indica faptul că acest stil este cel mai mult important și trebuie aplicat peste celălalt stil chiar și atunci când este încastrat direct în element (Stiluri inline).

Citirea ulterioară: Declarații CSS importante: Cum și când să le folosiți - Revista Smashing.

Concluzie

Am trecut prin întregul subiect din acest articol. Acum vedem că fiecare selector și modul în care încorporăm stilurile au nivele de prioritate diferite în mecanismul browserului. După cum am menționat mai devreme, aceste subiecte sunt destinate nivelelor de novice, astfel încât acestea nu sunt cu siguranță ceva nou pentru designerii web condus.

Dar, cred că fiecare designer web va fi de acord că revenirea la elementele de bază este uneori necesară pentru a revedea cunoștințele noastre fundamentale despre un subiect. De fapt, adesea ratați câteva dintre lucrurile de bază, deoarece tindem să fim mai impresionați de lucruri minunate (și nebunești) ca acestea.

În cele din urmă, am furnizat un demo și un fișier sursă pentru a vă examina discuția noastră în acest articol.

• Demo
• Descărcați sursa

Sper să vă bucurați de acest post și dacă găsiți unele inexactități în el sau am pierdut câteva puncte importante, nu ezitați să mă anunțați în secțiunea de comentarii de mai jos.