1 float gli elementi prima dell'elemento floating non vengono coinvolti gli elementi dopo vengono fatti scivolare in orizzontale, a destra o a sinistra.

Presentazione sul tema: "1 float gli elementi prima dell'elemento floating non vengono coinvolti gli elementi dopo vengono fatti scivolare in orizzontale, a destra o a sinistra."— Transcript della presentazione:

1 1 float gli elementi prima dell'elemento floating non vengono coinvolti 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

2 2 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)

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

4 4 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-close-quote attr(nomeAttributoDelTag) nome dell'attributo inserito nel tag

5 5 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; } Note: su un selettore si può avere una sola proprietà counter-reset o counter- increment content funziona solo con le pseudoclassi :after e :before bisogna "dichiarare" il contatore resettandolo

6 6 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!