Men vid kodning är det svårt att inkludera samma CSS-egenskaper för varje webbsida separat. Så det krävs att du använder en lösning genom vilken en enda stilmall kan skapas och sedan enkelt nås av flera filer.
Vad är @import-regeln i CSS?
Det bästa sättet att inkludera egenskaperna för CSS-stilen är att använda @import-regeln. @import används för att importera eller komma åt en CSS-stilmall från en annan stilmall. Detta minskar ansträngningen för utvecklaren eftersom alla egenskaper som läggs till i den importerade stilmallen implementeras direkt genom att bara skriva @import och sedan det exakta namnet på stilmallen.
Syntax för @importregel
Syntaxen för att lägga till @import-regeln för att komma åt en formatmall från en annan formatmall är följande:
@importera 'stylesheetname.css' ;
@import-regeln kan också läggas till på följande sätt:
@importera url ( stilarknamn.css ) ;
Lägg bara till namnet på CSS-formatmallsfilen med antingen inverterade kommatecken eller inom runda parenteser med ' url ' efter att ha skrivit ' @importera ”.
Exempel: Lägga till @importregel
För att förstå hur @import-regeln fungerar skriver vi ett enkelt kodavsnitt:
< h1 > Detta är en enkel text! < / h1 >I kodavsnittet ovan finns en
-rubrik med en enkel enrads mening tillagd i ett HTML-dokument. Denna enkla kod kommer att generera följande utdata:
Låt oss skapa en stilmall för att definiera några CSS-egenskaper som senare kan importeras från filen genom vilken ovanstående webbsidas gränssnitt skapas. Vi skapar en annan fil och namnger den ' stilmall ' med filtypen deklarerad som ' css ”, och lägg helt enkelt till några egenskaper för
rubrik och text: h1 {
Färg : midnattsblå ;
bakgrundsfärg : azurblå ;
textjustera : Centrum ;
}
kropp {
bakgrundsfärg : ljusblå ;
}
För att komma åt stilmallsfilen som innehåller stilegenskaperna för
rubrik och text, behöver vi helt enkelt lägga till @import-regeln i någon av CSS-filerna där den stilen behövs.
Att bara lägga till en enkel @import-regel kommer att implementera alla stilegenskaper till webbsidans gränssnitt utan att behöva skriva egenskaperna separat på varje webbsida.
Så det är nödvändigt att skriva @importregeln som:
@importera 'stylesheet.css' ;Lägga till @import-regeln genom att skriva ' url ” och namnet på CSS-filen inom de runda parenteserna kommer också att visa samma resultat:
@importera url ( stilark.css ) ;De egenskaper som definieras i ' stilmall '-filen implementeras genom att bara lägga till en enkel ' @importera ' regel för det:
Detta är det enklaste sättet att inkludera CSS-egenskaperna i en fil utan ytterligare ansträngningar.
Fördelar med @importregeln i CSS
@import-regeln används ofta av följande skäl:
- Att använda @import-regeln minskar tiden och ansträngningen för utvecklaren eftersom den implementerar alla egenskaper för en viss stilmall genom att bara skriva namnet på det arket efter @import.
- I stora och komplexa webbappar visar @import-regeln sig vara mycket fördelaktig eftersom samma stilegenskaper kan implementeras i flera filer bara genom att lägga till namnet på formatmallsfilen.
- Stilmallselement som sidhuvuden, sidfötter, brödtext, etc kan lagras i separata formatmallsfiler, och sedan genom att använda @import-regeln kan alla nödvändiga stilar importeras utan att behöva lägga till, ta bort eller kommentera stilegenskaper från en fil.
Detta sammanfattar användningen av @import-regeln och förklarar hur denna regel anses vara den bästa metoden för att inkludera CSS.
Slutsats
En CSS-stilmall kan importeras eller nås direkt från en annan stilmall och alla egenskaper i den importerade formatmallen implementeras direkt på webbsidan för filen där den har importerats. Det finns inget behov av att skriva varje CSS-egenskap separat för varje webbsidas gränssnitt. Allt som krävs är att lägga till namnet på CSS-formatmallsfilen med @import. Och detta anses vara den bästa metoden för att lägga till CSS.