Post on 01-May-2015
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 contenutoCon 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.)<H1><FONT face="helvetica" color="blue" size="+4">CAPITOLO 1</FONT></H1>
CSS permette di dare specifiche di formato per tutte le occorrenze di un elemento come H1:<STYLE>H1 {color: blue; background: red}</STYLE>
REGOLE CSS:
elemento html selettore
<STYLE>H1 {color: blue; background: red}</STYLE> attributo valore
ASSEGNAZIONE REGOLE CSS embedding:
<HEAD> <STYLE>H1 {color: blue; background: red} </STYLE></HEAD>
inlining: assegnazione stile ad una occorrenza come attributo HTML (es. DIV, A, P, SPAN)<DIV STYLE="color: blue; background: red"> Testo blu su sfondo rosso</DIV>
Attenzione: non c'e' separazione formato e contenuto
Linking di un file di stile:<HTML><HEAD> <LINK rel="stylesheet" type="text/css" media="print, handheld" href="stile.css"><HEAD> ...
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 <style> 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
<div style="color:blue; font-style:italics">Testo <span style="back: red">rosso</span></div>
(Attenzione a background)Testo rosso
EREDITARIETA': valori relativi a contesto
<div style="font-size: 20pt; font-weight: bold; color: red">Testo <span style="font-size: 80%; font-weight: lighter">piu' piccolo</span></div>
Testo piu' piccolo
Ordinamento elementi: documento forma un albero in base all'inclusione degli elementi:<body><h1>Capitolo <em> Uno</em> </h1><div>Testo del capitolo</div></body>
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}<div class="italico">Testo italico</div>
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}<h1 class="italico">Capitolo italico</h1><h1>Capitolo normale</h1>
Identificatore unico: #nome
#qui {color: red}<div id="qui">Testo identificato</div>
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: xwidth: ampiezzaheight: altezza z-index: profondita'posizion: tipo di riferimento x y clip: area visualizzatavisibility: visualizzazione o meno float: posizionamento immagine slegata da testo
Esempi di posizionamento
<div style="position: absolute; top: 100px; left=10%;z-index: 0">sono qui<div>
<style>.logo {position: absolute; top: 100px; left=10%}</style><div class="logo"><img src="file.gif"></div>
Assoluto e relativo hanno significato rispetto ad un contesto:
<div>inizio contesto<span style="top: 50px; left:50px; position: ...">span assoluto</span>fine contesto</div>
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 OGGETTIJavascript si riferisce alle occorrenze di
elementi tramite gli identificatori unici:<div id="io">testo</div>
In Netscape:document.layers["qui"].color='blue';
in Explorer:document.all.qui.style.color='blue';
ESEMPIO: oggetto che scompare
<div id="timido"><a onMouseOver= "javascript:document.layers['timido'].visibility='hidden';">Non avvicinarti</a><div>
<script language="javascript">function movedown(layername){ document.layers[layername].top+=10;}</script>
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:
<script language="javascript">function setproperty(layername, property, value){ eval(layerRef + '["' + layername + '"]' + styleSwitch + '.' + property + "=" + value);}
function movedown(layername){ eval(layerRef + '["' + layername + '"]' + styleSwitch + '.top+=10');}</script>
I
I