Fogli di stile. Cascading Style Sheets.

Transcript

1 Fogli di stile Cascading Style Sheets

2 CSS - I Fogli di stile migliorano l'aspetto estetico facilitano la creazione e la manutenzione di siti separano aspetto grafico da contenuto tre tipi di fogli di stile in linea (attributo style) incorporati (tag <STYLE>) esterni: <LINK rel="stylesheet" type="text/css" href="file.css"> <style>@import file.css</style> Con IE inserendo come prima riga la dichiarazione <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

3 CSS - I Fogli di stile - (in linea) I fogli si stile permettono, dato un elemento, di impostare varie caratteristiche con questa sintassi: nomecaratteristica: valore; <p style="font-size:50px; text-transform: capitalize; text-indent: 12px;">abc</p> es: Si ha accesso a molte proprietà non controllabili con l' html L'utilizzo estensivo di fogli di stile in linea non migliorà la manutenibilità del sito e la lettura del codice.

4 CSS - I Fogli di stile - (classi) E' possibile definire un insieme di proprietà da applicare a diversi oggetti (es: colore di sfondo, font, spaziatura, ecc.). Questo insieme si chiama classe e si definisce in questo modo Il tag style conviene <STYLE>.nomeClasse { caratteristica: valore; caratteristica: valore; caratteristica: valore; } </STYLE> utilizzarlo nella testata (<head>) del documento attenzione al puntino prima del nome della classe. Ogni elemento può avere l'attributo class: <p class="nomeclasse"> (senza puntino)

5 Fogli di stile applicati (classe di marcatori) E' possibile definire le proprietà di un generico marcatore, senza dover modificare il contenuto del body. Ad esempio posso individuare caratteristiche generali per body,i paragrafi, le celle, i link, ecc.. <STYLE> H1 { text-align: center; font-family: fantasy; font-size: 44px; font-weight: medium; font-style: italic; color: #FFFF00; background: #0000FF;}

6 Fogli di stile applicati (singola istanza) E possibile definire lo stile di un preciso pggetto specificando il suo ID preceduto da un cancelletto <STYLE> #titolo { text-align: center; font-family: fantasy; font-size: 44px; font-weight: medium; font-style: italic; color: #FFFF00; background: #0000FF;} </STYLE>

7 Fogli di stile incorporati ed esterni Il tag <style>...</style> può contenere qualsiasi dichiarazioni di oggetti e di nuove classi, che saranno applicate al documento corrente. In questo caso di parla di foglio di stile incorporato, in quanto lo stesso documento html contiene tutte le informazioni sullo stile. Nel caso in cui si voglia applicare uno stesso stile ad un intero sito, è bene utilizzare un foglio di stile esterno. In questo caso, eventuali modifiche saranno fatte su un unico file e saranno applicate a tutto il sito. Per richiamare un foglio di stile esterno (estensione consigliata. css) utilizzare nell'<head> il tag <LINK rel="stylesheet" type="text/css" href="file.css">) Il foglio di stile esterno NON deve contenere il tag style.

8

9

10 pseudoelemento :nth-child permette di identificare, nel caso di più elementi fratelli, uno o più elementi in particolare. Gli elementi si contano da 1 div:nth-child(3) indica il 3 div div:nth-child(2n) o div:nth-child(even) seleziona elem pari div:nth-child(2n+1) o div:nth-child(odd) seleziona el. dispari div:nth-child(3n+2) identifica il 2, il 5, l 8,l 11, il 14, ecc. div:nth-child(n+3) indica dal 3 in poi div:nth-child(-n+3) indica il 1, il 2 e il 3 ma attenzione: se scriviamo nth-child(3-n) non funziona!! div:nth-child(-n+4):nth-child(n+2) seleziona il 2, il 3, il 4!!

11 altri pseudoelementi Elem:empty seleziona gli elementi che non hanno nulla all interno es: <p></p> Elem:first-child, Elem:last-child primo e ultimo elemento Elem:nth-last-child(n) funziona come nth-child solo che parte dall ultimo.. Elem:only-child identifica i figli unici

12 nth-of-type p:nth-child(2n) seleziona tutti i paragrafi che si trovano ad essere figli pari (indipendentemente che gli altri fratelli siano paragrafi) p:nth-of-type(2n) seleziona il secondo, il quarto, il sesto,.. paragrafo, indipendentemente dalla natura degli altri fratelli

13 Utilizzo del > per limitare la gerarchia body div:nth-child(3) { color: red;} colorerà sia la scritta Terzo che la lettera c body > div:nth-child(3) { color: red;} colorerà solo la scritta terzo body div div:nth-child(3) { color: red;} colorerà solo la lettera c

