"@"Il simbolo viene utilizzato per aggiungere regole in CSS. Le regole aggiunte attraverso il "@Il simbolo "sono chiamati"alle regole". Queste regole minimizzano lo sforzo dello sviluppatore in modi diversi. Le operazioni che "alle regole"Esecuzione stanno importando le proprietà CSS direttamente senza bisogno di scrivere o copiare incolla tutte le proprietà CSS in ciascun file, applicando proprietà su determinati media e scaricando direttamente i caratteri al contenuto della pagina Web.

Di seguito sono i principali "alle regole"In CSS:

• La regola @import
• La regola @media
• La regola di Font-Face

Discutiamo brevemente ciascuno dei tre "alle regole"Per capire come funzionano.

Qual è la regola @import in CSS?

IL "@importare"La regola in CSS viene utilizzata per importare un foglio di stile CSS da un altro foglio di stile. Se esiste un foglio di stile CSS che contiene proprietà o istruzioni di styling per diversi elementi di una pagina web ed è necessario aggiungere lo stesso stile in un altro file di pagina web, scrivendo solo "@importare"Con il nome di quel foglio di stile (che contiene proprietà CSS) sul lato destro in entrambe le staffe rotonde con"URL"Oppure nelle virgole invertite possono importare tutte le proprietà da quel foglio di stile e applicarle direttamente al foglio di stile in cui"@importare"La regola è stata aggiunta.

Sintassi

Dovrebbe esserci il nome del file di foglio di stile formattato CSS scritto dopo "@importare". Quindi, la sintassi da aggiungere "@importare"La regola in un foglio di stile è il seguente:

@import "StylesheetName.CSS ";

La regola di importazione può anche essere scritta come quanto segue per lo stesso scopo genererà anche lo stesso risultato:

@import URL (StylesheetName.CSS);

Qual è la regola @media in CSS?

IL "@media"La regola viene utilizzata per aggiungere istruzioni multimediali alla pagina Web. Questa regola funziona in base alla condizione applicata durante l'aggiunta di questa regola. La condizione viene aggiunta subito dopo l'aggiunta "@media"Sul lato destro e quindi all'interno della regola tra le parentesi ricci ci sono le proprietà o le istruzioni che devono essere implementate quando la condizione è vera.

Esempio: applicazione della regola @media

Per capire attraverso un esempio, possiamo aggiungere alcuni contenuti alla pagina Web:

Benvenuti in LinuxHint Tutorial!

Nello snippet di codice sopra, c'è un'intestazione creata per visualizzare questo come contenuto della pagina web.

Facciamo un esempio di aggiunta di istruzioni sui media quando le dimensioni o la larghezza della pagina aumentano o diminuiscono. Innanzitutto, scrivi "@media"E quindi aggiungi la condizione e quindi tra parentesi ricci definiscono le proprietà CSS che dovrebbero essere implementate se la condizione con"@media"Diventa vero:

@Media (max-width: 700px)
.la mia classe
colore nero;
Background: verde;


@Media (Min-Width: 700px) e (Max-Width: 900px)
.la mia classe
colore nero;
Sfondo: giallo;


@media (Min-Width: 900px)
.la mia classe
colore nero;
Background: ciano;

Nel codice di cui sopra, sono state menzionate diverse dimensioni di larghezza come condizione per tre diverse regole dei media da eseguire di conseguenza. Ad esempio, secondo il codice sopra, quando la larghezza minima sarà 700px, il colore di sfondo del testo cambierà in giallo.

Quanto segue sarà il risultato generato attraverso il codice sopra. La modifica delle dimensioni dello schermo cambierà i colori di sfondo del testo:

Qual è la regola di Font-Face in CSS?

La regola fontface è un metodo facile per aggiungere stili di carattere direttamente alla pagina web. I caratteri vengono scaricati direttamente e applicati al testo tramite questa regola.

Esempio: applicazione della regola della faccia di font

Comprendiamo il metodo per aggiungere "@Font-Face"Regola attraverso un semplice esempio:

Benvenuti in LinuxHint Tutorial!

Lo snippet di codice sopra ha lo stesso intestazione di testo descritto nella sezione precedente di questo post.

Implementiamo il "@Font-FaceRegola per il "

"Intestazione per cambiare il suo carattere:

@font-face
Font-Family: "Dejavu Sans";
SRC: URL ("./caratteri/dejavusans.TTF ") formato (" TTF ");
Font-Weight: 500;

H1
Font-Family: "dejavu sans";
Font-Weight: 500;

Nel frammento di codice sopra, c'è il nome della famiglia dei caratteri che è richiesto e quindi il "URL"Link da dove dovrebbe essere scaricato il carattere e poi il po 'di carattere. Quando la faccia del carattere è specificata attraverso il "@Font-Face"Regola, il nome della faccia del carattere può essere usato con qualsiasi elemento, come in questo codice è stato usato per"H1" intestazione.

L'esecuzione di questo codice cambierà il carattere in base alle istruzioni menzionate in "@Font-Face" regola. Quanto segue sarà l'output dello snippet di codice sopra:

Questo riassume lo scopo del "@"Simbolo in CSS.

Conclusione

IL "@"Il simbolo in CSS viene utilizzato per aggiungere"alle regole"In CSS. Queste regole svolgono attività molto utili durante l'utilizzo di CSS per lo styling dei documenti i.e. Importano fogli di stile intero da un altro file CSS tramite "@importare"Regola, applicare le proprietà CSS sui media definiti in base alle condizioni attraverso"@media"Regola e scarica direttamente i caratteri da utilizzare nella pagina web tramite"@Font-Face" regola.