A kódolás során azonban nehéz ugyanazokat a CSS-tulajdonságokat minden egyes weboldalhoz külön-külön megadni. Tehát olyan megoldást kell használni, amelyen keresztül egyetlen stíluslap hozható létre, majd több fájl könnyen elérhető.
Mi az @import szabály a CSS-ben?
A CSS-stílustulajdonságok felvételének legjobb módja az @import szabály használata. Az @import a CSS-stíluslapok importálására vagy egy másik stíluslapról való elérésére szolgál. Ez csökkenti a fejlesztő erőfeszítéseit, mivel az importált stíluslaphoz hozzáadott összes tulajdonság közvetlenül az @import, majd a stíluslap pontos nevének beírásával valósul meg.
Az @import szabály szintaxisa
Az @import szabály hozzáadásának szintaxisa a stíluslap másik stíluslapról való eléréséhez a következő:
@import 'stíluslapnév.css' ;
Az @import szabály a következő módszerrel is hozzáadható:
@import url ( stíluslapnév.css ) ;
Egyszerűen adja hozzá a CSS-stíluslap fájl nevét fordított vesszővel vagy kerek zárójelben a „ url 'írás után' @import ”.
Példa: @import szabály hozzáadása
Az @import szabály működésének megértéséhez írunk egy egyszerű kódrészletet:
< h1 > Ez egy egyszerű szöveg! < / h1 >A fenti kódrészletben van egy
fejléc egy egyszerű egysoros mondattal, amelyet egy HTML-dokumentumban adnak hozzá. Ez az egyszerű kód a következő kimenetet generálja:
Lehetővé teszi egy stíluslap létrehozását néhány CSS-tulajdonság meghatározásához, amelyek később importálhatók abból a fájlból, amelyen keresztül a fenti weboldal felület létrejön. Létrehozunk egy másik fájlt, és elnevezzük „ stíluslap ' a következővel deklarált fájltípussal css ”, és egyszerűen adjon hozzá néhány tulajdonságot a
címsorhoz és törzshöz: h1 {
szín : éjkék ;
háttérszín : égszínkék ;
szöveg igazítás : központ ;
}
test {
háttérszín : világoskék ;
}
A
címsor és törzs stílustulajdonságait tartalmazó stíluslapfájl eléréséhez egyszerűen hozzá kell adnunk az @import szabályt bármely olyan CSS-fájlhoz, ahol erre a stílusra szükség van.
Ha csak egy egyszerű @import szabályt ad hozzá, az összes stílustulajdonságot megvalósítja a weblap felületén anélkül, hogy a tulajdonságokat minden weboldalon külön-külön be kellene írnia.
Tehát az @import szabályt a következőképpen kell írni:
@import 'stíluslap.css' ;Az @import szabály hozzáadása '' url ” és a kerek zárójelben lévő CSS-fájl neve is ugyanazokat az eredményeket fogja megjeleníteni:
@import url ( stíluslap.css ) ;pontban meghatározott tulajdonságok stíluslap ' fájl csak egy egyszerű ' @import ” szabály rá:
Ez a legegyszerűbb módja annak, hogy a CSS-tulajdonságokat minden további erőfeszítés nélkül belefoglalja egy fájlba.
Az @import szabály előnyei a CSS-ben
Az @import szabályt általában a következő okok miatt használják:
- Az @import szabály használata csökkenti a fejlesztő idejét és erőfeszítéseit, mivel egy adott stíluslap összes tulajdonságát megvalósítja, ha csak a lap nevét írja az @import után.
- Nagy és összetett webes alkalmazásokban az @import szabály nagyon előnyösnek bizonyul, mivel ugyanazok a stílustulajdonságok több fájlban is megvalósíthatók, pusztán a stíluslapfájl nevének hozzáadásával.
- A stíluslapelemek, például a fejlécek, láblécek, törzs stb. külön stíluslapfájlokban tárolhatók, majd az @import szabály használatával a szükséges stílusok bármelyike importálható anélkül, hogy stílustulajdonságokat kellene hozzáadni, eltávolítani vagy megjegyzéseket kellene fűzni egy fájlt.
Ez összefoglalja az @import szabály használatát, és elmagyarázza, hogy ez a szabály hogyan tekinthető a legjobb módszernek a CSS beépítésére.
Következtetés
A CSS-stíluslap importálható vagy közvetlenül elérhető egy másik stíluslapról, és az importált stíluslap összes tulajdonsága közvetlenül implementálva van annak a fájlnak a weboldalán, ahová importálták. Nem kell minden egyes CSS-tulajdonságot külön-külön írni minden weboldal felületéhez. Mindössze hozzá kell adni a CSS-stíluslapfájl nevét az @import karakterlánccal. És ez tekinthető a legjobb módszernek a CSS hozzáadására.