14 Utilizzo del + e del ~ adiacente/succ. seleziona tutti i paragrafi che sono adiacenti ad un paragrafo div.tipi-misti div~p { background-color: red; } selezionerà tutti i p in pratica l operatore + identifica l elemento fratello immediatamente prossimo la tilde indica tutti i fratelli che vengono dopo

15

16

17 Selezione tramite attributo [ ] è possibile specificare quale stile applicare a un tag in base alla presenza di un suo attributo o per un determinato valore dell'attr. non funziona con ie6 (e versioni inferiori); ie7 con <!doctype> /* esiste attr */ [attributo] { } /* corrisp. esatta */ [attributo=valore ] { } /* (spazio) valore spazio*/ [attributo~=valore ] { } /* inizia per valore- o = valore*/ [attributo =valore ] { } /* valore contenuto */ [attributo*=valore ] { } /* comincia con valore* */ [attributo^=valore ] { } /* finisce con *valore */ [attributo$=valore ] { }

18 position È possibile definire le dimensioni del rettangolo d ingombro in vari modi top left right bottom Le specifiche width e height hanno la precedenza su bottom e right Notare che left, top, bottom, right sono sempre relative al primo progenitore (i primi progenitori sono html e body!)

19 Position: static Predefinito: segue il flusso di posizionamento della pagina Se applicato ad un elemento blocco, include un ritorno a capo L elemento statico non può essere mosso della sua posizione e ignora le dichiarazioni top, bottom, left e right.

20 Position: relative Introduce uno spostamento relativo al punto di inserimento (static) Si possono inserire anche valori negativi Il posizionamento relative di un blocco non altera gli altri elementi della pagina In pratica si intende relativo al punto in cui dovrebbe apparire se fosse statico!!

21 Position: absolute Permette di posizionare un blocco in un determinato punto Non altera il resto della pagina In pratica è come se l elemento cosi posizionato non facesse più parte della pagina Il punto di riferimento è rispetto al primo progenitore

22 Position: fixed Fa riferimento alla finestra del browser L effetto è che l elemento non scrolla con il resto della pagina Può essere utilizzato per barre di menù, finestre di chat, ecc. Con IExplore è gestito dalla ver.7 in poi e solo inserendo come prima riga <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

23 rotazioni 2d transform: rotate(ndeg) transform-origin permette di selezionare un punto attorno al quale ruotare, interno o esterno all elemento. Di default è % 50% 50% o center center cioè esattamente al cento transform-origin: x-asse y-asse sempre rispetto al left/top è possibile ruotare attorno ad un punto esterno con vecchi browser necessari prefissi: -moz- -o- -webkit- -ms rotazione in senso orario anche con valori negativi unità di misura: 0-360deg, 0-400grad, rad, 0-1turn funziona anche per oggetti statici

24 Box Model margin margin-top margin-right margin-bottom margin-left margine esterno trasparente; ogg. centrato con margin-left=margin-right; può avere valori negativi; border border-style border-width border-color padding contenuto distanza tra il boro e il contenuto non puo avere valori negativi height width height e width si riferiscono al contenuto. La lunghezza totale è data da margin-left + border-left-width + padding-left-width +width + padding-right-width + margin-right-width

25 overflow, overflow-x: overflow-y visible hidden auto scroll

26 proprietà scrollleft, scrollwidth, scrolltop, scrollheight da javascript si può leggere e modificare scrollleft e scrolltop scrollleft e scrolltop indicano la lunghezza e l'altezza della parte non visibile (a sinistra e in alto) scrollleft e scrolltop possono essere modificate da js scrollheight e scrollwidth forniscono altezza e larghezza effettiva del blocco (sola lettura) offsetleft, offsettop sono proprietà in sola lettura che indicano la posizione dell'oggetto rispetto a offsetparent per modificare la posizione (position!= static) oggetto.style.left =...; oggetto.style.top =...

27 text-decoration none underline (sottolineato) overline (soprallineato) line-through (sbarrato) blink (non funziona su IE, chrome, safari) inherit (non funziona su IE) letter-spacing, word-spacing: normal length

28 text-transform capitalize uppercase lowercase none inherit text-align: left right center justify text-indent: length; vertical-align:baseline bottom middle top

29 font-style font-weight font-variant font-style: normal italic oblique (oblique è molto simile a italic, meno supportato) font-weight: normal bold bolder lighter font-variant: normal small-caps (MAIUSCOLETTO) line-height: normal number length %

30 font-family Serif Sans-serif Monospace cursive fantasy nome del font alternativa alternativa

