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.

Presentazione sul tema: "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."— Transcript della presentazione:

1 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

2 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

3 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}

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

5 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

6 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 (@media) Formato aziendale per un sito IE utilizza anche @import dentro tag

7 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}

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

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

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

11 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

12 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

13 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"

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

15 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

16 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

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

18 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

19 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

20 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';

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

22 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

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

24 I

25 I