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
*************************************************
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>
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
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>
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
The Web Design Group CSS Reference
News:comp.infosystems.www.authoring.stylesheets
Ciao
Mario