I Cascading Style Sheets (CSS) sono il fondamento dell'HTML Dinamico sia in Netscape Navigator 4.0 sia and Internet Explorer 4.0. I CSS offrono un metodo per creare un set di "stili" che definiscono come gli elementi della vostra pagina debbano essere mostrati. Il Cascading Style Sheets Positioning (CSS-P) è un'estensione ai CSS che mette in grado gli sviluppatori di controllare pixel per pixel la posizione di qualsiasi oggetto sullo schermo. Poiché ci sono già documentazioni e tutorial sufficientemente esaustivi sull'argomento non perderò tempo in un inutile lavoro di duplicazione, piuttosto cercherò di lavorarci sopra.
I link qui sotto portano a due tutorial-documento che spiegano la sintassi dei CSS e del CSS-P:
Questi siti danno una completa documentazione sui CSS e su come metterli in atto. Per quanto mi riguarda, io mi limiterò a dare giusto una spolveratina alle parti dei CSS che useremo in questo corso.
Usare le Tag di Tipo DIV:
Quando si usa il CSS-Positioning, i suoi attributi vengono normalmente riferiti alle tag [letteralmente etichette] DIV (divisione) - una tag di tipo DIV è vuota e non strutturante e si abbina meglio ai CSS. Quando si mette testo-HTML in una tag di tipo DIV esso viene usualmente indicato come "DIV block", "DIV element", "CSS-layer", o come io preferisco "layer" e basta. Quando leggiamo qualcosa sull'HTML Dinamico nei siti web o nei newsgroup, se ci si imbatte in questi termini sappiamo che si sta parlando di una parte HTML dentro ad una tag "DIV" posizionata.
La tag vuota DIV non è differente dalle altre e viene annotata allo stesso modo:
<DIV> Questa è una tag di tipo DIV </DIV>La tag DIV dà gli stessi risultati della tag <P></P>
Ma inserendo il CSS nelle DIV tag noi possiamo definire dove sullo schermo la parte HTML verrà posizionata, dove disegnerà aree o linee, o come mostrare il testo che in essa è contenuto. Una ID renderà più semplice riferirsi a quella particolare tag:
<DIV ID="camion"> Questo è un camion </DIV>
Il nome che viene utilizzato per la DIV è indifferente. Qualsiasi sequenza alfanumerica di caratteri - a patto che inizi con una lettera -; andrà bene.
A questo applichiamo il CSS in due modi:
CSS interno:
E' il più usato. Ed è il modo con cui inizierò a mostrarvi come scrivere un programma DHTML e JavaScript.
<DIV ID="truck" STYLE="lo stile viene inserito qui">
Questo è un camion
</DIV>
La tag STYLE esterna:
Il metodo esterno funziona nello stesso modo, benché ci siano alcuni problemi nello scrivere i CSS, così vi suggerisco di attendere sino alla lezione Layers annidati prima di affrontarlo direttamente. Per il momento date un'occhiata per vedere come si fa...
<STYLE TYPE="text/css"> <!-- #camion {lo stile viene inserito qui} --> </STYLE> <DIV ID="camion"> Questo è un camion </DIV>
Notate come la ID venga usata nella tag STYLE per assegnare gli stili CSS.
Proprietà Cross-Browser dei CSS:
Poiché l'obbiettivo di questo sito è produrre DHTML che lavori sia in Netscape sia in Internet Explorer, dobbiamo limitarci alle proprietà di stile comuni ai due browser. Generalmente, le seguenti proprietà sono quelle standard come viene definito dal W3C.
Importante:
Quando utilizzate i layer per le animazioni dovreste sempre definire
l'ampiezza. Questo perché in difetto del dato IE utilizza l'intera
ampiezza dello schermo. Se muovete il layer fuori dal limite dello schermo
apparirà una scrollbar fastidiosa che oltretutto ha l'effetto di
rallentare l'animazione.
position: absolute; left: 50px; top: 100px; width: 200px; height: 100px; clip: rect(0px 200px 100px 0px); visiblity: visible; z-index: 1; background-color:#FF0000; layer-background-color:#FF0000; background-image:URL(filename.gif); layer-background-image:URL(filename.gif);
Avete un po' di flessibilità nell'assegnare le proprietà dei CSS. Non dovete definirli tutti. Lo spazio bianco viene ignorato in modo tale che possiate o scriverli sulla stessa linea o incolonnarli, si possono anche usare i tabulatori etc. Allo stesso modo l'unità, per default, è il pixel, quindi non sarà necessario aggiungere "px" alle misure, sebbene raccomando di farlo sempre.
position:absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); background-color:#FF0000; layer-background-color:#FF0000;Lo STYLE Interno:
<DIV ID="nomediv" STYLE="position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;">
</DIV>
Lo STYLE Esterno:
<STYLE TYPE="text/css">
<!--
#nomediv {position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;}
-->
</STYLE>
<DIV ID="nomediv">
</DIV>
Un esempio vale mille parole:
Home | Prossima Lezione: Il Cross-Browser JavaScript |