Esempi sui CSS

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

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…

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

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

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

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) } 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 "\".

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

Eredità, classi eredità classi

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

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

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

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

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.

Box model bordi margini padding un box

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

Liste, tabelle, immagini, link

Qualcosa in più …  menù prima pagina