CSS - @ Regole

Questo capitolo tratterà le seguenti importanti regole @:

  • Il @import: regola importa un altro foglio di stile nel foglio di stile corrente.

  • Il @charset regola indica il set di caratteri utilizzato dal foglio di stile.

  • Il @font-face regola viene utilizzata per descrivere in modo esaustivo un carattere da utilizzare in un documento.

  • Il !important regola indica che una regola definita dall'utente dovrebbe avere la precedenza sui fogli di stile dell'autore.

NOTE - Ci sono altre regole @ che tratteremo nei capitoli successivi.

La regola @import

La regola @import ti consente di importare stili da un altro foglio di stile. Dovrebbe apparire proprio all'inizio del foglio di stile prima di qualsiasi regola e il suo valore è un URL.

Può essere scritto in uno dei due seguenti modi:

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

Il significato della regola @import è che ti permette di sviluppare i tuoi fogli di stile con un approccio modulare. È possibile creare vari fogli di stile e quindi includerli ovunque siano necessari.

La regola @charset

Se stai scrivendo il tuo documento utilizzando un set di caratteri diverso da ASCII o ISO-8859-1 potresti voler impostare la regola @charset nella parte superiore del tuo foglio di stile per indicare in quale set di caratteri è scritto il foglio di stile.

La regola @charset deve essere scritta proprio all'inizio del foglio di stile senza nemmeno uno spazio prima di essa. Il valore è racchiuso tra virgolette e dovrebbe essere uno dei set di caratteri standard. Ad esempio:

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

La regola @ font-face

La regola @ font-face viene utilizzata per descrivere in modo esaustivo un tipo di carattere da utilizzare in un documento. @ font-face può essere utilizzato anche per definire la posizione di un font per il download, sebbene ciò possa incorrere in limiti specifici dell'implementazione.

In generale, @ font-face è estremamente complicato e il suo utilizzo non è consigliato a nessuno tranne a coloro che sono esperti nella metrica dei caratteri.

Ecco un esempio:

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

La regola importante

Cascading Style Sheets a cascata. Significa che gli stili vengono applicati nello stesso ordine in cui vengono letti dal browser. Viene applicato il primo stile, quindi il secondo e così via.

La regola! Important fornisce un modo per creare la tua cascata CSS. Comprende anche le regole che devono essere applicate sempre. Una regola con una proprietà! Important sarà sempre applicata, indipendentemente da dove appare quella regola nel documento CSS.

Ad esempio, nel seguente foglio di stile, il testo del paragrafo sarà nero, anche se la prima proprietà di stile applicata è rossa:

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

Quindi, se vuoi assicurarti che una proprietà venga sempre applicata, dovresti aggiungere la proprietà! Important al tag. Quindi, per rendere il testo del paragrafo sempre rosso, dovresti scriverlo come segue:

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>Tutorialspoint.com</p>
   </body>
</html>

Qui hai creato p {color: # ff0000! Important; } obbligatorio, ora questa regola sarà sempre valida anche se hai definito un'altra regola p {color: # 000000; }

Produrrà il seguente risultato: