Počas kódovania je však ťažké zahrnúť rovnaké vlastnosti CSS pre každú webovú stránku samostatne. Preto je potrebné použiť riešenie, pomocou ktorého je možné vytvoriť jednu šablónu štýlov a potom ľahko pristupovať k viacerým súborom.
Čo je pravidlo @import v CSS?
Najlepším spôsobom, ako zahrnúť vlastnosti štýlu CSS, je použiť pravidlo @import. @import sa používa na import alebo prístup k šablóne štýlov CSS z inej šablóny štýlov. To znižuje úsilie vývojára, pretože všetky vlastnosti pridané do importovanej šablóny štýlov sú implementované priamo jednoduchým napísaním @import a potom presným názvom šablóny štýlov.
Syntax pravidla @import
Syntax na pridanie pravidla @import na prístup k šablóne štýlov z inej šablóny štýlov je nasledovná:
@import 'stylesheetname.css' ;
Pravidlo @import možno pridať aj nasledujúcim spôsobom:
@import url ( stylesheetname.css ) ;
Jednoducho pridajte názov súboru šablóny so štýlmi CSS buď v obrátených čiarkach alebo v okrúhlych zátvorkách s „ url “ po napísaní “ @import “.
Príklad: Pridanie pravidla @import
Aby sme pochopili, ako funguje pravidlo @import, napíšeme jednoduchý útržok kódu:
< h1 > Toto je jednoduchý text! < / h1 >Vo vyššie uvedenom úryvku kódu je nadpis
s jednoduchou jednoriadkovou vetou pridanou v dokumente HTML. Tento jednoduchý kód vygeneruje nasledujúci výstup:
Umožňuje vytvoriť šablónu so štýlmi na definovanie niektorých vlastností CSS, ktoré možno neskôr importovať zo súboru, prostredníctvom ktorého sa vytvára vyššie uvedené rozhranie webovej stránky. Vytvoríme ďalší súbor a pomenujeme ho „ štýlov “ s typom súboru deklarovaným ako „ css “ a jednoducho pridajte nejaké vlastnosti pre nadpis a telo
: h1 {
farba : polnočná modrá ;
farba pozadia : azúrový ;
zarovnanie textu : stred ;
}
telo {
farba pozadia : svetlo modrá ;
}
Na prístup k súboru šablóny so štýlmi, ktorý obsahuje vlastnosti štýlu pre nadpis a telo
, musíme jednoducho pridať pravidlo @import do ľubovoľného súboru CSS, kde je tento štýl potrebný.
Pridaním jednoduchého pravidla @import sa implementujú všetky vlastnosti štýlu do rozhrania webovej stránky bez toho, aby ste museli vlastnosti písať samostatne na každej webovej stránke.
Preto je potrebné napísať pravidlo @import ako:
@import 'stylesheet.css' ;Pridanie pravidla @import napísaním „ url “ a názov súboru CSS v okrúhlych zátvorkách tiež zobrazí rovnaké výsledky:
@import url ( stylesheet.css ) ;Vlastnosti definované v „ štýlov “ sú implementované jednoduchým pridaním “ @import “ pravidlo pre to:
Toto je najjednoduchší spôsob, ako zahrnúť vlastnosti CSS do súboru bez akéhokoľvek ďalšieho úsilia.
Výhody pravidla @import v CSS
Pravidlo @import sa bežne používa z nasledujúcich dôvodov:
- Použitie pravidla @import znižuje čas a úsilie vývojára, pretože implementuje všetky vlastnosti konkrétneho hárku štýlov jednoduchým napísaním názvu tohto hárku za @import.
- Vo veľkých a zložitých webových aplikáciách sa pravidlo @import ukazuje ako veľmi výhodné, pretože rovnaké vlastnosti štýlu možno implementovať do viacerých súborov jednoduchým pridaním názvu súboru so štýlom.
- Prvky šablóny štýlov, ako sú hlavičky, päty, telo atď., môžu byť uložené v samostatných súboroch šablón štýlov a pomocou pravidla @import je možné importovať ľubovoľný požadovaný štýl bez toho, aby ste museli pridávať, odstraňovať alebo komentovať vlastnosti štýlu zo súboru súbor.
Toto zhŕňa použitie pravidla @import a vysvetľuje, ako sa toto pravidlo považuje za najlepší spôsob zahrnutia CSS.
Záver
Šablóna štýlov CSS môže byť importovaná alebo prístupná priamo z inej šablóny štýlov a všetky vlastnosti v importovanej šablóne štýlov sú priamo implementované na webovej stránke súboru, do ktorého bol importovaný. Nie je potrebné písať každú vlastnosť CSS samostatne pre každé rozhranie webovej stránky. Všetko, čo potrebujete, je pridať názov súboru šablóny so štýlmi CSS pomocou @import. A toto sa považuje za najlepší spôsob pridania CSS.