Postoji nekoliko načina na koje možete primijeniti stilove CSS-a na web stranicu, uključujući i spoljašnje liste stilova ili čak stilove u inlineu . Ako koristite spoljašnji stilski stil, koji je preporučen način za diktiranje izgleda i osećaja HTML dokumenta, jedan pristup je da koristite @import.
Pravilo @import dozvoljava vam važne vanjske liste stilova u vašem dokumentu - bilo u HTML stranicu ili čak iu druge CSS dokumente. Razbijanje mnogo stilova u nekoliko manjih, fokusiranih datoteka (jedan za izgled, jedan za tipografiju , jedan za slike itd.) Ponekad olakšava upravljanje tim datotekama i različitim stilom koji oni sadrže. Ukoliko želite da uživate u toj pogodnosti, onda je uvoz tih različitih datoteka ono što ćete morati učiniti kako bi ih svi radili za prikaz vaše web stranice.
Unošenje u HTML
Da biste koristili pravilo @import u HTML-u, dodali biste sljedeće na
dokumenta::
@import url ("/ styles / default.css");
Ovaj kod bi sada uvozio ovaj stilski stil za korištenje na ovoj HTML stranici i mogli biste upravljati svim svojim stilovima u toj jednoj datoteci. Nedostatak važnih stilova na ovaj način je da ovaj metod ne dozvoljava paralelne preuzimanja. Ova stranica mora da preuzme čitavu shemu stilova pre nego što se preseli na ostatak stranice, uključujući bilo koje druge CSS datoteke koje uvezete koristeći ovaj metod. Ovo će imati negativan efekat na brzinu i učinak preuzimanja. Uzimajući u obzir koliko su važne performanse stranica za uspjeh današnjeg sajta, ova greška samo može biti razlog zašto biste želeli izbjeći korištenje @importa.
Alternativni pristup
Kao alternativu korišćenju @import-a u vašem HTML-u, možete se povezati sa CSS datotekom ovako:
Ovo funkcionira veoma slično kao i @import, jer vam omogućava da upravljate svim CSS-om iz jedne centralne lokacije / datoteke, ali ovaj metod je poželjniji iz perspektive preuzimanja. Ako i dalje želite da segmentirate različite vrste stilova u odvojene datoteke, možete to i učiniti i koristiti funkciju @import unutar svoje glavne CSS datoteke. To znači da se vaše spoljne CSS datoteke još uvijek mogu upravljati pojedinačno, ali pošto sve one uvoze u jedan master CSS, performanse su poboljšane.
Uvoz u CSS
Korišćenjem gornjeg primera koda bi se omogućila upotreba datoteke "default.css" na vašoj HTML stranici. Unutar tog CSS fajla, imali biste različite stilove stranica. Možete imati sve te stilove detaljne na toj jednoj stranici, ili možete koristiti @import da ih razdvojite radi lakšeg upravljanja. Još jednom, recimo da koristimo 4 odvojene CSS datoteke - jedan za raspored, jedan za tipografiju i jedan za slike. Četvrti fajl je naš "master" fajl sa kojom naša stranica povezuje (za ovaj primjer, ovo je "default.css"). Na samom vrhu glavne CSS datoteke možemo dodati pravila prikazana dole:
@import url ('/ styles / layout.css');
@import url ('/ styles / type.css');
@import url ('/ styles / images.css');
Imajte na umu da ova pravila moraju biti pre svih ostalih sadržaja u CSS datoteki kako bi oni mogli da rade. Pre ovih pravila uvoza ne možete imati bilo koji drugi CSS stil!
Ispod ovih pravila uvoza možete dodati bilo koji drugi CSS stil koji želite da imate u podrazumevanom listu. Kada se ta glavna CSS datoteka učita, prvo će uvesti ove odvojene datoteke i dodati njihove stilove na sam vrh stylesheeta. Zatim će imati sve svoje druge stilove ispod ovih uvezenih, stvarajući punu CSS datoteku koju će web pretraživač koristiti za prikaz vašeg sajta. Dobijate prednost upravljanja manji, više fokusiranim fajlovima, dok još uvek imate pojedinačnu stiliziranu vezu u tom HTML-u.
Korišćenje & # 64; import za Media Queries
Jedna stvar koju možete razmotriti jeste da odvojite medijske upite vašeg veb sajta za odgovarajuće stilove veb sajta u odvojenu datoteku. Budući da ovi odzivni stilovi mogu biti zbunjujući kada se vide zajedno sa drugim pravilima stila vaše stranice, njihovi sami u drugom fajlu mogu biti privlačni. Jedna zabrinutost sa ovakvim pristupom je to što, pošto su vaša pravila @importa prva, ovo znači da će se vaši medijski upiti učitati pre preostalih stilova vašeg sajta. Prilikom kreiranja mobilnog prvog odzivnog sajta koji uzima u obzir performanse, to je verovatno problem. Zbog toga se preporučuje da ne odvojite odzivne stilove vašeg sajta odvojeno i koristite @import da ih dovedete na vašu web lokaciju. Da, možda izgleda da ima koristi od toga, ali nedostaci prevazilaze te benefite.
Da li treba da koristim & # 39; import?
Ne nisi. Mnoge stranice jednostavno prikazuju sve svoje glavne stilove u jednoj datoteci i, koliko je to velika datoteka, može se upravljati na taj način (ovako kako to radim u svom radu). Ako pronađete @import korisnu, onda ona može biti dio vašeg toka posla. U suprotnom, možete bezbedno da izradite veb stranice koje vašu pojedinačnu listu stilova svih CSS pravila.
Podrška pregledača
Veoma stariji pretraživači imaju problema sa nekim od ovih pravila @importa, ali ovi pretraživači verovatno neće biti problem za vas ovih dana. Ovo je posebno istinito sada kada je prošao kraj roka za starije verzije Internet Explorer-a. Na kraju, ako odlučite da koristite pravila @import u HTML-u ili CSS-u, ne biste se trebali pojaviti u problemima sa starijim verzijama web pregledača, osim ako imate neobičnu potrebu za podrškom neverovatno starijih verzija IE-a.
Originalni članak Jennifer Krynin. Uredio Jeremy Girard.