La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Esempi sui CSS. Links utili

Presentazioni simili


Presentazione sul tema: "Esempi sui CSS. Links utili"— Transcript della presentazione:

1 Esempi sui CSS

2 Links utili

3 Qualche piccolo consiglio I files scritti in HTML devono avere estensione.html I fogli di stile devono avere estensione.css Per non creare caos mettete i files tutti in una stessa cartella potete creare delle sottocartelle dove inserire le immagini, etc…

4 Ricapitolando…regole di base selettore {proprietà : valore} es. p { background:red } selettore { proprietà1 : valore ; proprietà2 : valore2 } es. p { background:red; font-weigth: bold} selettore1, selettore2 {proprietà : valore} es. h1, h2, h3 {background: red;}

5 Unità di misura per lunghezze Unità relative em: altezza media di un carattere per un dato font px (pixels): unità di misura ideale su monitor Unità assolute cm, mm, in (pollici inglesi, 1in=2.54cm) pt (punti, 1pt=1/72in) I valori percentuali sono relativi ad altri valori

6 Colori Esistono vari modi per definire tale proprietà con una parola-chiave black, blue, navy, red, white, yellow, … con la specifica numerica RGB #rrggbb # rgb rgb(x, y, z), con interi tra 0 e 255 rgb(yr %, yg %, yb %), con numeri tra 0.0 e 100 uno stesso colore può essere rappresentato come "#00cc00 "#0c0 rgb(0,204,0) rgb(0%,80%,0%)

7 URL Sono indicati con url(indirizzo URL) Ad esempio: BODY { background: url(anime. gif) } BODY { background: url(http://www.dima.unige.it/pascarel/sfondo.jpg) }

8 Aggiungere gli stili in linea uso dello stile con span dentro head foglio esterno

9 Eredità, classi eredità classi

10 Sfondo color background-color: #FFFFFF background-image: url(sfondo.gif); background-repeat: repeat-x; background-attachment: fixed background-position: top background selettore {background: color image repeat attachment position;} si possono definire in un colpo solo tutti gli aspetti dello sfondo

11 Esempi colori per lintera pagina ma non solo immagini immagine come sfondo posso deciderne posizione, se ripeterla (in orizzontale, verticale), … tutte le proprietà in una dichiarazione

12 Font font-family: Garamond font-size: 12px font-weight: 900 font-style: italic font-variant: normal font si possono definire in un colpo solo tutti gli aspetti del font esempio

13 Testo E possibile definire linterlinea, lo spazio tra le parole ed i caratteri, impostare particolare decorazioni per il testo, gestire gli spazi bianchi, allineare il testo text-align: left allineamento text-indent: 1cm indentazione letter-spacing: 0.5cm definisce lo spazio tra i caratteri line-height:150% definisce linterlinea text-transform: uppercase esempio

14 Il box model

15 Box model bordi margini padding un box

16 Layout liquido Una pagina web caratterizzata da un layout liquido è una pagina web che occupa sempre tutto lo spazio disponibile della finestra del browser qualunque sia la risoluzione del monitor. Una pagina web di questo tipo si adatta allo spazio disponibile sullo schermo. Ridimensionando la finestra del browser anche la pagina web verrà ridimensionata. Non può mai sapere a priori quale sarà la risoluzione utilizzata dagli utenti del sito web che sta realizzando esempio

17 Liste, tabelle, immagini, link liste tabelle immagini link

18 Qualcosa in più … menù prima pagina


Scaricare ppt "Esempi sui CSS. Links utili"

Presentazioni simili


Annunci Google