CSS: Cascading Style Sheets Specifiche del formato del documento tramite un linguaggio Come modelli.dot di Word o file di stile.sty per latex Separazione del formato dal contenuto Con Javascript e DOM forma DHTML

Formato specificato da autore, lettore o user agent Serve anche a definire il formato di nuovi elementi in XML perche' lo user agent (es., un browser) li possa visualizzare Differenza con html: necessita' tag iniziale e finale per delimitare box dove agisce lo stile

In HTML si puo' specificare il formato delle singole istanze di elementi del documento ma non di un tipo di elemento (es., H1, EM, etc.) CAPITOLO 1 CSS permette di dare specifiche di formato per tutte le occorrenze di un elemento come H1: H1 {color: blue; background: red}

REGOLE CSS: elemento html selettore H1 {color: blue; background: red} attributo valore

ASSEGNAZIONE REGOLE CSS embedding: H1 {color: blue; background: red} inlining: assegnazione stile ad una occorrenza come attributo HTML (es. DIV, A, P, SPAN) Testo blu su sfondo rosso Attenzione: non c'e' separazione formato e contenuto

Linking di un file di stile:... Stesso documento apparira' in formati diversi a seconda del foglio di stile collegato Utenti con esigenze diverse e mezzi diversi di visualizzazione Formato aziendale per un sito IE utilizza dentro tag

CASCADING: regole possono essere in conflitto: e' necessario un ordinamento Prima regole definite da autore poi da lettore e user agent a parita' di sorgente, vale ordinamento nel documento Sovrascrivo regola con !important (IE): h1 {color: red ! important}

EREDITARIETA': se un elemento non specifica una certa proprieta' del formato, questa viene ereditata dagli elementi sovrastanti Testo rosso (Attenzione a background) Testo rosso

EREDITARIETA': valori relativi a contesto Testo piu' piccolo Testo piu' piccolo

Ordinamento elementi: documento forma un albero in base all'inclusione degli elementi: Capitolo Uno Testo del capitolo body h1 div em

Descrittori elemento HTML: H1 {color: blue} classe: si specifica le proprieta' di una classe a cui possono appartenere le occorrenze dei diversi elementi:.italico {font-style: italic} Testo italico

Combinazione di descrittori: elementi annidati: LI LI {font-size: smaller} H1 DIV {font-size: smaller} (Attenzione! L1, H1 {color: blue} e' un grouping) classi limitate ad elementi: h1.italico {font-style: italic} Capitolo italico Capitolo normale

Identificatore unico: #nome #qui {color: red} Testo identificato Permette di riferirsi ad una istanza tramite Javascript: crea un oggetto nel DOM Attenzione: se non e' unico si genera errore: "oggetto non esistente"

Pseudoclassi: p:first-letter {fontsize: 150%} a:link {color: red} a:visited {color: blue}

Posizionamento elementi HTML HTML visualizza elementi uno di seguito all'altro in base a occorrenza nel documento DHTML permette di posizionare un elemento dove si vuole nel documento Posizionamento assoluto e relativo Primi e secondi piani Possibilita' di cambiare posizione agli oggetti

Proprieta' di posizionamento: top: y left: x width: ampiezza height: altezza z-index: profondita' posizion: tipo di riferimento x y clip: area visualizzata visibility: visualizzazione o meno float: posizionamento immagine slegata da testo

Esempi di posizionamento sono qui.logo {position: absolute; top: 100px; left=10%}

Assoluto e relativo hanno significato rispetto ad un contesto: inizio contesto span assoluto fine contesto inizio contesto fine contesto span assoluto inizio contesto fine contesto span relativo

Javascript e Cascading Style Sheets Controllo proprieta' di stile per mezzo di javscript Creazione di effetti di movimento, apparizione, visualizzazione parziale, scrittura testo Leggere differenze fra Netscape 4.0x e Internet Explorer 4

ESTENSIONE MODELLO OGGETTI Javascript si riferisce alle occorrenze di elementi tramite gli identificatori unici: testo In Netscape: document.layers["qui"].color='blue'; in Explorer: document.all.qui.style.color='blue';

ESEMPIO: oggetto che scompare Non avvicinarti function movedown(layername){ document.layers[layername].top+=10;} N.B.: codice per Netscape 4

CODICE COMPATIBILE CON N e IE: var layerRef="", styleSwitch=""; function init(){ if (navigator.appName == "Netscape") { var layerRef="document.layers"; var styleSwitch=""; }else{ var layerRef="document.all"; var styleSwitch=".style";}} eval(layerRef + '["' + layername + '"]' + styleSwitch + '.' + property + "=" + value); document.layers document.all.style argomenti funzione

ESEMPIO: function setproperty(layername, property, value){ eval(layerRef + '["' + layername + '"]' + styleSwitch + '.' + property + "=" + value);} function movedown(layername){ eval(layerRef + '["' + layername + '"]' + styleSwitch + '.top+=10');}

I

I