Cele trei tipuri de stiluri CSS

Dezvoltarea site-ului web frontal este adesea reprezentată ca un scaun cu trei picioare format din:

• HTML pentru structura unui site
• CSS pentru stilurile vizuale
• Javascript pentru comportamente

Al doilea picior al acestui scaun, Foi în cascadă, acceptă trei stiluri diferite pe care le puteți adăuga la un document.

1. Stiluri în linie
2. Stiluri încorporate
3. Stiluri externe

Fiecare dintre aceste stiluri CSS prezintă avantaje și dezavantaje unice.

Stiluri în linie

Stilurile în linie sunt stiluri care sunt scrise direct în eticheta din documentul HTML. Stilurile în linie afectează numai eticheta specifică la care sunt aplicate:

Această regulă CSS dezactivează decorarea standard a textului subliniat pentru acest link. Cu toate acestea, nu ar schimba niciun alt link de pe pagină. Aceasta este una dintre limitările stilurilor în linie. Deoarece acestea se schimbă numai pentru un anumit element, ar trebui să vă împrăștiați HTML cu aceste stiluri pentru a realiza un design de pagină unificat. Aceasta nu este cea mai bună practică: de fapt, este un pas eliminat din zilele de

font tag-uri și amestecul de structură și stil în paginile web.

Stilurile în linie necesită, de asemenea, o specificitate foarte ridicată. Acest lucru le face greu de suprascris cu alte stiluri non-inline. De exemplu, dacă doriți să faceți un site receptiv și să schimbați modul în care un element arată anumite puncte de întrerupere folosind interogări media, stilurile în linie pe un element fac acest lucru greu de realizat.

Stilurile în linie sunt adecvate numai atunci când le utilizați cu moderație, în abordarea „excepție de la regulă” care stabilește unul sau două elemente de la colegii lor de pe pagină.

Stiluri încorporate

Stilurile încorporate se află în capul documentului. Sunt îngrădite etichete și arată foarte mult ca fișiere CSS externe din acea porțiune a documentului.

Stilurile încorporate afectează numai etichetele din pagina în care sunt încorporate. Încă o dată, această abordare neagă unul dintre punctele forte ale CSS. Deoarece fiecare pagină prezintă stiluri definite în antet, dacă doriți să efectuați o modificare la nivel de site - cum ar fi schimbarea culorii de linkuri de la roșu la verde - ar trebui să faceți această modificare pe fiecare pagină, deoarece fiecare pagină folosește un stil încorporat foaie. Această abordare este mai bună decât stilurile în linie, dar încă problematică în multe cazuri.

Foile de stil care sunt adăugate în capul unui document adaugă, de asemenea, o cantitate semnificativă de cod de marcare la pagina respectivă, ceea ce poate face și pagina mai greu de gestionat în viitor.

Avantajul foilor de stil încorporate este că acestea se încarcă imediat cu pagina însăși, în loc să necesite încărcarea altor fișiere externe. Această tehnică poate fi un beneficiu din perspectiva vitezei de descărcare și a performanței.

Foi de stil externe

Majoritatea site-urilor web folosesc astăzi foi de stil externe. Stilurile externe sunt stiluri care sunt scrise într-un document separat și apoi atașate la diferite documente web. Sunt chemate în documentul principal folosind un eticheta în capul documentului. Foile de stil externe pot fi fie pe același server ca HTML, fie pot fi extrase în întregime de pe alt server. Acesta este adesea cazul activelor, cum ar fi fonturile, pe care multe site-uri le împrumută de la Google.

Foi de stil externe afectează orice document la care sunt atașate, ceea ce înseamnă că dacă aveți un site web de 20 de pagini în care fiecare pagină folosește aceeași foaie de stil (așa se face de obicei), puteți face o schimbare vizuală a fiecăreia dintre acele pagini prin simpla modificare a acelui stil foaie. Această economie facilitează mult gestionarea pe termen lung a site-ului.

Dezavantajul pentru foile de stil externe este că acestea necesită pagini pentru a prelua și încărca aceste fișiere externe. Nu fiecare pagină va folosi fiecare stil din foaia CSS, așa că multe pagini vor încărca o pagină CSS mult mai mare decât cea necesară.

Deși este adevărat că există un succes de performanță pentru fișierele CSS externe, acesta poate fi cu siguranță minimizat. În mod real, fișierele CSS sunt doar fișiere text, deci nu sunt mari pentru început. Dacă întregul dvs. site folosește un singur fișier CSS, beneficiați și de faptul că documentul respectiv va fi stocat în cache după ce acesta a fost încărcat inițial, ceea ce înseamnă că ar putea exista o ușoară accesare a performanței pe prima pagină pentru unele vizite, dar paginile următoare vor utiliza fișierul CSS în cache, astfel încât orice accesare ar fi negat.