| PrecedenteSintassi degli stili | Dichiarazione di un foglio di stile (CSS) | SeguenteClassi e ID |
I fogli di stile sono un sovra-insieme del linguaggio HTML, il che significa che non sono integrati direttamente nelle raccomandazioni HTML del W3C. E' 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.
E' necessario indicare nella pagina HTML il prologo del tipo di documento, cioè una referenza della norma HTML utsata. 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, una tag META permette di indicare al navigatore o ai motori di ricerca il linguaggio usato per la definizione dei fogli di stile. Questa 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>
Gli stili possono essere incorporati all'interno del documento HTML in tre modi diversi :
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.
E' 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 STYLEdel 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>
 |
E' possibile applicare uno stile "in linea" a tutti i tag HTML, tranne alle seguenti"en ligne"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>
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> ...
Le raccomandazioni del W3C offrono un ultimo modo di includere i fogli di stile in un documento: importando dei fogli di stile. E' 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 |
In uno stesso paragrafo bisogna poter applicare degli stili diversi a dei pezzi di testo, ed è a questo che servono i tag <SPAN> et <DIV>
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>
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>
E' 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
Ultime modificazione ilvenerdì 6 febbraio 2009 alle 16:51:57.
Come aggiungere la barra dei preferiti di safari a firefox Come convertire immagini di testo in immagini jpg Come fare per recuperare la password di acer erecovery Come fare un disco di backup totale di un pc Diagramma di gantt Disco di ripristino per win xp sp3 Dominio di un sito Foglio di calcolo excel Formattare vista con dischi di ripristino Gestione di un progetto software Ho dimenticato la password di bios Problemi di salvataggio con word 2007 Programma per fare un video di foto per vista Punto di accesso senza fili dove si trova Quale scheda di rete Televisore tubo catodico tempi di risposta Trovare ip di un sito con linux Win xp come togliere il file di paging