My smile link to  Mario's Home page

In queste pagine i miei riferimenti per i fogli di stile

Premessa 9-3-2000   vai in cima alla pagina

Con i fogli di stile si possono impostare font, colori, spaziature, ed in genere gli attributi riferiti sia ai singoli tag, o all'intero documento oppure a tutto il sito. Si possono inventare proprie classi ed usarle liberamente. Una funzione comoda dei fogli di stile (CSS Cascading Style Sheets) e di poter definire uno stile scritto in un file esterno al documento, ed appositamente linkato ad ogni pagina, puo' controllare tutti i documenti che vi fanno riferimento.
Un singolo file puo' cosi' controllare l'intero sito definendo il background, i margini, font e colori, spaziature dei caratteri, effetti grafici e di posizionamento ecc.....

Con poco lavoro si puo' avere il controllo su tutto il sito

La prima versione CSS1 risale al 1996, dal 1997 e' stata superata dalla seconda versione CSS2, piu' potente e versatile della prima versione
Il W3 sta lavorando alla terza versione CSS3, il lavoro in progressione oggi e' visibile a questo Url .http://www.w3.org/Style/CSS/current-work

Una grande idea standardizzata dal W3 Consortiun, che potrebbe semplificare il lavoro di costruzione di una pagina, e di tutto un sito.
Invece fino ad ora creano solo confusione e frustrazione, perche' nessun browser li interpreta in modo coerente.

Provate a fare una pagina con l'uso dei CSS, e Netscape la visualizzera' in un modo, IE in un'altro
Anche con le ultima versioni dei browser il risultato e' completamente diverso tra Netscape e IE.

Si dovrebbe creare una pagina per ogni browser per le versioni 3, ed una per le versioni dalla 4 in su sia per Netscape che per IE. 

FOLLIA PURA 

Comunque nell'interpretazione dei CSS e' da preferire IE che si avvicina di piu' allo standard
W3C's Web Style Sheets

 Le cose dovrebbero cambiare entro quest'anno, 
speriamo in bene nelle prossime versioni dei browser e nell'evoluzione del CSS3

*************************************************

Introduzione   vai in cima alla pagina

gli attributi sono inseriti tra parentesi graffe { }
dopo i due punti : c'è il valore dell'attributo
Gli attributi composti da piu' termini sono separati da un trattino -
Gli attributi considerati come proprietà di un oggetto lasciano i trattini che vengono sostrituiti dalle iniziali maiuscole  (  font-color diventa FontColor   font-style  FontStyle ecc...)
gli attributi consecutivi sono separati dal segno ; 
l'attributo type nel tag <style> indica il tipo di CSS
type="text/css"(MIME)  oppure   type="text/jass"  ossia accessibile in javascript
Ad oggi 7-12-99 IE supporta solo il formato text/css, mentre Netscape li supporta tutti e due ma non tutte le caratteristiche di text/css. IE è da preferire per CSS text/css interpreta tutto ed oltre.
se l'attributo type non viene specificato il valore di  default è text/css
le proprietà dei CSS che gestiscono gli eventi si inseriscono con " " ed il valore viene preceduto dal segno di uguale = ed inserito tra ' '
es:
<p onmouseover="this.style.color='red';"
onmouseout="this.style.color='';">con il mouse su divento rosso</p>
non tutti i browser supportano i CSS, per evitare che il codice venga letto come testo e visualizzato nella pagina, è buona norma inserire il tag di commento dopo l'apertura dello stile e prima della chiusura
<style type="text/css">
<!--
H1 {color: blue; font-size: 18pt; background-color:yellow;}
-->
</style>

 

CSS Esterni   vai in cima alla pagina

Il foglio di stile esterno è un normale file di testo con estensione .css
contiene le informazioni necessarie per la formattazzione di tutte le pagine che lo richiamano.
Per formattare una pagina con un css esterno, si deve inserire tra i tag
<head> </head> la seguente riga:
<link rel="stylesheet" href="../html.css" type="text/css">
in questo esempio il file di stile esterno si trova alla directory superiore ed ha il nome html.css (formatta queste pagine)
sotto riporto il suo contenuto:
H1 {color: #0000cc;}
H2 {color: #ff0000;}
pre {color: #ff0080;}

a:hover{color:ff0080; background-color:ffff00;}
.blue {color: blue; font-size: 8pt;}
.big {font-size: 56pt;}
.big2 {font-size: 125%;}

formatta il tag <H1>, <H2> e <pre> con un colore
la riga  a:hover{color:ff0080; background-color:ffff00;} formatta il colore dei link al passaggio del mouse
le righe che iniziano con un punto sono le definizioni di nuove classi di stile

 

CSS della pagina   vai in cima alla pagina

il testo del file html.css riportato nell'esempio precedente, se viene inserito tra i tag
<head> </head> di una pagina, controllerà solo la formattazzione di quella pagina.
<style type="text/css">
<!--
H1 {color: #0000cc;}
H2 {color: #ff0000;}
pre {color: #ff0080;}
a:hover{color:ff0080; background-color:ffff00;}
.blue {color: blue; font-size: 8pt;}

.big {font-size: 56pt;}
.big2 {font-size: 125%;}
-->
</style>

 

CSS applicati nella pagina   vai in cima alla pagina

Per controllare lo stile di una singola parte della pagina si mette il valore dello stile nei tag standard tipo <DIV> <SPAN> <H1> <p> ecc....
<p align="center" STYLE="font-size:18; font-family:arial; color:red; background-color:yellow; " onmouseover=" this.style.color='blue' ;" onmouseout="this.style.color='red';">Questo paragrafo ha colore rosso su sfondo giallo, con il mouse su il colore del testo è blu </p>

Il paragrafo sotto e' interpretato correttamente solo da  IE ed Opera, mentre Netscape mostra solo il testo senza nessun effetto.

Questo paragrafo ha colore rosso su sfondo giallo, con il mouse su il colore del testo è blu

 

 

 

Links utili sui CSS    vai in cima alla pagina

W3C's Web Style Sheets

The Web Design Group CSS Reference

style.webreview.com

Life on the bleeding edge

News:comp.infosystems.www.authoring.stylesheets

Ciao
Mario