Sljedeće su glavne ' prema pravilima ” u CSS-u:
Raspravimo ukratko o svakom od tri ' prema pravilima ” da biste razumjeli kako funkcioniraju.
Što je pravilo @import u CSS-u?
' @uvoz ” pravilo u CSS-u koristi se za uvoz CSS lista stilova iz drugog lista stilova. Ako postoji CSS lista stilova koja sadrži svojstva ili stilske upute za različite elemente web-stranice i potrebno je dodati isti stil u drugu datoteku web-stranice, pišući samo ' @uvoz ” s nazivom tog lista stilova (koji sadrži CSS svojstva) na desnoj strani u okruglim zagradama s “ url ” ili u navodnim zarezima može uvesti sva svojstva iz tog stilskog lista i primijeniti ih izravno na stilski list gdje je “ @uvoz ” je dodano pravilo.
Sintaksa
Trebao bi postojati naziv CSS oblikovane datoteke lista stilova napisan nakon ' @uvoz ”. Dakle, sintaksa za dodavanje ' @uvoz ” Pravilo u listu stilova je sljedeće:
@uvoz 'stylesheetname.css' ;
Pravilo uvoza također se može napisati kao sljedeće za istu svrhu jer će također generirati isti rezultat:
@uvoz url ( stylesheetname.css ) ;Što je pravilo @media u CSS-u?
' @mediji ” Pravilo se koristi za dodavanje medijskih uputa na web stranicu. Ovo pravilo funkcionira prema uvjetu primijenjenom prilikom dodavanja ovog pravila. Uvjet se dodaje odmah nakon dodavanja ' @mediji ” na desnoj strani, a zatim unutar pravila u vitičastim zagradama su svojstva ili upute koje je potrebno implementirati kada je uvjet istinit.
Primjer: Primjena pravila @media
Da bismo razumjeli kroz primjer, možemo dodati neki sadržaj na web stranicu:
< div razreda = 'moj razred' >< h1 > Dobro došli u vodič za LinuxHint! < / h1 >
< / div >
U gornjem isječku koda stvoren je naslov za prikaz sadržaja web stranice.
Uzmimo primjer dodavanja medijskih uputa kada se dimenzije ili širina stranice povećavaju ili smanjuju. Prvo napišite ' @mediji ', a zatim dodajte uvjet, a zatim u vitičastim zagradama definirajte CSS svojstva koja bi se trebala implementirati ako je uvjet s ' @mediji ” postaje istina:
@mediji ( maksimalna širina : 700 px ) {.moj razred {
boja : crno ;
pozadina : zelena ;
}
}
@mediji ( min-širina : 700 px ) i ( maksimalna širina : 900 px ) {
.moj razred {
boja : crno ;
pozadina : žuta boja ;
}
}
@mediji ( min-širina : 900 px ) {
.moj razred {
boja : crno ;
pozadina : cijan ;
}
}
U gornjem kodu, spomenute su različite veličine širine kao uvjet da se tri različita medijska pravila izvrše u skladu s tim. Na primjer, prema gornjem kodu, kada minimalna širina bude 700 piksela, boja pozadine teksta promijenit će se u žutu.
Sljedeći će biti rezultat generiran pomoću gornjeg koda. Promjenom veličine zaslona promijenit će se boje pozadine teksta:
Što je pravilo @font-face u CSS-u?
Pravilo fonta jednostavna je metoda za dodavanje stilova fonta izravno na web stranicu. Fontovi se izravno preuzimaju i primjenjuju na tekst putem ovog pravila.
Primjer: Primjena pravila @font-face
Razmotrimo metodu dodavanja ' @font-lice ” kroz jednostavan primjer:
< div razreda = 'moj razred' >< h1 > Dobro došli u vodič za LinuxHint! < / h1 >
< / div >
Gornji isječak koda ima isti naslov teksta kao što je opisano u prethodnom odjeljku ovog posta.
Implementirajmo ' @font-lice ' pravilo za ' ” za promjenu fonta:
@font-lice {obitelj-fontova : 'DejaVu Sans' ;
src : url ( './fonts/DejaVuSans.ttf' ) format ( 'ttf' ) ;
težina fonta : 500 ;
}
h1 {
obitelj-fontova : 'DejaVu Sans' ;
težina fonta : 500 ;
}
U gornjem isječku koda nalazi se naziv obitelji fontova koja je potrebna, a zatim ' url ” poveznicu odakle treba preuzeti font i zatim težinu fonta. Kada je font naveden kroz ' @font-lice ', naziv fonta može se koristiti s bilo kojim elementom, kao što je u ovom kodu korišten za ' h1 ” naslov.
Pokretanje ovog koda promijenit će font prema uputama navedenim u ' @font-lice ' Pravilo. Sljedeći će biti rezultat gornjeg isječka koda:
Ovo sažima svrhu ' @ ” Simbol u CSS-u.
Zaključak
' @ ” Simbol u CSS-u koristi se za dodavanje “ prema pravilima ” u CSS-u. Ova pravila obavljaju vrlo korisne zadatke dok koriste CSS za stiliziranje dokumenata, tj. uvoze cijele listove stilova iz druge css datoteke putem ' @uvoz ', primijenite CSS svojstva na definirane medije prema uvjetima kroz ' @mediji ' i izravno preuzmite fontove za korištenje na web stranici putem ' @font-lice ' Pravilo.