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 }

es.p { background:red; font-weigth: bold}

selettore1, selettore2 {proprietà : valore} es.

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

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

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

liste

tabelle

immagini

link

Qualcosa in più …

menù

prima pagina