Esempi sui CSS.

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

1 Esempi sui CSS

2 Links utili http://www.w3schools.com/css/css_reference.asp

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 } p { background:red; font-weigth: bold} selettore1, selettore2 {proprietà : valore} 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( } Opzionalmente virgolettati (singole o doppie), spazio prima e dopo l'URL. Parentesi, virgole, spazi, virgolette singole o doppie nell'URL devono essere introdotte dal backslash "\".

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 immagini tutte le proprietà in una dichiarazione
per l’intera 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 l’interlinea, 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 l’interlinea text-transform: uppercase esempio

14 Il box model Una pagina HTML non è altro che un insieme di box rettangolari, che si tratti di elementi blocco (<p>, <h1>,…) o di elementi inline non fa differenza. Tutto l'insieme di regole che gestisce l'aspetto visuale degli elementi blocco viene in genere riferito al cosiddetto box model. Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS.

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

18 Qualcosa in più …  menù prima pagina