Fogli di stile a cascata

I fogli di stile vanno scritti in appositi files che terminano con .css e attaccati al documento col seguente comando tra <HEAD> e </HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="pippo.css">
In alternativa potete inserirli nel documento (sempre nell'intestazione) racchiudendoli tra i comandi:
<STYLE TYPE="text/css">

e

</STYLE>
O addirittura le specifiche di stile possono comparire all'interno del comando HTML come una opzione STYLE=.Ad esempio:
<pre STYLE="background:#00f2f2">

Il formato generale di un foglio di stile e' una sequenza di regole dove ogni regola e' indicata nel formato:

 selettore {
       proprieta' 1 : valore1;
       proprieta' 2 : valore2;
       ...
       proprieta' n : valore n;
       }
     

L'aggancio tra gli oggetti definiti nel documento e gli "stili" avviene attraverso il selettore. Se il selettore e' indicato come .pippo allora le proprieta' sono definite per una classe generica di oggetti pippo indicata nell'HTML con l'opzione CLASS=pippo.Se e' indicato con #pluto ,le proprieta' si riferiscono all'oggetto definito con l'opzione ID=pluto. Infine il selettore puo' essere uguale a un comando html intendendo che esso si riferisce a tutti gli oggetti creati da quel tipo di comando.

Ad esempio:
#blocco{position: relative; visibility: show; left: .02in; top: .02in;} 
definisce le proprieta' dell'oggetto blocco di cui questo testo fa parte ed io posso usare questo link per muovere il testo in un senso e questo altro link per farlo tornare indietro.

Invece questo pezzo di codice:

.rossi {
font-weight:      bold;
font-size:        14px;
color:            #ff0000; 
position:         relative; 
left:             10;
top:              1;
visibility:       visible;
}
definisce le proprieta' della classe degli oggetti rossi.

Infine il fatto che tutti i segmenti di codice tra <pre> e </pre> in questo documento siano colorati e' ottenuto con la specifica:

pre { background:#ffcc99 }
E' possibile combinare i diversi tipi di selettori creando dei selettori come:
#nav a img {width: 100px; height: 100px;}
Cioe' le specifiche si riferiscono al tag "img" all'interno della tag "a" all'interno di un "div" di classe "nav". Oppure:
.sourcetip {background: #88b; color: white; padding: 7px; border: 2px dotted white; line-height: 1.4em; }
.sourcetip code {color: #ebebff; font-size: 1em; } 
Le specifiche si riferiscono alle tag all'interno di un "div" con "id=sourcetip".

Un altro tipo di selettori introdotti per facilitare alcuni effetti speciali, sono i pseudo-selettori: ad esempio

#rollover a:hover {text-decoration: none; color: #FF0000}
permette di cambiare l'aspetto dei link all'interno di un "div" di classe "rollover" quando il mouse passa sul link (:hover). Al posto di "hover" potete mettere anche link , active e visited.

Un esempio tipico di uso di CSS in relazione al DHTML e' quello di definire 2 o piu' classi o "stili" diversi per lo stesso oggetto:ad esempio testo di color rosso o di colore blu'.A questo punto un'istruzione Javascript permette di passare da uno stile all'altro quando, ad esempio, il mouse passa su quel testo.Cosi' l'evento MouseOver puo' provocare il cambiamento di colore di un testo.

I fogli di stile sono per lo piu' usati col comando HTML DIV che e' stato inventato proprio a questo scopo. DIV invece di creare un oggetto ben preciso come un'immagine, crea un oggetto generico contenitore degli oggetti tra <DIV e </DIV . Ad esempio una testata composta da titolo,immagine e data. Il foglio di stile indica come questi elementi del documento devono comparire. In questo modo tutti i documenti avranno uno stesso stile per la testata.Il blocco di testo che si muove visto prima e' definito in questo modo.

Per recuperare il file .css da un qualsiasi documento della rete dovete prima di tutto ricavare l'URL dal sorgente. A questo punto potreste cercare il file nella cache (istruzione about:cache in Netscape),una volta trovato, cliccate sul nome del file e vi verra' fuori l'URL con altre informazioni. Ora cliccate sul link col tasto destro del mouse e selezionate dal menu' save link as cambiando il nome in pippo.txt . Dopo il salvataggio potete guardare il contenuto col browser aprendolo come un file locale.


Lista di proprieta' definibili nei CSS e comuni ai due browsers da un tutorial di Hotwired
INDIETRO a Seminario su HTML dinamico
Maintained by Giuseppe Zito: Giuseppe.Zito@cern.ch.Last revised :