Najboljši način za vključitev CSS? Zakaj uporabljati @import?

Najboljsi Nacin Za Vkljucitev Css Zakaj Uporabljati Import



Pri razvoju spletnih mest in spletnih aplikacij je pogosto potreben enak stil na vsaki spletni strani, da se ohrani doslednost spletne aplikacije. Na primer, če so barve glavne strani spletne aplikacije kombinacija rožnate in vijolične, bo videti čudno, če bo naslednja stran spletne aplikacije katere koli druge barve, kot sta črna in oranžna.

Toda med kodiranjem je težko vključiti iste lastnosti CSS za vsako spletno stran posebej. Zato je treba uporabiti rešitev, prek katere je mogoče ustvariti eno slogovno datoteko in nato enostavno dostopati do več datotek.

Kaj je pravilo @import v CSS?

Najboljši način za vključitev lastnosti sloga CSS je uporaba pravila @import. @import se uporablja za uvoz ali dostop do slogovne datoteke CSS iz druge slogovne datoteke. To zmanjša trud razvijalca, saj so vse lastnosti, dodane v uvoženo slogovno datoteko, implementirane neposredno tako, da napišete @import in nato točno ime slogovne datoteke.







Sintaksa pravila @import

Sintaksa za dodajanje pravila @import za dostop do slogovne datoteke iz druge slogovne datoteke je naslednja:



@uvoz 'stylesheetname.css' ;

Pravilo @import lahko dodate tudi na naslednji način:



@uvoz url ( stylesheetname.css ) ;

Preprosto dodajte ime datoteke s slogovno datoteko CSS v narekovajih ali v okroglih oklepajih z ' url 'po pisanju' @uvoz ”.





Primer: dodajanje pravila @import

Da bi razumeli, kako deluje pravilo @import, napišemo preprost delček kode:

< h1 > To je preprosto besedilo! < / h1 >

V zgornjem delčku kode je v dokumentu HTML dodan naslov

s preprostim enovrstičnim stavkom. Ta preprosta koda bo ustvarila naslednje rezultate:



Ustvarimo slogovno tabelo za definiranje nekaterih lastnosti CSS, ki jih je mogoče pozneje uvoziti iz datoteke, prek katere je ustvarjen zgornji vmesnik spletne strani. Ustvarimo drugo datoteko in jo poimenujemo ' slogovna tabela ' z vrsto datoteke, deklarirano kot ' css «, in preprosto dodajte nekaj lastnosti za

naslov in telo:

h1 {

barva : polnočno modra ;

Barva ozadja : azurno ;

poravnava besedila : center ;

}

telo {

Barva ozadja : svetlo modra ;

}

Za dostop do datoteke s slogovno tabelo, ki vsebuje slogovne lastnosti za naslov in telo

, moramo preprosto dodati pravilo @import v katero koli datoteko CSS, kjer je potrebno to oblikovanje.



Če dodate samo preprosto pravilo @import, boste implementirali vse lastnosti sloga v vmesnik spletne strani, ne da bi morali lastnosti vnašati ločeno na vsako spletno stran.

Pravilo @import je torej potrebno zapisati kot:

@uvoz 'stylesheet.css' ;

Dodajanje pravila @import z zapisom » url ” in ime datoteke CSS v okroglih oklepajih bo prav tako prikazalo enake rezultate:

@uvoz url ( stylesheet.css ) ;

Lastnosti, opredeljene v ' slogovna tabela ” izvajajo samo z dodajanjem preprostega @uvoz ” pravilo za to:

To je najpreprostejši način za vključitev lastnosti CSS v datoteko brez dodatnih naporov.

Prednosti pravila @import v CSS

Pravilo @import se običajno uporablja iz naslednjih razlogov:

  • Uporaba pravila @import skrajša čas in trud razvijalca, saj implementira vse lastnosti določenega slogovnega lista tako, da samo napiše ime tega lista za @import.
  • V velikih in zapletenih spletnih aplikacijah se pravilo @import izkaže za zelo ugodno, saj je mogoče iste slogovne lastnosti implementirati v več datotekah samo z dodajanjem imena datoteke slogovnega lista.
  • Elemente slogovnega lista, kot so glave, noge, telo itd., je mogoče shraniti v ločene datoteke slogovnega lista, nato pa je mogoče z uporabo pravila @import uvoziti kateri koli zahtevani slog, ne da bi morali dodajati, odstranjevati ali komentirati lastnosti sloga iz mapa.

To povzema uporabo pravila @import in pojasnjuje, kako se to pravilo šteje za najboljši način za vključitev CSS.

Zaključek

Slogovno datoteko CSS je mogoče uvoziti ali do nje dostopati neposredno iz druge slogovne datoteke, vse lastnosti v uvoženi slogovni datoteki pa so neposredno implementirane na spletni strani datoteke, kamor je bila uvožena. Za vsak vmesnik spletne strani ni treba pisati vsake lastnosti CSS posebej. Vse kar je potrebno je, da dodate ime datoteke s slogovno datoteko CSS z @import. In to velja za najboljši način za dodajanje CSS.