CSS

1. CSS Proprietà dei CSS

2. Famiglie di proprietà • Testo • Background • Font • Liste • Contenitori (box model) • Dimensioni • Posizioni Alice Pavarani

3. Testo • colorcolore del testo • direction: ltr(left-to-right) | rtl(right-to-left) • text-indent: lenght|% indenta la prima riga • text-align: left|right|center|justify • text-decoration: underline|overline|linetrough |blinkdecora il testo • text-shadow ombreggiatura • letter-spacing spaziatura tra le lettere • word-spacing spaziatura tra le parole • text-transform: capitalize|uppercase|lowercase trasforma il testo Alice Pavarani

4. Background • background-colorcolore di sfondo • background-imageimmagine di sfondo • background-repeat: repeat|repeat-x|repeat-y |no-repeat ripetizione dell’immagine di sfondo • background-position: top left|top center|…|center right|…|bottom left|… posizione di partenza di un’immagine di sfondo • background-attachment: scroll|fixed immagine di sfondo fissa o che scorre insieme al testo • background tutte le proprietà del background Alice Pavarani

5. Font • font-style: normal|italic|oblique • font-variant: normal|small-caps (normale|maiuscoletto) • font-size:xx-small|x-small|small|medium|large |x-large|xx-large|smaller|larger|% dimensione • font-weight: normal|bold|bolder|lighter|100…900 spessore o peso (grassetto) • font-family: serif|sans-serif|fantasy |monospace|… nomi di famiglie di font e/o nomi di famiglie generiche • font tutte le proprietà del font Alice Pavarani

6. Liste • list-style-image: immagine da usare come marcatore • list-style-type: decimal|lower-roman|lower-latin|upper-roman|… marcatori da utilizzare • list-style-position: outside|insidemarcatore esterno/interno all’elemento • list-styletutte le proprietà delle liste Alice Pavarani

7. Contenitori (box model) CSS assume che ogni elemento generi uno o più box rettangolari (box model): Alice Pavarani

8. Contenitori (box model) • Marginla regione che separa un contenitore dall’altro (“margine esterno”), trasparente • Sono ammessi anche valori negativi per sovrapporre i contenitori • Borderil bordo del contenitore • Paddingla regione tra il bordo del contenitore ed il contenuto (“margine interno”), ha il colore dello sfondo dell’elemento • Non sono ammessi valori negativi • Contentla regione in cui si trova il contenuto dell’elemento • Margin,bordere paddingnelle 4 direzioni possono essere cambiati sia contemporaneamente (margin:top,right,bottom,left; border:…; padding:…) che in modo indipendente usando proprietà separate (margin-left|margin-bottom|…|border-right|…|padding-top|…) Alice Pavarani

9. Bordi (border) • border-style: none|hidden|dotted|dashed|solid|double|groove |ridge|inset|outset • border-widthampiezza dei bordi • border-colorcolori dei bordi • Tutte le proprietà relative ai bordi possono essere indicate separatamente per le 4 direzioni (es. border-bottom-color, border-left-style,… ) Alice Pavarani

10. Dimensioni • width: auto|lenght|% larghezza • height: auto|lenght|%altezza • max-width|min-widthlarghezza massima e minima • max-height|min-height altezza massima e minima Unità di misura Relative: • pxrelativa rispetto alla risoluzione del dispositivo (pixel) • % relativa rispetto alle dimensioni dell’elemento genitore • emrelativa rispetto alla dimensione del font attuale (per font) Assolute: • pt misura in punti tipografici = 1/72 pollice (per font) • cm,mm,in (pollici 1in = 2.54 cm) Alice Pavarani

11. Posizioni • float: left|rightcambia la disposizione dell’elemento rispetto al flusso normale, si posiziona verso il bordo dell’elemento contenitore (a sinistra o a destra) • clear: left|right|both opposto a floatindica quale lato di un elemento deve restare libero, cioè non permette l’affiancamento da parte di elementi con la proprietàfloatsettata Quindi… • Gli elementi per i quali è definita la proprietà floatvengono disposti a sinistra o a destra rispetto al flusso normale (contro il bordo dell’elemento contenitore o di altri elementi) • Il resto del contenuto si dispone al loro fianco nello spazio rimasto (scorrendogli intorno) • È possibile interrompere il flusso nello spazio rimasto, se l’elemento che andrebbe ad occupare lo spazio ha definita la proprietà clear Alice Pavarani