“@”Symbol brukes til å legge til regler i CSS. Reglene lagt til gjennom "@”Symbol kalles“ved regler”. Disse reglene minimerer utviklerens innsats på forskjellige måter. Operasjonene som “ved regler”Perform importerer CSS-egenskaper direkte uten å måtte skrive eller kopiere pasta på alle CSS-egenskaper i hver fil, bruke egenskaper på visse medier, og last ned og bruke skrifter direkte på innholdet.

Følgende er de viktigste “ved regler”I CSS:

• @Import -regelen
• @Media -regelen
• @Font-face-regelen

La oss kort diskutere hver av de tre "ved regler”For å forstå hvordan de fungerer.

Hva er @import -regelen i CSS?

“@import”Regel i CSS brukes til å importere et CSS -stilark fra et annet stilark. Hvis det er et CSS -stilark som inneholder egenskaper eller stylinginstruksjoner for forskjellige elementer på en webside, og det er påkrevd å legge til den samme stylingen i en annen websidefil, skriver du bare "@import”Med navnet på det stilarket (som inneholder CSS -egenskaper) på høyre side i enten runde parentes med“URL”Eller i inverterte komma kan importere alle egenskapene fra det stilarket og bruke dem direkte på stilarket der“@import”Regel er lagt til.

Syntaks

Det skal være navnet på CSS -formatert stilarkfil skrevet etter "@import”. Så syntaksen for å legge til “@import”Regel i et stilark er som følger:

@import "StylesheetName.CSS ";

Importregelen kan også skrives som følgende for samme formål som den også vil generere det samme resultatet:

@Import URL (StylesheetName.CSS);

Hva er @media -regelen i CSS?

“@media”Regel brukes til å legge til medieinstruksjoner på websiden. Denne regelen fungerer i henhold til tilstanden som brukes mens du legger til denne regelen. Tilstanden legges til rett etter å ha lagt til “@media”På høyre side og deretter inne i regelen i de krøllete parentesene er egenskapene eller instruksjonene som må implementeres når tilstanden er sann.

Eksempel: Bruke @media -regel

For å forstå et eksempel, kan vi legge til noe innhold på websiden:

Velkommen til Linuxhint Tutorial!

I ovennevnte kodebit er det en overskrift som er opprettet for å vise dette som innholdet på websiden.

La oss ta et eksempel på å legge til medieinstruksjoner når dimensjonene eller sidebredden øker eller reduseres. Først, skriv “@media”Og tilsett deretter tilstanden og deretter i de krøllete parentesene definerer CSS -egenskapene som bør implementeres hvis tilstanden med"@media”Blir sant:

@media (maks bredde: 700px)
.klassen min
farge svart;
Bakgrunn: grønn;


@Media (Min-bredde: 700px) og (maks bredde: 900px)
.klassen min
farge svart;
Bakgrunn: Gul;


@media (Min-bredde: 900px)
.klassen min
farge svart;
Bakgrunn: Cyan;

I koden ovenfor har det blitt nevnt forskjellige bredde størrelser som betingelsen for tre forskjellige medieregler for å utføre deretter. For eksempel, i henhold til ovennevnte kode, når minimumsbredden vil være 700px, vil bakgrunnsfargen på teksten endres til gul.

Følgende vil være resultatet generert gjennom ovennevnte kode. Endring av størrelsen på skjermen vil endre bakgrunnsfargene på teksten:

Hva er @font-face-regelen i CSS?

Fontface -regel er en enkel metode for å legge til fontstiler direkte på websiden. Skriftene lastes ned direkte og brukes på teksten gjennom denne regelen.

Eksempel: Bruker @Font-Face Rule

La oss forstå metoden for å legge til “@Font-Face”Regel gjennom et enkelt eksempel:

Velkommen til Linuxhint Tutorial!

Ovennevnte kodebit har samme tekstoverskrift som beskrevet i forrige del av dette innlegget.

La oss implementere “@Font-Face”Regel for“

”På vei for å endre skrifttypen:

@font-ansikt
Font-family: "Dejavu sans";
SRC: URL ("./skrifter/dejavusans.ttf ") format (" ttf ");
Fontvekt: 500;

H1
Font-family: 'Dejavu sans';
Fontvekt: 500;

I ovennevnte kodebit er det navnet på fontfamilien som kreves og deretter "URL”Link hvor skrifttypen skal lastes ned og deretter fontvekten. Når fontflaten er spesifisert gjennom “@Font-Face”Regel, navnet på font ansiktet kan brukes med et hvilket som helst element, som i denne koden det har blitt brukt til“H1”Overskrift.

Å kjøre denne koden vil endre skrifttypen i henhold til instruksjonene som er nevnt i "@Font-Face" regel. Følgende vil være utdataene fra ovennevnte kodebit:

Dette oppsummerer formålet med "@”Symbol i CSS.

Konklusjon

“@”Symbol i CSS brukes til å legge til“ved regler”I CSS. Disse reglene utfører veldig nyttige oppgaver mens du bruker CSS for å style dokumentene i.e. De importerer hele stilark fra en annen CSS -fil gjennom “@import”Regel, bruk CSS -egenskaper på definerte medier i henhold til forholdene gjennom“@media”Regel, og last ned skrifter direkte til bruk på websiden gjennom“@Font-Face" regel.