Postoji nekoliko načina na koje možete primijeniti CSS stilove na web stranicu, uključujući i vanjske stilske listove ili čak inline stilove. Ako upotrebljavate vanjski stilski list, koji je preporučeni način diktiranja izgleda i dojma HTML dokumenta, jedan je pristup upotrebi
@uvoz.
@uvoz Pravilo vam omogućuje da u vašem dokumentu dodate važne vanjske stilske listove - bilo na HTML stranicu ili čak u druge CSS dokumente. Razbijanje puno stilova u nekoliko manjih, fokusiranih datoteka (jedan za izgled, jedan za tipografiju, jedan za slike itd.) Može ponekad olakšati upravljanje tim datotekama i različitim stilom koji sadrže. Ako želite uživati u tu korist, onda uvoz tih različitih datoteka je ono što trebate učiniti da biste ih svi radili za prikaz svoje web stranice.
Uvoz u HTML
Da biste upotrijebili
@uvoz pravilo u vašem HTML - u, dodali biste sljedeće
dokumenta:
:
Ovaj kôd sada bi uvozao ovaj list stila za upotrebu na ovoj HTML stranici i možete upravljati svim svojim stilovima u toj jednoj datoteci. Nedostatak važnih stilskih listova na taj način je da ova metoda ne dopušta paralelna preuzimanja. Stranica mora preuzeti cijeli stilski obrazac prije nego što se prebaci na ostatak stranice, uključujući i sve druge CSS datoteke koje uvozite pomoću ove metode. To će negativno utjecati na brzinu stranice i performanse preuzimanja. S obzirom na to koliko je važna izvedba stranice uspješnost web stranice, taj nedostatak možda predstavlja razlog zbog kojeg biste željeli izbjegavati upotrebu @importa.
Alternativni pristup
Kao alternativa korištenju
@uvoz u HTML-u možete povezati s tom CSS datotekom ovako:
To funkcionira vrlo slično
@uvoz jer vam omogućuje upravljanje svim vašim CSS-om iz jedne središnje lokacije / datoteke, no ta je metoda poželjna iz perspektive preuzimanja. Ako i dalje želite segmentirati različite vrste stilova u zasebne datoteke, možete nastaviti s time i upotrebljavati funkciju @import unutar glavne CSS datoteke. To znači da se vaše vanjske CSS datoteke i dalje mogu upravljati pojedinačno, no budući da se sve uvoze u jedan master CSS, poboljšava se izvedba.
Uvoz u CSS
Koristiti
primjer gore navedenog koda donijet će datoteku "default.css" koja će se upotrebljavati na vašoj HTML stranici. Unutar te CSS datoteke imat ćete različite stilove stranica. Možete imati sve one stilove koji su detaljno prikazani na toj stranici ili ih možete koristiti @import da biste ih razdvojili radi lakšeg upravljanja. Još jednom, recimo da koristimo 4 zasebne CSS datoteke - jednu za izgled, jednu za tipografiju i jednu za slike. Četvrta datoteka je naša "glavna" datoteka, što je ono na što naša stranica povezuje (za ovaj primjer, to je "default.css"). Na samom vrhu te majstorske CSS datoteke možemo dodati pravila prikazana u nastavku:
@import url ('/ stilovi / layout.css'); @ url uvoza ('/ stilovi / type.css'); @ url uvoza ('/ stilovi / images.css');
Imajte na umu da ta pravila mora biti prije svih ostalih sadržaja u CSS datoteci da bi mogli raditi. Ne možete imati bilo koji drugi stil CSS prije ovih uvoznih pravila.
Ispod tih pravila uvoza možete dodati sve ostale CSS stilove koje želite imati u zadanom listu. Kada se ta glavna CSS datoteka učita, najprije će uvesti te zasebne datoteke i dodati njihove stilove na sam vrh tablice. Tu će zatim imati sve ostale stilove ispod tih uvezenih, stvarajući punu CSS datoteku koju će web preglednik koristiti za prikaz vaše web stranice. Dobivate prednost upravljanju manjim, fokusiranijim datotekama dok još uvijek imate jedan stilski izraz povezan s tim HTML-om.
Upotreba @importa za medijske upite
Jedna stvar koju biste mogli razmotriti je razdvajanje medijskih upita vaše web-lokacije za responzivne web-stilove u zasebnu datoteku. Budući da ti odgovorni stilovi mogu biti zbunjujući kada se vide zajedno s drugim stilskim pravilima vaše web-lokacije, njihovo korištenje u drugoj datoteci može biti privlačno. Jedna briga za ovaj pristup je da, od vašeg
@uvoz pravila moraju biti prva, to znači da će vaši medijski upiti biti učitani prije ostatka stilova vaše web-lokacije. Prilikom izrade web-lokacije koja reagira na mobilne uređaje, koja uzima u obzir izvedbu, vjerojatno je to problem. Iz tog razloga, preporučuje se da ne razdvojite reaktivne stilove web-lokacije i upotrebljavate ih
@uvoz da ih dovede u vašu stranicu. Da, čini se da ima koristi od toga, ali nedostaci nadilaze te prednosti.
Trebam li koristiti @import?
Ne nećeš. Mnoge web stranice jednostavno prikazuju sve svoje glavne stilove unutar jedne datoteke i, koliko god to moguće, može se upravljati na taj način (to je kako to radim u svom radu). Ako nađete
@uvoz korisno, onda to može biti dio vašeg tijeka rada. Inače, možete sigurno izraditi web stranice koje vaš jedinstveni stilski stil svih vaših CSS pravila.
Podrška pregledniku
Vrlo, vrlo stari preglednici imaju problema s nekim od tih @import pravila, ali ti preglednici vjerojatno neće biti problem za vas ovih dana. To je osobito istinito sada kada je prošao krajnji rok za život starijih verzija preglednika Internet Explorer. Naposljetku, ako odlučite koristiti
@uvoz pravila u HTML ili CSS, ne biste se trebali truditi u problemima s naslijeđenim verzijama web preglednika, osim ako nemate neku čudnu potrebu za podrškom nevjerojatno starih verzija IE.
Uredio je Jeremy Girard
