Obstaja več načinov, kako lahko na spletno stran uporabite sloge CSS, vključno z zunanjimi listi slogov ali celo z inline slogi. Če uporabljate zunanji slogovni list, ki je priporočljiv način, da narekujete videz in občutek dokumenta HTML, je en pristop uporabiti
@import.
The
@import pravilo vam omogoča, da pomembne zunanje liste slogov v dokumentu - bodisi v HTML strani ali celo v druge dokumente CSS. Razbijanje velikega števila slogov v številne manjše, ciljne datoteke (eno za postavitev, eno za tipografijo, eno za slike itd.) Lahko včasih olajša upravljanje teh datotek in različnih stilov, ki jih vsebujejo. Če želite izkoristiti to ugodnost, je treba uvoziti te različne datoteke, kar boste morali storiti, da bodo vsi delali za prikaz svoje spletne strani.
Uvažanje v HTML
Za uporabo
@import pravilo v svojem HTML-ju, bi temu dodali naslednje
dokumenta:
:
Ta koda zdaj uvaža ta slogovni list za uporabo na tej strani HTML in lahko upravljate vse svoje sloge v eni datoteki. Na spodnji strani pomembnih slogovnih slogov je, da ta metoda ne omogoča vzporednih prenosov. Stran mora prenesti celotno slogovno tabelo, preden se premakne na preostalo stran, vključno z vsemi drugimi datotekami CSS, ki jih uvozite z uporabo te metode. To bo negativno vplivalo na hitrost vaše strani in učinkovitost prenosa. Glede na to, kako pomembna je uspešnost strani za uspeh na spletnem mestu, je ta pomanjkljivost morda razlog, zakaj se želite izogibati uporabi programa @import.
Alternativni pristop
Kot alternativo uporabi
@import v svojem HTML-ju lahko povežete s to datoteko CSS, kot je ta:
To deluje zelo podobno kot
@import saj vam omogoča, da upravljate vse svoje CSS iz ene osrednje lokacije / datoteke, vendar je ta metoda bolj priporočljiva v pogledu prenosa. Če še vedno želite segmentirati različne vrste slogov v ločene datoteke, lahko to storite še naprej in uporabite funkcijo @import v glavni datoteki CSS. To pomeni, da se lahko vaše zunanje CSS datoteke še vedno upravljajo posamezno, toda ker se vsi uvažajo v en glavni CSS, se izboljša učinkovitost.
Uvažanje v CSS
Uporabljati
zgornji primer kode bi prinesel datoteko "default.css" na vaši HTML strani. V tej datoteki CSS boste imeli različne sloge strani. Na teh straneh lahko najdete vse te sloge, ali pa lahko uporabite @import, da jih razčlenite, da boste lažje upravljali. Recimo, da uporabljamo 4 ločene datoteke CSS - eno za postavitev, eno za tipografijo in eno za slike. Četrta datoteka je naša "master" datoteka, s katero povezujemo našo stran (za ta primer je to "default.css"). Na samem vrhu te glavne datoteke CSS lahko dodamo pravila, prikazana spodaj:
@import url ('/ styles / layout.css'); @ uvozni url ('/ styles / type.css'); @ uvozni url ('/ styles / images.css');
Upoštevajte, da ta pravila moraš biti pred vsemi ostalimi vsebinami v vaši datoteki CSS, da lahko delajo. Pred temi uvoznimi pravili ne morete imeti drugih slogov CSS.
Pod temi uvoznimi pravili lahko dodate katere koli druge sloge CSS, ki jih želite imeti v privzetem listu. Ko je ta glavna datoteka CSS naložena, bo najprej uvozila te ločene datoteke in dodala svoje sloge na sam vrh sloga. Potem bo pod te uvožene tiste vse ostale sloge, ki bodo ustvarili celotno datoteko CSS, ki jo bo uporabil spletni brskalnik za prikaz vaše strani. Upravljate manjše, bolj osredotočene datoteke, medtem ko imate še vedno en sam stil, povezan s tem HTML-jem.
Uporaba @importa za medijske poizvedbe
Ena stvar, ki jo lahko razmislite o tem, ločuje medijske poizvedbe svojega spletnega mesta za odzivne sloge spletnega mesta v ločeno datoteko. Ker so ti odzivni slogi lahko zmedeni, ko jih gledate skupaj z drugimi slognimi pravili vašega spletnega mesta, je njihova privlačnost v drugi datoteki lahko privlačna. Ena zaskrbljenost pri tem pristopu je, da od vašega
@import pravila morajo biti prva, to pomeni, da bodo vaše medijske poizvedbe naložene pred ostalimi slogi vašega spletnega mesta. Pri ustvarjanju prvega odzivnega spletnega mesta, ki upošteva uspešnost, je verjetno, da bo to težava. Iz tega razloga se predlaga, da ločeno ne uporabljajte odzivnih slog vašega spletnega mesta in ga uporabite
@import da jih pripeljemo na svojo spletno stran. Da, morda se zdi, da imajo koristi od tega, vendar pomanjkljivosti prevladajo nad temi koristmi.
Ali moram uporabiti @import?
Ne, ne. Mnoge strani preprosto prikazujejo vse svoje glavne sloge v eni datoteki in, kolikor je to velika datoteka, se to upravlja (to je, kako to storim v svojem delu). Če najdete
@import koristno, potem je lahko del vašega poteka dela. V nasprotnem primeru lahko varno izdelate spletne strani svojo edinstveno slogovno oznako vseh pravil CSS.
Podpora brskalnika
Zelo stari brskalniki imajo težave z nekaterimi od teh pravil @import, vendar ti brskalniki v teh dneh verjetno ne bodo problem. To še zlasti velja, ko je minilo konec roka za starejše različice Internet Explorerja. Končno, če se odločite za uporabo
@import pravila v vašem HTML ali CSS, ne smete naleteti na težave z zapuščenimi različicami spletnih brskalnikov, razen če imate čudno potrebo po podpori neverjetno starejših različic IE.
Uredil Jeremy Girard
