La sintassi degli stili (CSS)
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
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:
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 <B>, esse stesse concatenati con un tag <P>) :
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 <B>, esse stesse concatenati con untag <P>):
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 « <i> Attenzione </i> » (il solo fra tag <B>, esse stesse direttamente concatenati in un tag <P>):
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 |
Il documento intitolato « La sintassi degli stili (CSS) » dal sito CCM (it.ccm.net) è reso disponibile sotto i termini della licenza Creative Commons. È possibile copiare, modificare delle copie di questa pagina, nelle condizioni previste dalla licenza, finché questa nota appaia chiaramente.