Najbolji način za uključivanje CSS-a? Zašto koristiti @import?

Najbolji Nacin Za Ukljucivanje Css A Zasto Koristiti Import



Tijekom razvoja web-mjesta i web-aplikacija često je potreban isti stil na svakoj web-stranici kako bi se održala dosljednost web-aplikacije. Na primjer, ako su boje glavne stranice web-aplikacije kombinacija ružičaste i ljubičaste, izgledat će čudno ako je sljedeća stranica web-aplikacije bilo koje druge boje poput crne i narančaste.

No tijekom kodiranja teško je uključiti ista CSS svojstva za svaku web stranicu zasebno. Dakle, potrebno je koristiti rješenje pomoću kojeg se može izraditi jedan stilski list i zatim mu se lako pristupa iz više datoteka.

Što je pravilo @import u CSS-u?

Najbolji način uključivanja svojstava CSS stila je korištenje pravila @import. @import se koristi za uvoz ili pristup CSS tablici stilova iz druge tablice stilova. Ovo smanjuje napor razvojnog programera jer se sva svojstva dodana u uvezenu tablicu stilova implementiraju izravno samo pisanjem @import i zatim točnog naziva lista stilova.







Sintaksa @import pravila

Sintaksa za dodavanje pravila @import za pristup listu stilova iz druge tablice stilova je sljedeća:



@uvoz 'stylesheetname.css' ;

Pravilo @import također se može dodati na sljedeći način:



@uvoz url ( stylesheetname.css ) ;

Jednostavno dodajte naziv datoteke CSS stylesheet u navodnim zarezima ili u okruglim zagradama s ' url 'nakon pisanja' @uvoz ”.





Primjer: Dodavanje pravila @import

Da bismo razumjeli kako funkcionira pravilo @import, napisali smo jednostavan isječak koda:

< h1 > Ovo je jednostavan tekst! < / h1 >

U gornjem isječku koda nalazi se naslov

s jednostavnom rečenicom od jednog retka dodanom u HTML dokument. Ovaj jednostavan kod će generirati sljedeći izlaz:



Stvorimo stilsku tablicu za definiranje nekih CSS svojstava koja se kasnije mogu uvesti iz datoteke putem koje je stvoreno gornje sučelje web stranice. Kreiramo drugu datoteku i imenujemo je ' stilski list ' s vrstom datoteke deklariranom kao ' css ”, i jednostavno dodajte neka svojstva za naslov i tijelo

:

h1 {

boja : ponoćnoplava ;

boja pozadine : plavetnilo ;

poravnanje teksta : centar ;

}

tijelo {

boja pozadine : svijetlo plava ;

}

Da bismo pristupili datoteci lista stilova koja sadrži svojstva stila za naslov i tijelo

, moramo jednostavno dodati pravilo @import u bilo koju CSS datoteku gdje je stil potreban.



Dodavanjem samo jednostavnog pravila @import implementirat će se sva svojstva stila na sučelje web stranice bez potrebe za zasebnim upisivanjem svojstava na svakoj web stranici.

Dakle, potrebno je napisati pravilo @import kao:

@uvoz 'stylesheet.css' ;

Dodavanje pravila @import pisanjem ' url ” i naziv CSS datoteke u okruglim zagradama također će prikazati iste rezultate:

@uvoz url ( stylesheet.css ) ;

Svojstva definirana u ' stilski list ' implementiraju se samo dodavanjem jednostavnog ' @uvoz ” pravilo za to:

Ovo je najlakši način za uključivanje CSS svojstava u datoteku bez dodatnih napora.

Prednosti pravila @import u CSS-u

Pravilo @import obično se koristi iz sljedećih razloga:

  • Korištenje pravila @import smanjuje vrijeme i trud programera jer implementira sva svojstva određenog stilskog lista samo pisanjem naziva tog lista nakon @import.
  • U velikim i složenim web-aplikacijama pravilo @import pokazalo se vrlo korisnim budući da se ista svojstva stila mogu implementirati u više datoteka samo dodavanjem naziva datoteke lista stilova.
  • Elementi lista stilova kao što su zaglavlja, podnožja, tijelo itd. mogu se pohraniti u zasebne datoteke lista stilova, a zatim pomoću pravila @import može se uvesti bilo koji od potrebnih stilova bez potrebe za dodavanjem, uklanjanjem ili komentiranjem svojstava stila iz datoteka.

Ovo sažima upotrebu pravila @import i objašnjava kako se ovo pravilo smatra najboljom metodom za uključivanje CSS-a.

Zaključak

Listu stilova CSS-a može se uvesti ili joj se može pristupiti izravno iz druge tablice stilova, a sva svojstva u uvezenoj tablici stilova izravno su implementirana na web-stranici datoteke u koju je uvezena. Nema potrebe pisati svako CSS svojstvo zasebno za svako sučelje web stranice. Sve što je potrebno je dodati naziv datoteke CSS style sheet s @import. I ovo se smatra najboljom metodom za dodavanje CSS-a.