La sintassi degli stili (CSS)

Ultimo aggiornamento lunedì 13 novembre 2017 à 14:59 da Claudia Scarciolla.

La definizione di uno stile avviene secondo delle regole in testo semplice che permettono di descrivere l'aspetto degli elementi della pagina.

Definizione di uno stile CSS
I selezionatori di tag
Selezionatore multiplo
Selezionatore universale
Selezionatore di elementi concatenati
Le proprietà di stile
I commenti

Definizione di uno stile CSS

Una regola CSS è caratterizzata da due elementi principali:

Un selezionatore di tag, che permette di precisare a quale tag del documento si deve applicare lo stile; una dichiarazione di stile, definita accoppiamento, che permette di precisare lo stile da applicare al tag selezionato. La dichiarazione è essa stessa costituita:

Da una o più proprietà, seguita dal carattere «:» (due punti); da uno o più valori associati ad ogni proprietà, messi fra virgolette. Si si tratta di più parole o separate da virgole se ve ne sono diversi, seguiti da un punto e virgola.La sintassi è quindi la seguente:

$Syntaxe d\'une regle CSS$

La sintassi seguente definisce ad esempio lo stile da applicare ai collegamenti ipertestuali (tag <A>), cioè un carattere Verdana di dimensione 18 pixel, in grassetto e di colore giallo:

A  {
       font-family: Verdana;
       font-size: 18px;
       font-style: bold;
       color: yellow
       }

I selezionatori di tag

Si dicono «selezionatore di balise» (o «selezionatore di elementi») la o le parole chiave che precedono all' abbraccio e servono ad indicare la o i tag del documento alle quali si applica lo stile tra gli accoppiamenti. Per definire lo stile di un tag HTML specifica, basta mettere il nome deltag (senza i caratteri < e >. Ad esempio:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <STYLE type="text/css">
  <!--
tag {proprietà}
  -->
  </STYLE>
 </HEAD>
<BODY>
<balise> ... </balise>
...
</BODY>
</HTML>

Selezionatore multiplo

È anche possibile applicare lo stile a più tag separandone il nome con una virgola (,). La sintassi di un simile selezionatore, detto selezionatore multiplo, è la seguente:

selezionatore-di-balise1, selezionatore-di-balise2  { /* style */  }

Selezionatore universale

Grazie al selezionatore universale («*») è possibile definire uno stile che si applica a tutti gli elementi HTML. La sintassi del selezionatore universale è la seguente:

*  { /* style */  }

Il selezionatore universale è poco implementato nei navigatori

Selezionatore di elementi concatenati

È possibile selezionare un tag in un contesto dato, cioè in funzione degli elementi che la circondano, grazie ai selezionatori Selezionatori contestuali. Esistono differenti tipi di selezionatori contestuali: il Selezionatore di elementi concatenati permette di creare una regole che si applica solo quando un elemento Y è concatenato ad un elemento X. La sua sintassi è la seguente:

selezionatore_X selezionatore_Y { /* style; */ }

Sia dato il seguente codice HTML:

<p> <i> Attenzione </i>, questo è un <b> avvertimento </b> </p>
<b> Si prega di tenerne conto </b>

La regola seguente seleziona solo la parola « avvertimento » (la sola circondata da tag , esse stesse concatenati con un tag ) :

P B { font-weight: bold; color: red; }

Il selezionatore di elementi consecutivi permette di creare una regola che si applica solo quando un elemento Y segue immediatamente un elemento X. La sua sintassi è la seguente:

selezionatore_X +selezionatore_Y { /* style; */ }

Sia dato il seguente codice HTML:

<p> <i> Attenzione </i>, questo è un <b> avvertimento </b> </p>
<b> Si prega di tenerne conto </b>

La regola seguente seleziona solo la parola «avvertimento» (la sola circondata da tag , esse stesse concatenati con untag ):

I + B { font-weight: bold; color: red; }

Il selezionatore di elementi padre-figlio permette di creare una regola che si applica solo quando un elemento Y è prodotto diretto di un elemento X. La regola non si applica se Y è incapsula in una o più tag intermedie. La sua sintassi è la seguente:

selezionatore_X > selezionatore_Y { /* style; */ }

Sia dato il seguente codice HTML:

<p> <i> Attenzione </i>, questo è un <b> avvertimento </b> </p>
<b> Si prega di tenerne conto </b>

La regola seguente seleziona solo l'elemento «  Attenzione  » (il solo fra tag , esse stesse direttamente concatenati in un tag ):

P > B { font-weight: bold; color: red; }

Le proprietà di stile

I commenti

È possibile (e consigliato) di documentare i propri fogli di stile incorporandovi dei commenti che danno delle informazioni addizionali (ragioni della scelta di questo o quello stile, tipo di documento al quale si applica, contesto, ecc.). I commenti CSS sono delimitati dalle sigle /* e */:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <STYLE type="text/css">
  <!--
/* Questo è un commento*/
tagA {proprietà}
tagB {proprietà}
tagC {proprietà}
  -->
  </STYLE>
 </HEAD>
<BODY>
...
</BODY>
</HTML>

È possibile applicare uno stile « in linea » a tutte i tag HTML, ad eccezione dei tag seguenti:BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE