Maar tijdens het coderen is het moeilijk om voor elke webpagina afzonderlijk dezelfde CSS-eigenschappen op te nemen. Het is dus vereist om een oplossing te gebruiken waarmee een enkel opmaakmodel kan worden gemaakt en vervolgens gemakkelijk toegankelijk is voor meerdere bestanden.
Wat is de @import-regel in CSS?
De beste manier om de CSS-stijleigenschappen op te nemen, is door de @import-regel te gebruiken. @import wordt gebruikt om een CSS-stylesheet te importeren of te openen vanuit een andere stylesheet. Dit vermindert de inspanning van de ontwikkelaar omdat alle eigenschappen die in de geïmporteerde stijlpagina zijn toegevoegd, direct worden geïmplementeerd door gewoon @import te schrijven en vervolgens de exacte naam van de stijlpagina.
Syntaxis van @import-regel
De syntaxis om de @import-regel toe te voegen om toegang te krijgen tot een opmaakmodel vanuit een ander opmaakmodel is als volgt:
@importeren 'stylesheetnaam.css' ;
De @import-regel kan ook op de volgende manier worden toegevoegd:
@importeren url ( stylesheetnaam.css ) ;
Voeg gewoon de naam van het CSS-stylesheetbestand toe tussen aanhalingstekens of tussen ronde haakjes met ' url ”na het schrijven“ @importeren ”.
Voorbeeld: @import-regel toevoegen
Om te begrijpen hoe de @import-regel werkt, schrijven we een eenvoudig codefragment:
< h1 > Dit is een eenvoudige tekst! < / h1 >In het bovenstaande codefragment is er een
-kop met een eenvoudige zin van één regel toegevoegd in een HTML-document. Deze eenvoudige code genereert de volgende uitvoer:
Laten we een stylesheet maken om enkele CSS-eigenschappen te definiëren die later kunnen worden geïmporteerd uit het bestand waarmee de bovenstaande webpagina-interface is gemaakt. We maken een ander bestand en noemen het ' stijlblad ' met het bestandstype gedeclareerd als ' CSS ”, en voeg gewoon enkele eigenschappen toe voor
kop en hoofdtekst: h1 {
kleur : middernacht blauw ;
Achtergrond kleur : azuur ;
tekst uitlijnen : centrum ;
}
lichaam {
Achtergrond kleur : lichtblauw ;
}
Om toegang te krijgen tot het stylesheetbestand met de stijleigenschappen voor
kop en body, hoeven we alleen maar de @import-regel toe te voegen in een van de CSS-bestanden waar die styling nodig is.
Door slechts een eenvoudige @import-regel toe te voegen, worden alle stijleigenschappen in de webpagina-interface geïmplementeerd zonder dat de eigenschappen afzonderlijk op elke webpagina hoeven te worden ingevoerd.
Het is dus vereist om de @import-regel te schrijven als:
@importeren 'stylesheet.css' ;De @import-regel toevoegen door te schrijven ' url ” en de naam van het CSS-bestand tussen ronde haakjes zullen ook dezelfde resultaten weergeven:
@importeren url ( stylesheet.css ) ;De eigenschappen gedefinieerd in de “ stijlblad ”-bestand worden geïmplementeerd door gewoon een simpele “ @importeren regel ervoor:
Dit is de eenvoudigste manier om de CSS-eigenschappen zonder extra inspanningen in een bestand op te nemen.
Voordelen van @import-regel in CSS
De @import-regel wordt vaak gebruikt om de volgende redenen:
- Het gebruik van de @import-regel vermindert de tijd en inspanning van de ontwikkelaar, omdat het alle eigenschappen van een bepaald stijlblad implementeert door gewoon de naam van dat blad achter @import te schrijven.
- In grote en complexe web-apps blijkt de @import-regel zeer voordelig te zijn, omdat dezelfde stijleigenschappen in meerdere bestanden kunnen worden geïmplementeerd door gewoon de naam van het stijlbladbestand toe te voegen.
- Stijlbladelementen zoals kopteksten, voetteksten, body, enz. kunnen worden opgeslagen in aparte stijlbladbestanden, en vervolgens door de @import-regel te gebruiken, kan elk van de vereiste stijlen worden geïmporteerd zonder stijleigenschappen toe te voegen, te verwijderen of te becommentariëren uit een bestand.
Dit somt het gebruik van de @import-regel op en legt uit hoe deze regel wordt beschouwd als de beste methode om CSS op te nemen.
Conclusie
Een CSS-stijlblad kan worden geïmporteerd of rechtstreeks worden geopend vanuit een ander stijlblad en alle eigenschappen in het geïmporteerde stijlblad worden direct geïmplementeerd op de webpagina van het bestand waarin het is geïmporteerd. Het is niet nodig om elke CSS-eigenschap apart te schrijven voor elke webpagina-interface. Het enige dat nodig is, is de naam van het CSS-stijlbladbestand toe te voegen met @import. En dit wordt beschouwd als de beste methode om CSS toe te voegen.