Mutta koodauksen aikana on vaikea sisällyttää samat CSS-ominaisuudet jokaiselle verkkosivulle erikseen. Joten on käytettävä ratkaisua, jonka avulla voidaan luoda yksi tyylisivu, jota voidaan käyttää useilla tiedostoilla helposti.
Mikä on @import-sääntö CSS:ssä?
Paras tapa sisällyttää CSS-tyyliominaisuudet on käyttää @import-sääntöä. @import-toimintoa käytetään CSS-tyylitaulukon tuomiseen tai avaamiseen toisesta tyylisivusta. Tämä vähentää kehittäjän vaivaa, koska kaikki tuotuun tyylisivuun lisätyt ominaisuudet toteutetaan suoraan kirjoittamalla @import ja sitten tyylisivun tarkka nimi.
@import-säännön syntaksi
Syntaksi @import-säännön lisäämiseen, jotta voit käyttää tyylisivua toisesta tyylitaulukosta, on seuraava:
@tuonti 'tyylitaulukonnimi.css' ;
@import-sääntö voidaan lisätä myös seuraavalla tavalla:
@tuonti url ( stylesheetname.css ) ;
Lisää vain CSS-tyylitaulukkotiedoston nimi joko käänteisissä pilkuissa tai hakasulkeissa ' url 'kirjoituksen jälkeen' @tuonti ”.
Esimerkki: @import-säännön lisääminen
Ymmärtääksemme, miten @import-sääntö toimii, kirjoitamme yksinkertaisen koodinpätkän:
< h1 > Tämä on yksinkertainen teksti! < / h1 >Yllä olevassa koodinpätkässä on
-otsikko, jossa on yksinkertainen yksirivinen lause, joka on lisätty HTML-dokumenttiin. Tämä yksinkertainen koodi tuottaa seuraavan tulosteen:
Luodaan tyylitaulukko, jolla määritellään joitain CSS-ominaisuuksia, jotka voidaan myöhemmin tuoda tiedostosta, jonka kautta yllä oleva web-sivun käyttöliittymä luodaan. Luomme toisen tiedoston ja annamme sille nimen ' tyylisivu ' jonka tiedostotyyppi on ilmoitettu ' css ”, ja lisää vain joitain ominaisuuksia
-otsikolle ja tekstille: h1 {
väri : yönsininen ;
taustaväri : taivaansininen ;
tekstin tasaus : keskusta ;
}
kehon {
taustaväri : vaaleansininen ;
}
Päästäksemme tyylitaulukkotiedostoon, joka sisältää
-otsikon ja -tekstin tyyliominaisuudet, meidän on yksinkertaisesti lisättävä @import-sääntö mihin tahansa CSS-tiedostoon, jossa tätä tyyliä tarvitaan.
Pelkän @import-säännön lisääminen ottaa käyttöön kaikki tyyliominaisuudet verkkosivun käyttöliittymässä ilman, että ominaisuuksia tarvitsee kirjoittaa erikseen jokaiselle verkkosivulle.
Joten @import-sääntö on kirjoitettava seuraavasti:
@tuonti 'tyylitaulukko.css' ;@import-säännön lisääminen kirjoittamalla ' url ” ja CSS-tiedoston nimi suluissa näyttävät myös samat tulokset:
@tuonti url ( stylesheet.css ) ;Kohdassa ' tyylisivu '-tiedosto toteutetaan lisäämällä yksinkertainen ' @tuonti 'sääntö sille:
Tämä on helpoin tapa sisällyttää CSS-ominaisuudet tiedostoon ilman lisäponnisteluja.
@import-säännön edut CSS:ssä
@import-sääntöä käytetään yleisesti seuraavista syistä:
- @import-säännön käyttäminen vähentää kehittäjän aikaa ja vaivaa, koska se toteuttaa tietyn tyylisivun kaikki ominaisuudet kirjoittamalla taulukon nimen @importin jälkeen.
- Suurissa ja monimutkaisissa verkkosovelluksissa @import-sääntö osoittautuu erittäin edulliseksi, koska samat tyyliominaisuudet voidaan toteuttaa useissa tiedostoissa vain lisäämällä tyylisivutiedoston nimi.
- Tyylisivuelementit, kuten otsikot, alatunnisteet, runko jne., voidaan tallentaa erillisiin tyylisivutiedostoihin, ja sitten @import-säännön avulla mikä tahansa vaadittu tyyli voidaan tuoda ilman, että sinun tarvitsee lisätä, poistaa tai kommentoida tyyliominaisuuksia tiedosto.
Tämä tiivistää @import-säännön käytön ja selittää, kuinka tätä sääntöä pidetään parhaana tapana sisällyttää CSS.
Johtopäätös
CSS-tyylisivu voidaan tuoda tai käyttää suoraan toisesta tyylisivusta ja kaikki tuodun tyylisivun ominaisuudet toteutetaan suoraan sen tiedoston verkkosivulla, jolle se on tuotu. Ei tarvitse kirjoittaa jokaista CSS-ominaisuutta erikseen jokaiselle verkkosivun käyttöliittymälle. Riittää, kun lisäät CSS-tyylisivutiedoston nimen @import. Ja tätä pidetään parhaana tapana lisätä CSS.