Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 31 di 33
  • livello principiante
Indice lezioni

Le @-rules

Le funzioni e la sintassi di tutte le @-rules dei CSS
Le funzioni e la sintassi di tutte le @-rules dei CSS
Link copiato negli appunti

Le cosiddette @-rules sono tipi particolari di costrutti che hanno una caratteristica comune: sono tutti introdotti dal simbolo della chiocciola. La pronuncia è identica a quella usata per gli indirizzi e-mail, ovvero at-import, at-media, etc.

Per quanto riguarda la funzione, rappresentano vie alternative, ma spesso più flessibili e potenti, per realizzare cose attuabili in altri modi. Abbiamo già visto nella lezione 5 come il costrutto @import sia un'alternativa all'elemento <link> per collegare fogli di stile esterni.

A livello sintattico le @-rules possono essere definite o nel corpo del documento HTML, per l'esattezza all'interno dell'elemento <style>:

<style type="text/css">
@rule
</style>

o direttamente nel codice di un CSS esterno.

Ognuna delle diverse @-rules presenta poi scopi e criteri diversi di costruzione. Esaminiamoli.

@import

@import viene usata innanzitutto per collegare un foglio di stile esterno al documento. La sintassi generica è la seguente:

<style type="text/css">
@import url(stile.css);
</style>

Come si vede, la direttiva è accompagnata dall'indicazione url che precede l'indirizzo del CSS. Questo è racchiuso tra parentesi tonde. La @-rule deve presentare alla fine il punto e virgola di chiusura.

Altre possibili sintassi prevedono:

1. URL con virgolette:

@import url("stile.css");

2. Direttiva senza l'indicazione url:

@import "stile.css";

L'url del foglio di stile può essere relativo, come negli esempi precedenti, o assoluto, come in questo:

<style type="text/css">
@import url(http://www.miosito.it/stile.css);
</style>

Un principio fondamentale è che all'interno del tag <style>, @import deve essere la prima regola definita.

È possibile importare all'interno di un singolo tag <style> più fogli di stile:

<style type="text/css">
@import url(stile-1.css);
@import url(stile-2.css);
</style>

Un uso interessante di @import è che può essere usata anche all'interno di un foglio di stile per incorporare un altro CSS esterno.

È possibile definire all'interno della direttiva @import anche il supporto cui applicare il CSS, in modo simile a quanto abbiamo visto a proposito dell'attributo media. Per fare ciò basta far seguire all'url del CSS
l'indicazione di uno dei media previsti nella specifica:

<style type="text/css">
@import url(stampa.css) print;
@import url(schermo.css) screen;
</style>

Ti consigliamo anche