Formate inline, încorporate și externe: Iată ce trebuie să știți
Dezvoltarea site-urilor de pe front-end este adesea reprezentată ca un scaun cu 3 picioare. Aceste picioare sunt după cum urmează:
Al doilea picior al acestui scaun, CSS sau Cascading Style Sheets, este ceea ce ne uităm astăzi aici. Mai exact, dorim să abordăm cele 3 tipuri de stiluri pe care le puteți adăuga la un document.
- Stiluri inline
- Stiluri încorporate
- Stiluri externe
Fiecare dintre aceste stiluri CSS are avantajele și dezavantajele lor, așa că să examinăm mai profund fiecare dintre ele în mod individual.
Stiluri inline
Stilurile inline sunt stiluri care sunt scrise direct în etichetă în documentul HTML. Stilurile inline afectează numai eticheta specifică la care sunt aplicate. Iată un exemplu de stil inline aplicat unui link standard sau unei ancore:
Această regulă CSS ar transforma decorul standard al textului sub textul acestei legături. Cu toate acestea, nu ar schimba nici o altă legătură pe pagină. Aceasta este una dintre limitele stilurilor inline. Întrucât se schimbă numai pe un anumit element, va trebui să vă lăsați HTML-ul cu aceste stiluri pentru a obține un design real al paginii. Aceasta nu este o practică bună. De fapt, este un pas eliminat din zilele de etichete "font" și amestecul de structură și stil în paginile web.
Stilurile inline au, de asemenea, o specificitate foarte mare.
Acest lucru le face foarte greu să suprascrieți cu alte stiluri non-inline. De exemplu, dacă doriți să faceți un site receptiv și să modificați modul în care un element se uită la anumite puncte de întrerupere prin utilizarea interogărilor media , stilurile inline pe un element vor face acest lucru foarte greu de făcut.
În cele din urmă, stilurile inline sunt într-adevăr potrivite doar atunci când sunt utilizate foarte puțin.
De fapt, rareori folosesc stiluri inline pe paginile mele web.
Stiluri încorporate
Stilurile încorporate sunt stiluri încorporate în capul documentului. Stilurile încorporate afectează numai etichetele de pe pagina în care sunt încorporate. Încă o dată, această abordare denaturează una dintre punctele forte ale CSS. Deoarece fiecare pagină ar avea stiluri în
, dacă doriți să faceți o schimbare la nivel local, cum ar fi schimbarea culorii legăturilor de la roșu la verde, va trebui să efectuați această modificare pe fiecare pagină, deoarece fiecare pagină utilizează o foaie de stil încorporată. Acest lucru este mai bun decât stilurile inline, dar este încă problematic în multe cazuri.
Foile de stil care sunt adăugate la
a unui document adaugă, de asemenea, o cantitate semnificativă de cod de marcare pe acea pagină, ceea ce poate, de asemenea, face ca pagina să fie mai greu de gestionat în viitor.
Beneficiul foilor de stil încorporate este că încărcarea se face imediat cu pagina însăși, în loc să se solicite încărcarea altor fișiere externe. Acest lucru poate fi un beneficiu din perspectiva vitezei de descărcare și a performanței .
Forme de stil externe
Majoritatea site-urilor de astăzi utilizează foi de stil externe. Stilurile externe sunt stiluri care sunt scrise într-un document separat și apoi atașate la diverse documente web. Foile de stil externe pot afecta 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 (aceasta este, de obicei, modul în care este făcută), puteți face o schimbare vizuală la fiecare din acele pagini prin simpla editare a foii de stil.
Acest lucru face mult mai ușor gestionarea pe termen lung a site-ului.
Dezavantajul pentru foile de stil externe este că acestea necesită pagini pentru preluarea și încărcarea acestor fișiere externe. Nu fiecare pagină va folosi fiecare stil din foaia CSS, atât de multe pagini vor încărca o pagină CSS mult mai mare decât cea care este de fapt necesară.
Deși este adevărat că există o lovitură de performanță pentru fișiere externe CSS, poate fi cu siguranță minimizată. În mod realist, fișierele CSS sunt doar fișiere text, deci nu sunt, în general, prea mari pentru a începe. Dacă întregul site utilizează un fișier CSS, beneficiați și de faptul că acel document este stocat în cache după ce acesta a fost inițial încărcat.
Acest lucru înseamnă că pe prima pagină s-ar putea să apară câteva vizite, dar paginile ulterioare vor utiliza fișierul CSS stocat în memoria cache, astfel încât orice lovitură ar fi negată. Fișierele externe CSS sunt cum îmi construiesc toate paginile mele web.