Dichiarazione di un foglio di stile (CSS)
I fogli di stile sono un sovra-insieme del linguaggio HTML, il che significa che non sono integrati direttamente nelle raccomandazioni HTML del W3C. È quindi necessario completare il codice HTML con degli elementi che indichino il documento, cioè la versione delle raccomandazioni HTML e CSS usate nella pagina, e gli stili propriamente detti.
Dichiarazione del tipo di documento
È necessario indicare nella pagina HTML il prologo del tipo di documento, cioè una referenza della norma HTML usata. Questa dichiarazione con una stringa di tipo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>Contenu de la page</BODY>
</HTML>
Inoltre, un tag META permette di indicare al navigatore o ai motori di ricerca il linguaggio usato per la definizione dei fogli di stile. Questo tag META, da includere nell'intestazione HTML del documento è la seguente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<BODY>Contenu de la page</BODY>
</HTML>
Incorporare gli stili
Gli stili possono essere incorporati all'interno del documento HTML in tre modi diversi:
Stile del documento, dichiarato nell'intestazione, cioè all'interno del tag <HEAD> e </HEAD>;
Stile in linea, cioè come attributo del tag;
Stile esterno, dichiarato in un file a parte la cui estensione è .css;
Stile importato, dichiarato in un file a parte la cui estensione è .css.
Stile del documento
I fogli di stile di una pagina web sono dichiarati grazie alla balise STYLE, all'interno del tag <HEAD> e </HEAD>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
Definizione degli stili;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
L'attributo type="text/css" del tag <STYLE> permette di specificare il tipo di foglio di stile usato. Il tag di commento <!-- ... --> serve ad evitare che i navigatori più recenti, che non supportano i fogli di stile, visualizzino queste informazioni.
Stile in linea
È anche possibile definire lo stile all'interno di una BALISE di un documento. Questo tipo di dichiarazione viene detta dichiarazione in linea. Questo modo di definire i fogli di stile è sconsigliato dato che va contro l'interesse dei fogli di stile, nella misura in cui lo stile è inserito all'interno di ogni elemento. Questo può comunque servire per definire in modo eccezionale uno stile per un elemento HTML particolare, che non richiede una definizione globale.
Per definire uno stile in linea, basta informare l'attributo STYLE del tag HTML alla quale si vuole applicare uno stile particolare:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
< TAG Style="style:valeur;"> ... </TAG>
...
</BODY>
</HTML>
 |
Si può applicare uno stile "in linea" a tutti i tag HTML, tranne a BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE |
Ecco un esempio di stile applicato ad un tag <H1>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Titre </H1>
...
</BODY>
</HTML>
Stile esterno
Il fatto di poter immagazzinare la definizione dei fogli di stile all'esterno del documento è una "possibilità in più" dato che è possibile, modificando il file che contiene i fogli di stile, cambiare l'aspetto di tutte le pagine web che vi si riferiscono. Si tratta in un primo tempo di creare un file di testo che contenga i fogli di stile e la cui estensione è .css, ad esempio style.css:
<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
body {background-image: home.gif;}
LI {font: 13px Verdana;}
B {font: 14px Verdana; font-weight: bold;}
A {
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
H1 {font: 16px Arial;font-weight: bold;color=black;}
H2 {font: 14px Arial;font-weight: bold;color=black;}
-->
In un secondo tempo basta creare in ogni pagina HTML il collegamento verso questa pagina di definizione di stile:
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
...
Il tag <LINK> avverte il navigatore che deve cercare un documento posto all'esterno della pagina HTML;
L'attributo rel="stylesheet" precisa che il documento in questione è un foglio di stile esterno;
L'attributo type="text/css" precisa il tipo di foglio di stile;
L'attributo href=" URL " da l'URL del foglio di stile, cioè la sua posizione su internet.
Stile importato
Le raccomandazioni del W3C offrono un ultimo modo di includere i fogli di stile in un documento: importando dei fogli di stile. È in effetti possibile importare dei fogli di stile esterni a livello della dichiarazione di stile del documento, inserendo il comando @IMPORT immediatamente dopo il tag style:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
@IMPORT URL (URL del foglio da importare);
Definizione degli stili del documento;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
|
Se molte definizioni importate riguardano allo stesso tag, solo l'ultima viene considerata dal navigatore |
Il tag <SPAN> e <DIV>
In uno stesso paragrafo bisogna poter applicare degli stili diversi a dei pezzi di testo, ed è a questo che servono i tag <SPAN> e <DIV>.
Il tag <SPAN>
Il tag <SPAN> serve ad applicare degli stili a dei pezzi di paragrafo. Viene usata anche per ID e CLASS. La sua sintassi è la seguente:
<SPAN class=Nom_de_la_classe> Texte </SPAN>
La balise <DIV>
Invece di applicarsi solo a qualche parola in un paragrafo, la balise DIV si applica ad un blocco, cioè ad uno o più paragrafi. La sintassi del tag DIV è la seguente:
<DIV class=important> paragraphes </DIV>
.
Gli stili in cascata
È possibile definire più stili usando i diversi modi offerti dai CSS. Così, quando più fogli di stile esterni sono richiesti, si ottiene quella che viene chiamata una cascata di stili, cioè una combinazione di stili per diversi elementi HTML. Se più stili riguardano lo stesso elemento, solo l'ultimo sarà conservato:
<LINK rel=stylesheet type="text/css" href="style1.css">
<LINK rel=stylesheet type="text/css" href="style2.css">
<LINK rel=stylesheet type="text/css" href="style3.css">
Nel caso in cui più stili si ripetono nei differenti fogli di stile, le raccomandazioni CSS permettono ugualmente di offrire la scelta fra più fogli di stile alternativi attraverso l'attributo rel del tag STYLE, combinato ad un attributo TITLE che permettono di scegliere nominativamente:
<LINK rel=" alternate stylesheet" type="text/css" href="style1.css" title="style1">
<LINK rel="alternate stylesheet" type="text/css" href="style2.css" title="style2">
<LINK rel=stylesheet type="text/css" href="stylepardefaut.css">
D'altra parte, quando più stili sono indicati in una pagina usando i differenti modi di inclusione possibili, la considerazione degli stili, quando più stili si ripetono, è quella di mantenere lo stile più vicino come contenuto. Così, l'ordine di priorità è il seguente: Stile in linea > Stile del documento > Stile importato > Stile esterno.
Foto: © Pixabay.
Il documento intitolato « Dichiarazione di un foglio di stile (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.