31 A proposito di { font-family: Santiago; src: url(" } Firefox non permette di scaricare font da altri domini, poiché è considerata una tecnica di cross-site scripting. Internet Explorer non supporta i file TrueType o OpenType ma richiede un apposito formato: l'embedded OpenType (estensione EOT)

32 a proposito di font css3

33 Bordi: style,color,width

34 outline è un bordo. all esterno del bordo! #box { border: double 15px #808080; outline: dotted 10px green; }

35 white-space normal va a capo quando non ci sta più nowrap non va mai a capo, finchè non c è <br> pre vengono mantenuti spazi e tab e CR pre-line vengono mantenuti solo CR (rit. a capo) pre-wrap come pre ma rispettando il margine del contenitore inherit eredita dal contenitore

36 z-index Di default è 0 Sono ammessi numeri interi 3 2 positivi Rimane sopra 1 quello con il 0 valore z-index più alto A parità di indice, l elemento definito per ultimo viene inserito sopra

37 misure % percentuale in inch (pollice = 2,54 cm ) cm centimetri mm pollici em 1em=attuale font-size (1em=12pt,2em=24pt) ex altezza della x dell attuale font pt punti (1/72 pollice) pc pica (12pt) px pixel

38 colori name aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow rgb(r,g, b ) r= red (0-255) g=green (0-255) b=blue (0-255) rgb(r%,g%,b%) r =red (0-100) g=green (0-100) b=blue (0-100) #rrggbb rr,gg,bb = hex 00-FF

39 background -color: colorname rgb(r,g,b) trasparent -image: url(url) none inherit -repeat: repeat repeat-x repeat-y no-repeat inherit -attachment: scroll fixed inherit -position: top left center center bottom right x% y% xpos ypos inherit Nota: usando position combinata con width ed height si può utilizzare un qualsiasi "ritaglio" di un'immagine

40 Pseudoclassi e Pseudoelementi si definiscono con :pseudoclasse possono riferirsi a classi, tag o singoli elementi ci sono pseudoclassi dinamiche, pseudoclassi per i link, per la lingua, ecc. Pseudoclassi dinamiche :hover stile applicato quando il mouse passa sopra l'elemento (onmouseover/onmousemove) :active stile applicato quando un elemento è attivato (onclick, onmousedown) :focus stile applicato quando un elemento è pronto a ricevere un input da tastiera (onfocus,onkypress,onkeydown)

41 Pseudoclassi per link e lingua Pseudoclassi collegamenti ipertestuali :link stile applicato ai link non ancora visitati :visited stile applicato ai link già visitati Pseudoclasse lang(..) :lang(yy) stile applicato agli elementi che hanno attributo lang="yy"

42 pseudoclasse first-child :first-child stile da applicare ad un elemento solo quando è il primo nodo figlio di un altro elemento. Es: td:first-child indica tutte le prime celle a sinistra (la prima cella di ogni riga) p:first-child tutti i primi paragrafi (il primo paragrafo di ogni div) cfr. Diapositiva 10: pseudoelemento :nth-child

43 pseudoelementi first-line e first-letter :first-line stile da applicare alla prima riga di un determinato elemento (può variare in base alle impostazioni del browser) :first-letter stile da applicare alla prima lettera (capolettera) P.poesia:first-line {color: orange;} P.poesia:first-letter { font-size: 3em; font-style: italic; font-weight: bold; text-transform: uppercase; color: red; float: left; }

44 pseudoelementi :before :after utilizzo della proprietà content per generare del testo "aggiuntivo" prima e dopo il normale contenuto esempi div.note:before {content: 'Nota: '; font-style:italic; font-weight:bold;} p.citazione:before {content: open-quote} p.citazione:after {content: close-quote}

45 content utilizzabile solo con :after e :before none normal non appare nulla "stringa" 'stringa' per concatenare pou stringe utilizzare lo spazio url('indirizzoimg') per caricare un'immagine fornendo l'indirizzo counter(nomecontatore) stampa il valore del contatore (counter-reset, counter-increment) open-quote close-quote apre / chiude le virgolette (vedi proprietà quote) no-open-quote no-closequote attr(nomeattributodeltag) nome dell'attributo inserito nel tag

46 contatori counter-reset: nomecontatore valore counter-increment: nomecontatore valore content: counter(nomecontatore) body {counter-reset: capitolo;} h1 {counter-reset: sezione} h1:before {content: 'cap.' counter(capitolo); counter-increment: capitolo;} h2:before { content 'cap ' counter(capitolo) '. sez.' counter(sezione)'; counter-increment: sezione; }

47

48 quotes none "caropen1" "carclose1" "caropen2" "carclose2"... " ' virgolettedoppie " apice ' angolino sinistro angolino destro doppio angolino sinistro «doppio angolino destro» apice sin-destra alto apice des-sinistra alto doppio apice sin-destra alto doppio apice des-sinistra alto doppio apice des-sinistra basso Si possono specificare coppie di caratteri per diversi livelli di virgolette "dal medico... -Dottore dottore... perdo capelli-, -Fuori che ho appena spazzato- " non funziona correttamente su tutti i browser!

49 display none L'elemento non viene visualizzato; la pagina appare come se l'elemento non ci fosse block c'è un ritorno a capo prima e dopo (default per div, p, h1,..h6, form,q,li) inline non c'è interruzione, l'elemento viene visualizzato di seguito (a, span, b,i) Es; span.inverti {display: block;} div.inverti {display:inline;}

50 altri valori per display inline-block table

51 visibility la propietà visibility ha 2 valori: visible hidden un elemento hidden non è visibile, ma "mantiene" il posto sulla pagina (a differenza di display: none) a a b b c c c elemento b visibility: hidden elemento a display: none;

52 float gli elementi prima dell'elemento floating non vengono coinvolti (a meno che non siano inline su IE e Chrome) gli elementi dopo vengono fatti scivolare in orizzontale, a destra o a sinistra left i prossimi elementi saranno disposti a destra (l'elemento a cui è applicato float: left rimane a sinistra) right i prossimi elementi saranno disposti a sinistra (l'elemento a cui è applicato float: left rimane a destra) none i prossimi elem. saranno posizionati sotto

53 float e clear Per "fermare" lo spostamento degli oggetti verso destra o sinistra si utilizza la proprietà clear: left right both none Nota: float: none; //si riferisce al prossimo elemento clear: none; //si riferisce all'elem. corrente (float e clear hanno senso con elementi disposti a blocchi)

54 opacità - trasparenza è possibile creare dei pannelli trasparenti o rendere le immagini più sfumate la sintassi cambia a seconda del browser, ad esempio i browser di derivazione microsoft avranno alpha(opacity=x) con valori da 0=completamente trasparente a 100=opaco altri browser hanno opacity con valori da 0=trasparente a 1=opaco filter:alpha(opacity=60); /* per IE */ opacity:0.6; /* standard w3c css3 */

55 cursor indica la forma che dovrà prendere il cursore quando è sopra l'elemento url per caricare un file.cur o.ani default la freccia auto è il browser che determina il tipo di puntatore crosshair la croce (un più, tipo cad, per selezionare un punto esatto) move la 4 frecce per indicare un oggetto da spostare pointer, hand la manina (per i link) e-resize, w-resize doppia freccia destra-sinistra n-resize, s-resize doppia freccia verticale ne-resize doppia freccia da nord verso est nw-resize doppia freccia da nord verso ovest text una spece di I wait clessidra help punto interrogativo

56 Le immagini e clip:rect() esistono 2 modi per ritagliare una immagine: background-position: offx offy ; width: width; height: height; clip:rect(ytop, xright, ybottom, xleft); width: widthimg; height: heightimg; per ottenere lo stesso ritaglio: offy, offx+width, offy+height, offx notare che clip è simile a visibility, cioè le parti esterne al ritaglio non sono visibili, ma occupano spazio!

57 Internet Explorer: scrollbars attualmente non sono supportate dal w3c Funziona con ie textarea { scrollbar-3dlight-color: gray; scrollbar-arrow-color: black; scrollbar-base-color: red; scrollbar-darkshadow-color: orange; scrollbar-face-color: blue; scrollbar-highlight-color:brown; scrollbar-shadow-color: yellow; scrollbar-track-color: green; }

58 max-width, min-width, max-height, min-height è possibile selezionare altezza e larghezza massima e minima di solito si utilizza insieme a misure in percentuale di lunghezza e altezza #csinistra, #cdestra { min-width: 100px; max-width: 200px; width: 9%; }

59 list-style list-style-type: none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha list-style-position: list-style-image: outside inside none url(url)

60 internet explorer: behaviours è una caratteristica supportata solo da ie serve per gestire eventi. Utilizza file.htc con gli altri borwser (e anche con ie) si usa javascript è una tecnologia obsoleta (ie5) #cambiascritta {behaviour: url(funzioni.htc);} <p id="cambiascritta">clicca qui!</p> file funzioni.htc <attach for="element" event="onclick" handler="cambia" /> <script type="text/javascript"> function cambia() { element.innertext = 'cambia scritta'} </script>