Järgmised on peamised ' reeglite juures ” CSS-is:
Räägime lühidalt kõigist kolmest ' reeglite juures ', et mõista, kuidas need töötavad.
Mis on @impordi reegel CSS-is?
' @import ” CSS-i reeglit kasutatakse CSS-i laadilehe importimiseks teiselt laadilehelt. Kui on olemas CSS-i stiilileht, mis sisaldab atribuute või stiilijuhiseid veebilehe erinevate elementide jaoks ja sama stiil tuleb lisada mõnda teise veebilehe faili, kirjutades ainult ' @import ' koos selle stiililehe nimega (mis sisaldab CSS-i atribuute) paremal küljel ümarsulgudes koos tähega ' url ' või pöördkomades saab importida sellelt laadilehelt kõik omadused ja rakendada need otse laadilehele, kus ' @import ” reegel on lisatud.
Süntaks
CSS-vormingus stiililehe faili nimi peaks olema kirjutatud pärast ' @import ”. Niisiis, süntaks lisamiseks @import ” Stiilitabeli reegel on järgmine:
@import 'laadilehenimi.css' ;
Impordireegli võib samal eesmärgil kirjutada ka järgmiselt, kuna see genereerib samuti sama tulemuse:
@import url ( stiililehenimi.css ) ;Mis on @media reegel CSS-is?
' @meedia ” Reegli kasutatakse meediajuhiste lisamiseks veebilehele. See reegel töötab vastavalt reegli lisamisel rakendatud tingimusele. Tingimus lisatakse kohe pärast lisamist @meedia ” paremal küljel ja seejärel reegli sees lokkis sulgudes on atribuudid või juhised, mida tuleb rakendada, kui tingimus on tõene.
Näide: @media reegli rakendamine
Näite kaudu mõistmiseks saame lisada veebilehele sisu:
< div klass = 'minu klass' >< h1 > Tere tulemast LinuxHinti õpetusse! < / h1 >
< / div >
Ülaltoodud koodilõigul on loodud pealkiri selle kuvamiseks veebilehe sisuna.
Võtame näite meediumijuhiste lisamisest, kui mõõtmed või lehe laius suurenevad või vähenevad. Kõigepealt kirjutage ' @meedia ” ja seejärel lisage tingimus ja seejärel määrake lokkis sulgudes CSS-i atribuudid, mida tuleks rakendada, kui tingimus on „ @meedia ” saab tõeks:
@meedia ( maksimaalne laius : 700 pikslit ) {.minu klass {
värvi : must ;
taustal : roheline ;
}
}
@meedia ( min-laius : 700 pikslit ) ja ( maksimaalne laius : 900 pikslit ) {
.minu klass {
värvi : must ;
taustal : kollane ;
}
}
@meedia ( min-laius : 900 pikslit ) {
.minu klass {
värvi : must ;
taustal : tsüaan ;
}
}
Ülaltoodud koodis on kolme erineva meediumireegli täitmise tingimusena mainitud erinevat laiuse suurust. Näiteks vastavalt ülaltoodud koodile, kui minimaalne laius on 700 pikslit, muutub teksti taustavärv kollaseks.
Ülaltoodud koodi abil genereeritud tulemus on järgmine. Ekraani suuruse muutmine muudab teksti taustavärvi:
Mis on @font-face reegel CSS-is?
Fontface reegel on lihtne meetod kirjastiilide lisamiseks otse veebilehele. Fondid laaditakse otse alla ja rakendatakse selle reegli kaudu tekstile.
Näide: @font-face reegli rakendamine
Saame aru, kuidas lisada @font-nägu ” reegel lihtsa näite kaudu:
< div klass = 'minu klass' >< h1 > Tere tulemast LinuxHinti õpetusse! < / h1 >
< / div >
Ülaltoodud koodilõigul on sama pealkiri, mida on kirjeldatud selle postituse eelmises jaotises.
Rakendame ' @font-nägu ' reegel ' ” pealkirja selle fondi muutmiseks:
@font-nägu {font-perekond : 'DejaVu Sans' ;
src : url ( './fonts/DejaVuSans.ttf' ) vormingus ( 'ttf' ) ;
font-weight : 500 ;
}
h1 {
font-perekond : 'DejaVu Sans' ;
font-weight : 500 ;
}
Ülaltoodud koodilõigul on nõutava fondipere nimi ja seejärel ' url ” link, kust font alla laaditakse, ja seejärel fondi kaal. Kui fondi nägu on määratud läbi ' @font-nägu ” reegli järgi saab fondi näo nime kasutada mis tahes elemendiga, nagu ka selles koodis on seda kasutatud „ h1 ” pealkiri.
Selle koodi käivitamine muudab fonti vastavalt jaotises ' @font-nägu ” reegel. Ülaltoodud koodilõigu väljund on järgmine:
See võtab kokku ' @ ” Sümbol CSS-is.
Järeldus
' @ CSS-i sümbolit kasutatakse lisamiseks reeglite juures ” CSS-is. Need reeglid täidavad CSS-i kasutamisel dokumentide stiili kujundamisel väga kasulikke ülesandeid, st impordivad terveid laadilehti teisest css-failist läbi ' @import ” reegel, rakenda CSS-i atribuute määratletud meediumil vastavalt tingimustele läbi „ @meedia ” reeglit ja laadige veebilehel kasutamiseks otse alla fonte @font-nägu ” reegel.