Sei sulla pagina 1di 45

Dott.Ing.

Ivan Ferrazzi

CSS
Introduzione
ai
Cascading Style Sheet

Dott. Ing. Ivan Ferrazzi


V1.5 del 14/10/2013

1/45

Dott.Ing.Ivan Ferrazzi

Copyright 2013 Dott.Ing. Ivan Ferrazzi


Permission is granted to copy, distribute and/or modify this
document under the terms of the GNU Free Documentation
License, Version 1.2 or any later version published by the
Free Software Foundation; with no Invariant Sections, no
Front-Cover Texts, and no Back-Cover Texts.
2/45

Dott.Ing.Ivan Ferrazzi

Indice generale
INTRODUZIONE....................................................................................................5
I METODI DEL CSS...............................................................................................6
CSS in linea .....................................................................................................6
CSS a stile incorporato nella pagina................................................................7
CSS in un foglio esterno...................................................................................7
LE CLASSI............................................................................................................9
LAVORARE CON GLI ID.......................................................................................10
GLI STILI.............................................................................................................11
I parametri di stile per il testo.......................................................................11
I parametri di stile per i caratteri...................................................................13
I parametri di stile per i colori........................................................................14
I parametri di stile per definire le dimensioni................................................15
I parametri di stile per definire le posizioni....................................................15
I parametri di stile per la visibilit.................................................................17
I parametri di stile per lo sfondo....................................................................18
I parametri di stile per gli elementi contenitori..............................................19
I parametri di stile per le liste........................................................................21
I parametri di stile per le tabelle....................................................................22
RAGGRUPPAMENTO E NIDIFICAZIONE...............................................................24
Raggruppamento di stili.................................................................................24
Elementi nidificati..........................................................................................24
Nidificazione padre/figlio...............................................................................25
Stile per elemento a seguire..........................................................................25
Stile per tutti gli elementi a seguire..............................................................26
PSEUDO-CLASSI ED ELEMENTI...........................................................................27
Pseudo-classi per il tag a...............................................................................27
Pseudo-classe per il primo figlio....................................................................28
Pseudo-classe per elementi con il focus........................................................28
Pseudo-elementi su testi in elementi a blocco...............................................28
Pseudo-elementi per l'aggiunta di contenuto................................................29
MEDIA QUERIES.................................................................................................30
Come integrare le media queries..................................................................30
Tipi di dispositivi............................................................................................31
Caratteristiche di dispositivi..........................................................................31
CSS3..................................................................................................................34
Stili per i contenitori ed i loro contenuti.........................................................34
Importazione di font aggiuntivi......................................................................38
Stili per la trasformazione degli elementi......................................................39
Effetti di transizione.......................................................................................40
Effetti di animazione......................................................................................42
LE VARIE UNITA'.................................................................................................44
Le unit di misura per le dimensioni..............................................................44
I valori assoluti...............................................................................................44
I valori relativi................................................................................................45
I valori assoluti...............................................................................................45
I valori di posizionamento .............................................................................45
3/45

Dott.Ing.Ivan Ferrazzi

4/45

Dott.Ing.Ivan Ferrazzi

INTRODUZIONE
I CSS nascono con lo scopo di facilitare la gestione della formattazione di
pagine web, infatti questi possono definire ad esempio il colore di sfondo, il
tipo e colore dei caratteri, l'impaginazione dei documenti ecc.ecc.
Questa gestione della formattazione ci semplifica notevolmente il lavoro di
manutenzione o di modifica di un sito, basti pensare a un sito web composto da
centinaia di pagine, le quali fanno riferimento ad uno stile, la modifica di
questo produrrebbe un cambiamento dello stile di tutte le pagine.
I CSS si possono utilizzare in tre modi:

in linea, cio inseriti direttamente nel tag HTML,


a stile incorporato, cio inseriti ad inizio pagina nel HEAD,
In un foglio di stile esterno, cio un file con estensione .css che contiene
tutti gli stili ai quali fa riferimento la pagina web.

Gli stili devono rispettare delle regole di sintassi, gli attributi vanno racchiusi
tra parentesi graffe {...}, per simbolo di uguaglianza si utilizzano i due punti
(:) e pi attributi si separano con il punto e virgola (;).
Per esempio:
P{textalign:justify;color:red;fontsize:32pt;}

5/45

Dott.Ing.Ivan Ferrazzi

I METODI DEL CSS


Vediamo ora i tre modi con i quali possiamo utilizzare le direttive CSS.

CSS in linea
La modalit in linea si adotta per assegnare uno stile ad una parte di
codice, senza che questo vada a influire sul resto della pagina.
Lo stile viene inserito direttamente nel tag HTML, utilizzando l'attributo
STYLE. Esempio:
<span style=color: red; font-size: 12pt;>ciao</span>

Questo stile non sar esteso a tutti i SPAN ma si limiter a modificare lo


stile del colore e la grandezza del carattere di tutto ci che compreso
solo tra l'apertura e la chiusura di questo SPAN.
Per quanto riguarda la sintassi gli stili devono essere racchiusi tra
virgolette o apici e separati da punto e virgola, preceduti dall'attributo
STYLE=.
L'attributo STYLE pu essere associato a quasi tutti i tag HTML, ma
sopratutto vengono utilizzati quei tag che fanno da contenitori, cio se
usati da soli non producono alcun effetto, ma utilizzati in combinazione
con gli stili modificano tutto ci che contengono. Questi contenitori
sono <div> e <span>.
DIV produce un ritorno a capo con la sua chiusura, mentre SPAN no e si
pu utilizzare anche all'interno di un DIV. Esempio:
<div style=color:red;>

6/45

Dott.Ing.Ivan Ferrazzi
ciao mi chiamo <span style=font-size:45pt;>mirko</span>
</div>

CSS a stile incorporato nella pagina


Lo stile incorporato un modo per definire uno stile che dovr assumere
un tag, il quale sar adottato da tutta quella tipologia di tag presenti nella
pagina. Questo fa si che non bisogna definire ogni volta all'interno di un
tag lo stile, ma lo si pu definire una volta sola all'interno di HEAD.
Questo metodo non impedisce di utilizzare lo stile in linea, che ha
prevalenza su quello incorporato.
La sintassi per lo stile incorporato, prevede che lo stile sia inserito nel
HEAD e che che sia compreso dall'apertura e chiusura del tag STYLE con
dichiarazione dell'attributo TYPE es:
<head>
<style type=text/css>
span {
color: red;
font-size: 12pt;
font-family: Arial,Verdana;
}
</style>
</head>

Cos facendo si stabilisce lo stile che dovranno adottare tutti i SPANdella


pagina. Se si avesse bisogno di commentare uno stile, questo deve
essere racchiuso tra /* e */. Esempio:
<style type=text/css >
span {
color: red; /* colore rosso*/
font-size: 54pt; /* grandezza carattere */
}
</style>

CSS in un foglio esterno


Gli stili oltre alla modalit in linea e alla modalit integrata ad inizio
pagina, possono essere inseriti tramite un foglio esterno, separato dalla
pagina, la quale ne fa solo un richiamo.
Questo non preclude l'utilizzo della modalit in linea o di quella integrata
ad inizio pagina, che avrebbero priorit sul foglio esterno.
Il foglio esterno non altro che un file di testo dove andremo a scrivere
semplicemente tutti gli stili che vogliamo, ma dovr essere salvato con
estensione .css.
Dal punto di vista sintattico, basta scrivere le dichiarazioni di stile come
quelle integrate ad inizio pagina, ad esempio:
7/45

Dott.Ing.Ivan Ferrazzi

span {
color: Red;
font-size: 67pt;
}
p {
color: Yellow;
font-family:Arial, MS Sans Serif;
}

Un parametro dello stile composto da pi parole, come potrebbe essere


un tipo di scrittura, bisogna racchiuderlo tra virgolette (vedi esempio
precedente).
Ora basta salvare il file con estensione .css per far si che si possa
richiamare dalla pagina.
Il richiamo avviene mediante il comando:
<link rel=stylesheet type=text/css href=nome_file.css>

compreso tra <head></head>


oppure con @import

url(nome_file.css);
type=text/css></style>

compreso tra i tag <style

I CSS a stile incorporato oppure quelli esterni possono assegnare uno stile
anche a determinati elementi di un tag. Possiamo ad esempio attivarlo uno
stile per il tag <input> ma solo per gli elementi di tipo text come segue:
input[type=text] {background-color:blue}

8/45

Dott.Ing.Ivan Ferrazzi

LE CLASSI
Un modo molto pratico ed utilizzato per definire gli stili sono le classi, un
sistema mediante il quale si creano degli stili, battezzandoli con un nome, il
quale verr richiamato dal tag.
possibile cos creare quanti stili vogliamo, attribuendogli nomi diversi
richiamandoli ogni volta ce ne sia di bisogno.
Per definire una classe basta digitare un nome preceduto da un punto (.) al
posto del nome del tag nella dichiarazione di stile. Esempio:
.mio_stile{
color: red;
font-size: 56pt;
font-style: italic;
}

La scelta del nome non ha importanza, ma sarebbe meglio sceglierlo attinente


allo stile, cos che quando lo si utilizzer verr ricordato pi facilmente.
Ora basta solo richiamare la classe dal tag HTML
<span class=mio_stile [altro_stile]>....</span>

Nel richiamo allo stile non si inserisce il punto davanti al nome. Le classi sono
supportate da tutti i tag HTML. Si possono utilizzare anche pi stili combinati
inserendo i nomi divisi da spazi vuoti.

9/45

Dott.Ing.Ivan Ferrazzi

LAVORARE CON GLI ID


I CSS ci danno la possibilit di utilizzare gli ID, cio degli identificatori
attribuibili a qualsiasi tag, ma usati pi che altro con i contenitori come il DIV.
Lo scopo degli identificatori quello di posizionare gli oggetti in una pagina
web.
Il funzionamento semplice, in quanto sono molto simili ai class, basta definire
un ID nello STYLE interno o esterno che sia, dargli un nome preceduto dal
cancelletto (#). Esempio:
#nome {
position: absolute;
top: 40px;
left: 32px;
z-index: 1;
}

10/45

Dott.Ing.Ivan Ferrazzi

GLI STILI
I parametri di stile per il testo
text-align: left|right|center|justify;

Questo stile permette di modificare l'allineamento del testo.


left
right
center
justify

allineamento a sinistra
allineamento a destra
centrato
giustificato

Esempi:
P
P
DIV
DIV

{text-align:
{text-align:
{text-align:
{text-align:

left;}
right;}
center;}
justify;}

text-decoration: overline|underline|line-through|blink|none;

Questo stile permette di modificare la decorazione del testo.


overline
underline
line-through
blink
none

sopralineato
sottolineato
sbarrato
lampeggiante
senza

Esempi:
11/45

Dott.Ing.Ivan Ferrazzi
H1
P
DIV
P
P
P

{text-decoration:
{text-decoration:
{text-decoration:
{text-decoration:
{text-decoration:
{text-decoration:

overline;}
underline;}
overline underline;}
line-through;}
blink;}
none;}

font-style: normal|italic|oblique;

Questo stile permette di modificare la propriet stile del testo.


normal
italic
oblique

stile di default
stile corsivo
sitle obliquo

text-indent: {rientro di pixel} | {rientro in percentuale};

Questo stile permette di modificare l'indentazione del testo.


Esempi:
P
DIV

{text-indent: 12px;}
{text-indent: 20%;}

text-transform: capitalize|uppercase|lowercase;

Questa direttiva di stile permette di effettuare delle trasformazioni del


testo.
capitalize
uppercase
lowercase

trasforma in maiuscola la prima lettera di ogni parola


trasforma tutto in maiuscolo
trasforma tutto in minuscolo

Esempi:
P
P
P

{text-transform: capitalize;}
{text-transform: uppercase;}
{text-transform: lowercase;}

line-height: normal|{numero}|{percentuale};

Questo parametro di stile permette di definire lo spazio di interlinea,


quindi lo spazio tra le singole righe.
normal
{numero}
{percentuale}

interlinea normale
interlinea espressa in em
interlinea espressi in percentuale

Esempi:
P
DIV

{line-height: 3em;}
{line-height: 50%;}

12/45

Dott.Ing.Ivan Ferrazzi
letter-spacing: numero;

Questo parametro di stile permette di definire lo spazio tra le lettere


espresso dal valore di numero.
Esempi:
P
DIV

{letter-spacing: 1em;}
{letter-spacing: 2px;}

direction: rtl|ltr;

Con questo attributo possiamo definire la direzione del testo.


il testo va da destra verso sinistra
il testo va da sinistra verso destra

rtl

ltr
Esempi:
DIV

{direction: rtl}

I parametri di stile per i caratteri


font-family: tipo_carattere1,tipo_carattere2,...;

Questo parametro di stile permette di definire il tipo di carattere da


utilizzare per il testo desiderato. I vari font devono essere separati da
virgola. Specificando pi font si ha la possibilit di definire un font
alternativo in caso in cui il primo non sia presente sulla macchina del
visitatore.
Esempi:
P
{font-family: verdana, arial, sans-serif;}
DIV {font-family: "MS Sans Serif", verdana, sans-serif;}

font-size: valore;

Questo attributo permette di definire la dimensione del testo espresso in


punti (pt), pixel (px), in percentuale oppure usando la propriet del testo
come ad esempio larger.
Esempi:
P
I
B
H1

{font-size:
{font-size:
{font-size:
{font-size:

9pt;}
larger;}
18px;}
150%;}

font-style: normal|italic|oblique;

Questo attributo permette di definire lo stile da utilizzare per il blocco


desiderato.
Esempi:
H1

{font-style: normal;}

13/45

Dott.Ing.Ivan Ferrazzi
P
B

{font-style: italic;}
{font-style: oblique;}

font-variant: normal|small-caps;

Questo parametro permette di definire delle varianti allo stile da


apportare al testo desiderato.
Esempi:
P
B

{font-variant: small-caps;}
{font-variant: normal;}

font-weight: bold|normal|{valore};

Con questo attributo possiamo definire lo spessore da utilizzare per la


visualizzazione del testo.
bold
normal
valore

grassetto
spessore normale
valore numerico compreso tra 100 (normale) a 700
(grassetto)

Esempi:
P
H1

{font-weight: bold;}
{font-weight: 700;}

I parametri di stile per i colori


color: valore;

Questo parametro permette di definire il colore da utilizzare espresso in


valore esadecimale, come colore in lingua inglese, oppure con l'utilizzo di
rgb(r,g,b).
Esempi:
P
DIV
H1

{color: red;}
{color: #990099;}
{color: rgb(255,0,0);}

background-color: valore;

Questo parametro permette di definire il colore di sfondo espresso in


valore esadecimale, come colore in lingua inglese, oppure con l'utilizzo di
rgb(r,g,b).
Esempi:
P
DIV
H1

{background-color: yellow}
{background-color: #33ccff}
{background-color: rgb(255,255,0)}

14/45

Dott.Ing.Ivan Ferrazzi

I parametri di stile per definire le dimensioni


width: {valore in pixel}|{valore percentuale}|auto

Questo parametro permette di definire la larghezza del contenitore.


Esempio:
#css {position: absolute; width: 300px; left: 100px; top: 50px;}

height: {valore in pixel}|{valore percentuale}|auto

Questo parametro permette di definire l'altezza del contenitore.


Esempio:
#css {position: absolute; height: 400px; ... }

I parametri di stile per definire le posizioni


position: absolute|fixed|relative|static

Questo parametro permette di definire la posizione del contenitore di


appartenenza.
absolute

fixed

relative

static

definisce una posizione assoluta; come riferimento


viene preso il primo contenitore padre con
posizionamento non statico; se non ne trova usa come
riferimento l'elemento body
stacca l'elemento dalla struttura statica e utilizza come
riferimento di posizionamento la finestra del browser
all'interno della quale viene inserito; l'elemento rimane
fisso anche se la pagina viene scrollata
stacca l'elemento dalla struttura statica, ma utilizza
come riferimento il proprio posizionamento all'interno
della stessa struttura
si ottiene un posizionamento naturale anche se le
coordinate sono uguali per oggetti diversi questi non si
sovrappongono

Esempio:
#css {position: absolute;; left: 100px; top: 50px;}

top: {valore in pixel}|{valore percentuale}|auto

Questo parametro permette di definire il margine superiore.


Esempio:
#css {position: absolute; top: 50px; left: 100px;}

15/45

Dott.Ing.Ivan Ferrazzi

left: {valore in pixel}|{valore percentuale}|auto

Questo parametro permette di definire il margine sinistro.


Esempio:
#css {position: absolute; top: 50px; left: 100px;}

display: block|inline|none

Questo parametro permette di definire lo spazio utilizzato per l'oggetto in


questione.
block

inline
none

l'oggetto viene inserito utilizzando un'interruzione


prima e dopo l'oggetto stesso; inserimento avviene in
modalit verticale
l'oggetto
viene
inserito
in
sequenza,
quindi
orizzontalmente
l'oggetto viene reso invisibile e tolto dall'attuale
struttura visualizzata (a differenza del hidden con
visibility dove lo spazio occupato rimane visibile)

Esempio:
#css {display: none; ... }

z-index: valore

Questo parametro permette di definire la profondit dell'oggetto. In


alcuni casi non funzione se non viene definita anche la propriet top. Se
non dovesse servire va comunque settata con valore 0px.
Esempio:
#css {position: absolute; z-index: 10; top: 0px; height: 400px; ... }

float: left|right|none;

Questo parametro permette di definire il flusso degli elementi inserito


all'interno del componente stesso.
left

right

tutti gli elementi con questa propriet vengono messi in


pila, uno dopo l'altro da sinistra verso destra (fino a
quando non viene utilizzata la propriet clear)
tutti gli elementi con questa propriet vengono messi in
pila, uno dopo l'altro da destra verso sinistra (fino a
quando non viene utilizzata la propriet clear)

clear: left|right|both;

Questo parametro permette di annullare la propriet di flusso e di iniziare


su una nuova riga.
16/45

Dott.Ing.Ivan Ferrazzi

I parametri di stile per la visibilit


Per ogni elemento inserito all'interno della nostra struttura possibile
definire il comportamento di visibilit necessario. Possiamo decidere di
mostrare o meno un contenuto o addirittura definirne il grado di
trasparenza.
overflow: visible|hidden|scroll|auto

Questo parametro permette di definire il comportamento di


visualizzazione del contenuto di un contenitore (come ad esempio un div
).
visible

hidden
scroll
auto

nel caso in cui il contenuto fosse pi ampio della


dimensione
del
contenitore
questo
verrebbe
visualizzato al di fuori del contenitore stesso
nel caso in cui il contenuto fosse pi ampio della
dimensione del contenitore questo verrebbe nascosto
in questo caso vengono aggiunte le scrollbars per
visualizzare l'intero contenuto
le scrollbars vengono aggiunto solamente nel caso in
cui verrebbe sforato lo spazio messo a dispozione

Esempio:
#css {width: 200px; height: 200px; overflow: auto; ... }

visibility: hidden|visible

Questo parametro permette di definire la visibilit dell'oggetto.


hidden
visible

l'elemento viene nascosto, ma rimane


utilizzato dall'elemento quando visibile
l'elemento viene visualizzato

lo

Esempio:
#css {position: absolute; visibility: hidden; height: 400px; ... }

opacity: {0.0-1.0};(Firefox)
filter: alpha(opacity={1-100});(IE)

Questo parametro permette di definire l'opacit dell'oggetto.


Esempio:
#css {opacity:0.4; filter: alpha(opacity=40);}

17/45

spazio

Dott.Ing.Ivan Ferrazzi

I parametri di stile per lo sfondo


Vediamo ora i parametri di stile che possiamo utilizzare per modificare le
propriet dello sfondo. Vediamo come poter inserire un'immagine nello
sfondo e come andare a modificare le propriet di posizionamento
all'interno di esso.
background-image: url('[percorso/]file_immagine');

Questo parametro permette di definire l'immagine da utilizzare come


immagine di sfondo.
Esempi:
P
DIV

{background-image: url('percorso/immagine.gif');}
{background-image: url('logo.gif');}

background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit;

Questo parametro permette di definire le propriet di ripetizione


dell'immagine da utilizzare come sfondo. Un'immagine inserita come
sfondo
viene
normalmente
ripetuta
sia
orizzontalmente
che
verticalmente.
repeat
repeat-x
repeat-y
no-repeat
inherit

ripetizione sia orizzontale che verticale


ripetizione orizzontale
ripetizione verticale
senza ripetizione
eredita le propriet dall'impostazione del padre

Esempi:
DIV

{background-image: url('logo.gif');
background-repeat: repeat-x}

DIV

{background-image: url('logo.gif');
background-repeat: no-repeat}

background-attachment: scroll|fixed|inherit;

Questo parametro permette di definire le propriet dell'immagine da


utilizzare come sfondo.
scroll
fixed
inherit

per far scorrere lo sfondo insieme al testo


per fissare lo sfondo e far scorrere solo il testo
eredita la propriet dall'impostazione del padre

Esempi:
{background-image: url('logo.gif'); background-attachment: scroll;}
{background-image: url('logo.gif'); background-attachment: fixed;}

18/45

Dott.Ing.Ivan Ferrazzi
background-position: {vpos hpos|x% y%|xpos ypos|inherit};

Questo parametro permette di definire il punto di partenza dell'immagine


da inserire come sfondo. Come posizione possiamo inserire top left, top
center, top right, center left, center center, center right, bottom left,
bottom center, bottom right, x%, y%, xpos, ypos, oppure inherit
vpos
hpos
x% y%
xpos ypos
inherit

pu essere top, center, oppure bottom


pu essere left, center, oppure right
sono le coordinate x e y in percentuale
sono le coordinate x e y
eredita la propriet dall'impostazione del padre

Esempi:
DIV

{background-image: url('logo.gif');
background-repeat: no-repeat;
background-position: right top}

I parametri di stile per gli elementi contenitori


Intorno ai vari contenuti HTML sono presenti degli spazi ben definiti che
permettono di modificare le propriet di layout dell'elemento stesso.
L'elemento base l'area all'interno della quale viene mostrato il contenuto
dell'elemento. Intorno a questa troviamo il bordo ( border), mentre tra questi due
si trova un'area che ci permette di staccare il contenuto dal bordo ( padding).
Intorno al bordo troviamo un'ulteriore area ( outline) che possiamo formattare
cos come formattiamo lo stile del bordo. L'ultimo spazio utilizzabile il
margine (margin) che ci permette di staccare l'elemento visualizzato dagli altri
elementi presenti all'interno della pagina.
Come propriet per il bordo troviamo: border-style, border-width e border-color.
border-style: valore [valore [valore valore]];

Questo parametro permette di definire lo stile del bordo utilizzato.


none
dotted
dashed
solid
double
groove
ridge
inset
outset

non viene utilizzato bordo


bordo punteggiato
bordo tratteggiato
bordo solido
bordo doppio
bordo 3D incavo
bordo 3D concavo
bordo 3D abbassato
bordo 3D inalzato

border-width: valore;

Questo parametro permette di definire lo spessore del bordo.


19/45

Dott.Ing.Ivan Ferrazzi

border-color: valore;

Questo parametro permette di definire il colore del bordo, per i valori


vedere color.
Come propriet per l'area intorno al bordo troviamo: outline-style, outlinewidth e outline-color.
outline-style: valore [valore [valore valore]];

Questo parametro permette di definire lo stile dell'area intorno al bordo


utilizzato.
none
dotted
dashed
solid
double
groove
ridge
inset
outset

non viene utilizzato bordo


bordo punteggiato
bordo tratteggiato
bordo solido
bordo doppio
bordo 3D incavo
bordo 3D concavo
bordo 3D abbassato
bordo 3D inalzato

outline-width: valore;

Questo parametro permette di definire lo spessore dell'area intorno al


bordo.
outline-color: valore;

Questo parametro permette di definire il colore dell'area intorno al bordo,


per i valori vedere color.
Come propriet per il margine possiamo usare: margin, margin-top, margin-left,
margin-righte margin-bottom.
margin: valore [valore [valore valore]];

Questo parametro permette di definire il margine di un componente


definendo ogni margine, il margine alto-basso e sinistro-destro, oppure i
quattro valori separati. Il valore viene assegnato come valore fisso o
percentuale.
margin-top: valore;

Questo parametro permette di definire il margine superiore di un


componente. Il valore viene assegnato come valore fisso o percentuale.
margin-left: valore;

20/45

Dott.Ing.Ivan Ferrazzi

Questo parametro permette di definire il margine sinistro di un


componente. Il valore viene assegnato come valore fisso o percentuale.
margin-right: valore;

Questo parametro permette di definire il margine destro di un


componente. Il valore viene assegnato come valore fisso o percentuale.
margin-bottom: valore;

Questo parametro permette di definire il margine inferiore di un


componente. Il valore viene assegnato come valore fisso o percentuale.
Come propriet per lo spazio tra il contenuto ed il bordo usiamo: padding,
padding-top, padding-left, padding-righte padding-bottom.
padding: valore [valore [valore valore]];

Questo parametro permette di definire lo spazio definendo ogni spazio, lo


spazio alto-basso e sinistro-destro, oppure i quattro valori separati. Il
valore viene assegnato come valore fisso o percentuale.
padding-top: valore;

Questo parametro permette di definire lo spazio superiore di un


componente. Il valore viene assegnato come valore fisso o percentuale.
padding-left: valore;

Questo parametro permette di definire lo spazio sinistro di un


componente. Il valore viene assegnato come valore fisso o percentuale.
padding-right: valore;

Questo parametro permette di definire lo spazio destro di un


componente. Il valore viene assegnato come valore fisso o percentuale.
padding-bottom: valore;

Questo parametro permette di definire lo spazio inferiore di un


componente. Il valore viene assegnato come valore fisso o percentuale.

I parametri di stile per le liste


Le liste vengono principalmente suddivise in due gruppi: gli elenchi puntati e
gli elenchi numerati.
Per gli elenchi puntati possiamo avere i seguenti stili:
list-style-type: valori;

Questo stile permette di definire il tipo di puntatore da utilizzare. Per


questo parametro possiamo utilizzare i seguenti valori:
none

non utilizza puntatore


21/45

Dott.Ing.Ivan Ferrazzi
disc
circle
square

valore di default; visualizza un punto


visualizza un cerchio vuoto
visualizza un quadrato

list-style-position: inside|outside;

Questo stile permette di definire la posizione della lista.


list-style-image: url('[percorso/]file_immagine');

Questo parametro permette di definire l'immagine da utilizzare come


puntatore.
Esempi:
UL
UL

{list-style-image: url('percorso/immagine.gif');}
{list-style-image: url('logo.gif');}

Per gli elenchi numerati possiamo avere i seguenti stili:


list-style-type: valori;

Questo stile permette di definire il tipo di puntatore da utilizzare. Per


questo parametro possiamo utilizzare i seguenti valori:
none
armenian
decimal
decimal-leading-zero
georgian
lower-alpha
lower-greek
lower-latin
lower-roman
upper-alpha
upper-latin
upper-roman

non utilizza puntatore


visualizza la numerazione
visualizza la numerazione
visualizza la numerazione
visualizza la numerazione
visualizza la numerazione
visualizza la numerazione
visualizza la numerazione
visualizza la numerazione
visualizza la numerazione
visualizza la numerazione
visualizza la numerazione

Armenian
con numero
con 0 e numero
Georgian
a, b, c, ecc.
alpha, beta, ecc.
Latin
i, ii, iii, ecc.
A, B, C, ecc.
A, B, C, ecc.
I, II, III, ecc.

list-style-position: inside|outside;

Questo stile permette di definire la posizione della lista.

I parametri di stile per le tabelle


border-collapse: collapse|separate;

Questo stile permette di definire la disposizione delle celle all'interno


della tabella:
collapse

le celle vengono unite l'una all'altra


22/45

Dott.Ing.Ivan Ferrazzi
separate

le celle vengono separate

border-spacing: value [value];

Questo stile permette di definire lo spazio tra le celle. Con l'assegnazione


di un valore assegnamo sia lo spazio orizzontale che verticale. Con due
valori definiamo quello orizzontale con il primo valore, quello verticale
con il secondo.
caption-side: top|bottom;

Questo parametro permette di posizionare l'etichetta della tabella al di


sopra o al di sotto della tabella stessa.
empty-cells: show|hide;

Questo parametro permette di definire se mostrare o meno il bordo di


celle vuote.
table-layout: auto|fixed;

Questo parametro permette di definire il tipo di layout con il quale creare


la tabella.

23/45

Dott.Ing.Ivan Ferrazzi

RAGGRUPPAMENTO E
NIDIFICAZIONE
Vediamo nel seguente capitolo come creare delle classi di stile che vengono
utilizzate da gruppi di elementi o elementi nidificati.

Raggruppamento di stili
Quando dobbiamo creare delle classi di stile uguali per pi selettori
possiamo raggruppare i selettori separandoli da una virgola:
h1, p, a {
color: red;
}

Nell'esempio creiamo una classe che utilizziamo per i tag h1, p e a.

Elementi nidificati
Se volessimo specificare invece una classe di stile da utilizzare per tutti
gli elementi presenti all'interno di un determinato elemento (quindi
nidificati) potremmo utilizzare lo spazio come segue:
div h1 {
color: red;
}

24/45

Dott.Ing.Ivan Ferrazzi

In questo caso definiamo la classe di stile per tutti gli elementi h1


(indipendentemente dalla profondit dell'elemento in questione!) che si
trovano all'interno di un qualsiasi elemento div. Nel prossimo codice il
contenuto dei tag scritti in grassetto verranno scritti in rosso:
<div>
<h1>Questo il titolo</h1>
<p>
<h1>Secondo titolo</h1>
</p>
<h1>Altro titolo</h1>
<p>
<h1>Nuovamente un titolo</h1>
</p>
</div>

Nidificazione padre/figlio
Per limitare l'utilizzo della classe di stile solamente al primo livello di
appartenenza possiamo scrivere:
div>h1 {
color: red;
}

In questo caso intendiamo solamente gli elementi h1 che si trovano


all'interno del primo livello di un qualsiasi tag div. Nel prossimo codice
solamente il contenuto dei tag scritti in grassetto verranno scritti in
rosso:
<div>
<h1>Questo il titolo</h1>
<p>
<h1>Secondo titolo</h1>
</p>
<h1>Altro titolo</h1>
<p>
<h1>Nuovamente un titolo</h1>
</p>
</div>

Stile per elemento a seguire


Inoltre abbiamo anche la possibilit di creare degli stili validi solamente
per tag che si trovano dopo determinati elementi. Il controllo avviene su
elementi fratelli della struttura:
div + p {
color: red;

25/45

Dott.Ing.Ivan Ferrazzi
}

In questo caso la classe di stile verr presa in considerazione da tutti gli


elementi p che seguono (sullo stesso livello) un elemento div. Nel
prossimo codice solamente il contenuto dei tag scritti in grassetto
verranno scritti in rosso:
<div>
<p>testo</p>
<div>altro testo</div>
<p>Nuovamente testo</p>
<h1>prova</h1>
<p>Questo no</p>
</div>

Stile per tutti gli elementi a seguire


Se non volessimo limitare l'utilizzo della classe di stile solo all'elemento
che si trova direttamente dopo quello in questione, ma bens a tutti quelli
che seguono potremmo scrivere come segue:
div ~ p {
color: red;
}

Nel prossimo codice solamente il contenuto dei tag scritti in grassetto


verranno scritti in rosso:
<div>
<p>testo</p>
<div>altro testo</div>
<p>Nuovamente testo</p>
<h1>prova</h1>
<p>Questo no</p>
</div>

26/45

Dott.Ing.Ivan Ferrazzi

PSEUDO-CLASSI ED ELEMENTI
Le pseudo-classi, oppure i pseudo-elementi, permettono di aggiungere specifici
effetti ai vari selettori in questione. Le sintassi che possiamo utilizzare sono:
selettore:pseudo-classe
selettore.classe:pseudo-classe
selettore:pseudo-elemento
selettore.classe:pseudo-elemento

Vediamo alcune delle pseudo-classi o dei pseudo-elementi pi comuni.

Pseudo-classi per il tag a


a:link {...}

Questa pseudo-classe permette di definire lo stile del link non ancora


visitato.
a:visited {}

Questa pseudo-classe permette di definire lo stile del link visitato.


a:hover {}

Permette di definire lo stile per il link quando il puntatore del mouse ci


passa sopra.
a:active {}

27/45

Dott.Ing.Ivan Ferrazzi

Permette di definire lo stile da utilizzare per il link che viene selezionato.

Pseudo-classe per il primo figlio


selettore:first-child {...}

Questa pseudo-classe identifica il primo tag indicato dal selettore


presente all'interno di un qualsiasi altro tag. Nel seguente esempio:
p:first-child {
color: red;
}

il testo di ogni primo tag p presente all'interno di un qualsiasi altro tag


verr scritto in rosso. Nel prossimo codice le righe in grassetto sono
quelle che verranno scritte in rosso:
<body>
<p>primo elemento</p>
<p>secondo elemento</p>
<div>
<p>primo elemento</p>
<p>secondo elemento</p>
</div>
</body>

Per indicare solamente il primo tag p all'interno di ogni div scriviamo


come segue:
div > p:first-child {
color: red;
}

Pseudo-classe per elementi con il focus


selettore:focus {...}

Questa pseudo-classe identifica lo stile da utilizzare nel caso in cui si


passi il focus ad un determinato elemento.
input:focus {
background-color: yellow;
}

In questo esempio a tutti gli elementi input che prenderanno il focus


verr cambiato il colore di sfondo in giallo.

Pseudo-elementi su testi in elementi a blocco


selettore:first-line {...}

28/45

Dott.Ing.Ivan Ferrazzi

Questo pseudo-elemento viene usato per modificare lo stile della prima


riga dell'elemento in questione. Questo pseudo-elemento pu essere
utilizzato solamente su elementi di blocco.
selettore:first-letter {...}

Questo pseudo-elemento viene usato per modificare lo stile della prima


lettera dell'elemento in questione. Anche questo pseudo-elemento pu
essere utilizzato solamente su elementi di blocco.

Pseudo-elementi per l'aggiunta di contenuto


selettore:before {...}

Questo pseudo-elemento viene usato per aggiungere del contenuto prima


del contenuto dell'elemento stesso. Il seguente esempio aggiunge
un'immagine prima del titolo:
h1:before {
content: url(dot.png);
}

selettore:after {...}

Questo pseudo-elemento viene usato per aggiungere del contenuto dopo


il contenuto dell'elemento stesso. Il seguente esempio aggiunge
un'immagine dopo il testo presente come titolo:
h1:after {
content: url(dot.png);
}

29/45

Dott.Ing.Ivan Ferrazzi

MEDIA QUERIES
Oggi giorno esistono vari dispositivi con caratteristiche di visualizzazione
diverse l'uno dall'altro. I media queries sono dei filtri che permetto di
riconoscere le caratteristiche del dispositivo di visualizzazione con lo scopo di
utilizzare un foglio di stile adeguato all'esigenza.

Come integrare le media queries


Possiamo integrare le media queries importando un foglio di stile esterno,
oppure direttamente all'interno del blocco style della nostra pagina. Per
importare fogli di stile esterni possiamo utilizzare l'attributo media del tag
link come segue:
<link rel=stylesheet type=text/css media=screen href=global.css />

se vogliamo invece integrare le media queries direttamente all'interno


del blocco style scriviamo:
<style>
@media screen {

}
</style>

30/45

Dott.Ing.Ivan Ferrazzi

Tipi di dispositivi
Il primo elemento all'interno delle media query identifica il dispositivo,
oppure i dispositivi se separati da virgola, per i quali vale la rispettiva
regola. I dispositivi che si possono usare sono:
all
aural
braille
embossed
handheld
print
projection
screen
speech
tty
tv

identifica tutti i dispositivi


per sintetizzatori e dispositivi voce
per dispositivi tattili braille
per stampanti braille
per dispositivi piccoli e/o portatili
per stampanti
per presentazione su proiettori
per schermi di computer
per dispositivi vocali
per dispositivi a dimensione di caratteri fissa (terminal)
per dispositivi come televisori

Esempio:
<style>
@media screen,print {

}
</style>

Caratteristiche di dispositivi
Oltre ad identificare il dispositivo possiamo aggiungere delle regole che
ne determinano le specifiche caratteristiche. Pi regole possono essere
combinate in maniera logica utilizzano and, or oppure not. Nel caso in cui
ci fossero all'interno della media query pi dispositivi le caratteristiche
verrebbero specificate per ognuno di essi. Esempio:
screen and (orientation:landscape), handheld and (orientation:landscape)

Vediamo ora le caratteristiche pi utilizzate:


width, min-width, max-width

Questa caratteristica identifica la larghezza di visualizzazione del


dispositivo (nel browser il ViewPort). width identifica la larghezza precisa,
min-width identifica il valore uguale o maggiore, mentre max-width
identifica il valore uguale o minore. Esempio:
<style>
@media all and (min-width:400px) and (max-width:800px) {

31/45

Dott.Ing.Ivan Ferrazzi
</style>

Questo codice identifica tutti gli schermi che hanno una visualizzazione
tra 400px e 800px.
height, min-height, max-height

Questa caratteristica identifica l'altezza di visualizzazione del dispositivo


(nel browser il ViewPort). height identifica l'altezza precisa, min-height
identifica il valore uguale o maggiore, mentre max-height identifica il
valore uguale o minore.
device-width, min-device-width, max-device-width
La caratteristica device-width identifica la larghezza

effettiva dello
schermo del dispositivo e non solo la parte utilizzata per la
visualizzazione del documento. I prefissi min e max vengono utilizzati
esattamente come nella caratteristica width.
device-height, min-device-height, max-device-height

In questo caso definiamo l'altezza effettiva dello schermo del dispositivo.


Anche qui i prefissi min e max vengono utilizzati come nella caratteristica
height.
orientation

Questa caratteristica permette di utilizzare il valore landscape oppure


portrait. In questo caso il valore si riferisce alle proporzioni tra width e
height. Se width maggiore di height ci troviamo in visualizzazione
landscape. Nel momento in cui height supera il valore di width
l'orientamento sar portrait.
<style>
@media handheld and (orientation:portrait) {

}
</style>

aspect-ratio

Questa caratteristica permette di definire una proporzione pi precisa tra


width e height utilizzando come valore due numeri interi separati dal
simbolo / (es. 4/3, 16/9, ecc.). Anche questa caratteristica permette
l'utilizzo dei prefissi min e max.
device-aspect-ratio

Questa caratteristica identica a aspect-ratio solo che mette a confronto


le proporzioni di device-width e device-height. Anche qui si possono
32/45

Dott.Ing.Ivan Ferrazzi

utilizzare i prefissi min e max.


color

Questa caratteristica permette di specificare il numero dei bit utilizzati


per rappresentare un color all'interno del dispositivo in questione.
Utilizzando il semplice nome della caratteristica, quindi senza aggiungere
un valore, permette di indicare tutti i dispositivi che mettono a
disposizione una visualizzazione a colori.
<style>
@media all and (color) {

}
</style>

color-index

Questa caratteristica permette di specificare il numero di colori


supportati all'interno della tavolozza colori del dispositivo. Anche qui
possiamo utilizzare i prefissi min e max come gi visto precedentemente.
<style>
@media screen and (min-color-index:16) {

}
</style>

33/45

Dott.Ing.Ivan Ferrazzi

CSS3
Questa sezione stata creata per dare una panoramica iniziale a quelle che
possono essere le potenzialit introdotte dalle direttive CSS3. Per garantire una
compatibilit attraverso i diversi browser diventa indispensabile l'utilizzo di
determinati prefisse preimpostate per i vari browser in questione. I prefissi che
utilizziamo sono: -moz- (per Mozilla Firefox), -ms- (per Internet Explorer),
-webkit- (per Safari e Chrome) e -o- (per Opera). Per evitare di ripetere
continuamente il codice all'interno di vari esempi ci baseremo solamento sulle
propriet base e quelle definite per l'utilizzo all'interno dei Mozilla Firefox. Per
una compatibilit maggiore vanno ripetute le varie propriet modificando
semplicemente i prefissi.

Stili per i contenitori ed i loro contenuti


border-radius: h_pixel [/ v_pixel];

Questo stile permette di definire gli angoli arrotondati degli elementi:


h_pixel

v_pixel

questa propriet ci permette di impostare le dimensioni


degli angoli in pixel. Possiamo inserire un valore (per
modificare tutti gli angoli), due valori (altosinistra/basso-destra e alto-destra/basso-sinistra), tre
valori (alto-sinistra alto-destra/basso-sinistra bassodestra), oppure quattro valori (alto-sinistra alto-destra
basso-destra basso-sinistra).
questa propriet, se presente, definisce l'altezza
dell'rettangolo nell'angolo che andr a definire
l'arrotondamento desiderato. h_pixel in questo caso ne
34/45

Dott.Ing.Ivan Ferrazzi

andr a definire la larghezza.


Esempio:
div {
border-radius: 40px / 20px;
-moz-border-radius: 40px / 20px;
}

box-shadow: h_pos v_pos [blur] [spread] [color] [inset];

Questo stile permette di definire l'ombra del relativo oggetto in


questione.
h_pos

v_pos

blur

spread

color
inset

questo valore ci da la possibilit di definire lo


spostamento orizzontale dell'ombra. Questo valore
obbligatorio.
questo valore ci da la possibilit di definire lo
spostamento verticale dell'ombra. Anche questo valore
obbligatorio.
questo valore identifica la larghezza della sfumatura
che vogliamo dare all'ombra. Questo valore
facoltativo.
questo valore identifica il quanto si deve allargare
l'ombra che stiamo creando. L'effetto quello che si
ottiene allontanando o avvicinando la fonte di luce che
genera l'ombra in questione.
questo valore ci da la possibilit di definire il colore
dell'ombra.
questo parola viene aggiunta come valore per creare
un'ombra generata verso l'interno dell'oggetto in
questione.

Esempio:
div {
box-shadow: 10px 10px 5px black;
-moz-box-shadow: 10px 10px 5px black;
}

background-size: width height;

Questo stile permette di definire la grandezza dell'immagine che


inseriamo come immagine di sfondo.
width

questo valore ci da la possibilit di definire la larghezza


dell'immagine in questione. Possiamo utilizzare anche
valori percentuali se vogliamo adattare la larghezza alla
dimensione del suo contenitore.
35/45

Dott.Ing.Ivan Ferrazzi
height

questo valore ci da la possibilit di definire l'altezza


dell'immagine in questione. Possiamo utilizzare anche
valori percentuali se vogliamo adattare l'altezza alla
dimensione del suo contenitore.

Esempio:
div {
width: 200px;
height: 200px;
background-image: url(back.jpg);
background-repeat: no-repeat;
background-size: 100px 100px;
-moz-background-size: 100px 100px;
}

background-origin: box_model;

Questa propriet ci permette di definire la parte del contenitore di


riferimento per il posizionamento dell'immagine di sfondo.
box_model

questo valore definisce la parte del contenitore di


riferimento. I valori possibili sono: border-box, paddingbox, oppure content-box.

Esempio:
div {
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid black;
background-image: url(back.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-origin: content-box;
-moz-background-origin: content-box;
}

text-shadow: h_pos v_pos [blur] [color];

Questo stile permette di definire l'ombra di parti testuali.


h_pos

v_pos

blur

questo valore ci da la possibilit di definire lo


spostamento orizzontale dell'ombra. Questo valore
obbligatorio.
questo valore ci da la possibilit di definire lo
spostamento verticale dell'ombra. Anche questo valore
obbligatorio.
questo valore identifica la larghezza della sfumatura
che vogliamo dare all'ombra. Questo valore
36/45

Dott.Ing.Ivan Ferrazzi

color

facoltativo.
questo valore ci da la possibilit di definire il colore
dell'ombra.

Esempio:
div {
text-shadow: 2px 2px 1px black;
-moz-text-shadow: 2px 2px 1px black;

}
column-count: nr_colonne;

Questo stile permette di definire il numero delle colonne da utilizzare


all'interno di un contenitore. Attualmente possibile definire il numero
delle colonne, ma non la larghezza delle singole.
Esempio:
div {
column-count: 3;
-moz-column-count: 3;

column-gap: valore;

Questo stile permette di definire lo spazio tra una colonna e l'altra.


Esempio:
div {
column-count: 3;
-moz-column-count: 3;
column-gap: 30px;
-moz-column-gap: 30px;
}

column-rule: spessore stile colore;

Questa propriet ci permette di definire la linea separatrice tra le varie


colonne che abbiamo definito.
spessore
stile
colore

questo valore definisce lo spessore che vogliamo dare


alla linea
questo valore definisce lo stile che possiamo dare alla
linea (vedi gli stili che abbiamo utilizzato per i bordi)
questo valore permette di definire il colore della linea
da utilizzare

Esempio:
37/45

Dott.Ing.Ivan Ferrazzi

div {
column-count: 3;
-moz-column-count: 3;
column-gap: 30px;
-moz-column-gap: 30px;
column-rule: 1px solid black;
-moz-column-rule: 1px solid black;
}

Importazione di font aggiuntivi


La gestione di font aggiuntivi all'interno dei nostri siti internet fino ad ora
non era possibile. Per garantire una giusta visualizzazione del nostro sito
era indispensabile limitarsi ai font standard compatibili sui vari browser in
questione.
CSS3 mette a disposizione la possibilit di caricare la configurazione di
font aggiuntivi che possiamo depositare direttamente sul server web.
L'unica cosa che dobbiamo fare definire un font mediante @font-face
definendo il nome che vogliamo dare al font, la posizione del file che ci
interessa, l'eventuale formato del file e le eventuali propriet di
riferimento.
Per quanto riguada i vari formati di font dobbiamo sapere che Internet
Explorer supporta i font .eot (Embedded Open Type), mentre Firefox,
Chrome, Safari e Opera supportano i font di formato .ttf (True Type Font)
e .otf (Open Type Fonts).
Il nome del font da importare lo definiamo con font-family, la posizione
del file con src. Vediamo un piccolo esempio:
@font-face {
font-family: myfont;
src: url('segoesc.ttf'),
url('segoesc.eot') format('opentype'); /*IE*/
}
div {
font-family: myfont;
}

Notiamo quindi all'interno del @font-face la possibilit di aggiungere i vari


formati separati da una virgola dove la funzione format ci permette di
definire il formato del file che andiamo ad aggiungere. Il nuovo font viene
poi utilizzato riprendendo il nome del font all'interno dell'elemento che ci
interessa.
Nell'esempio precedente abbiamo definito un font di tipo normale. La
formattazione in grassetto dello stesso font si trova per in file diverso.
Ecco che dobbiamo quindi aggiungere un nuovo @font-face per definire
anche le propriet relative al nuovo stile di carattere che possiamo
utilizzare. In questo caso aggiungiamo all'esempio precedente anche il
seguente blocco:
38/45

Dott.Ing.Ivan Ferrazzi

@font-face {
font-family: myfont;
src: url('segoescb.ttf'),
url('segoescb.eot') format('opentype');
font-weight: bold;
}

Qui notiamo l'utilizzo dello stesso nome, cambia per il file che
importiamo ed in pi si aggiunge la propriet di stile ne identifica le
propriet. L'interprete HTML, avendo lo stesso nome che identifica il font
con propriet diverse, utilizzer proprio l'aggiunta delle propriet in
questione (nel nostro caso il font-weight: bold) per identificare il file da
utilizzare per la visualizzazione del testo in questione.

Stili per la trasformazione degli elementi


CSS3 mette
funzioni in
trasformare
separate da

a disposizione la propriet transform che utilizza una serie di


grado di trasformare l'aspetto degli elementi HTML. Per
un elemento possiamo utilizzare una serie di funzioni
uno spazio.

transform: translate(x_pos,y_pos);

Questa funzione permette di spostare l'elemento in questione senza


dover utilizzare la propriet position:
x_pos
v_pos

questo valore sposta l'elemento orizzontalmente dalla


sua posizione di origine.
questo valore sposta l'elemento verticalmente dalla sua
posizione di origine.

Esempio:
div {
transform: translate(100px,50px);
-moz-transform: translate(100px,50px);
}

transform: rotate(deg);

Questa funzione permette rotare l'elemento in questione:


deg

questo valore definisce il grado di rotazione


dell'elemento. L'unit di misura da utilizzare deg.

Esempio:
div {
transform: rotate(45deg);

39/45

Dott.Ing.Ivan Ferrazzi

-moz-transform: rotate(45deg);

transform: scale(x_prop,y_prop);

Questa funzione scalare l'elemento in questione:


x_prop

y_prop

questo valore definisce la larghezza di destinazione in


base a quella attuale. Il valore della larghezza attuale
pari a 1. 2 aumenta la larghezza del doppio, mentre 0.5
la dimezza.
questo valore definisce l'altezza di destinazione in base
a quella attuale. Il valore dell'altezza attuale pari a 1.
2 aumenta l'altezza del doppio, mentre 0.5 la dimezza.

Esempio:
div {
transform: scale(2,2);
-moz-transform: scale(2,2);
}

transform: skew(x_deg,y_deg);

Questa funzione permette di roteare intorno all'asse x ed intorno all'asse


y:
x_deg
y_deg

questo
all'asse
questo
all'asse

valore definisce i
x. L'unit di misura
valore definisce i
y. L'unit di misura

gradi di rotazione intorno


da utilizzare deg.
gradi di rotazione intorno
da utilizzare deg.

Esempio:
div {
transform: skew(10deg,20deg);
-moz-transform: skew(10deg,20deg);
}

Effetti di transizione
CSS3 mette a disposizione una serie di animazioni tra le quali troviamo
appunto l'effetto di transizione. L'effetto di transizione viene attivato su
una o pi propriet dell'elemento stesso. Nel momento in qui una delle
propriet indicate subisce una variazione, questa non sar istantanea, ma
si passer in maniera graduale da quella che la situazione attuale a
quella nuova definita.
L'effetto di transizione va sempre definito indicando la propriet da
monitorare ed il tempo di durata della transizione. L'unit di misura da
40/45

Dott.Ing.Ivan Ferrazzi

utilizzare s (seconds). Le coppie di valori che definiscono le varie


propriet di transizione vengono elencate separate da una virgola (,).
Vediamo ora un piccolo esempio:
div {
width: 200px;
height: 200px;
transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s;
}
div:hover {
width: 300px;
height: 300px;
}

In questo caso attiviamo l'effetto di transizione sulla larghezza e


sull'altezza dell'elemento in questione. Quando ci passiamo sopra con il
mouse facciamo partire l'effetto di transizione che durer 2 secondi per
passare dagli attuali 200 pixel ai 300 pixel di destinazione.
Le propriet che possiamo aggiungere all'effetto di transizione sono:
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|
cubic-bezier(n,n,n,n);

Questa funzione permette di definire la funzione da utilizzare per l'effetto


di transizione.
transition-delay: seconds;

Questa funzione permette di definire in secondi il tempo di attesa da


quando avvenuta la modifica della propriet a quando deve partire
l'effetto di transizione.
Esempio:
div {
width: 200px;
height: 200px;
transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s;
transition-timing-function: linear;
-moz-transition-timing-function: linear;
transition-delay: 2s;
-moz-transition-delay: 2s;
}
div:hover {
width: 300px;
height: 300px;
}

41/45

Dott.Ing.Ivan Ferrazzi

Effetti di animazione
CSS3 mette a disposizione dei blocchi @keyframes che permettono di
definire una sorta di timeline dell'animazione realizzare. La timeline
presente all'interno del blocco citato viene suddiviso in percentuali, dove
l'inizio della timeline definita dal valore 0% (oppure la parola chiave
from), mentre la fine definita dal valore 100% (oppure la parola chiave
to).
Ad ogni punto presente all'interno della timeline viene definita una classe
di stile dove possiamo definire tutte le propriet dell'oggetto in
esattamente quel momento.
Vediamo un semplice esempio:
@keyframes myanim {
from {background-color: red;}
to {background-color: yellow;}
}
@-moz-keyframes myanim {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 200px;
height: 200px;
background-color: yellow;
}
div:hover {
animation: myanim 2s;
-moz-animation: myanim 2s;
}

In questo modo definiamo un'animazione al quale diamo il nome myanim


che parte dallo sfondo rosso per arrivare in maniera graduale allo sfondo
giallo. L'animazione viene fatta partire quando il mouse entra all'interno
dell'elemento in questione e terminer dopo 2 secondi. Al termine
dell'animazione l'elemento ritorner alle sue propriet di origine.
L'animazione pu per anche essere fatta partire subito senza l'utilizzo di
un particolare evento. Vediamo l'esempio seguente:
@keyframes myanim {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: red;}
}
@-moz-keyframes myanim {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: red;}
}

42/45

Dott.Ing.Ivan Ferrazzi
div {
width: 200px;
height: 200px;
background-color: yellow;
animation: myanim 2s linear infinite;
-moz-animation: myanim 2s linear infinite;
}

Come possiamo notare dall'esempio abbiamo aggiunto due nuovi falori il


linear definisce l'effetto animazione da un passaggio all'altro (vedi effetti
di transizione), mentre infinite ci permette di attivare l'animazione in
loop.

43/45

Dott.Ing.Ivan Ferrazzi

LE VARIE UNITA'
Le unit di misura per le dimensioni
Unit
cm
mm
in
pc
px
em
ex

Descrizione
centimetri
millimetri
pollici
pica(=12punti)
pixel
lun. lettera
alt. carattere

Esempi
10cm
10mm
0,25in
2pc
25px
2,5em
3ex

I valori assoluti
Valore
xx-small
x-small
small
medium
large
x-large
xx-large

Sintassi/Descrizione
font-size: xx-small
font-size: x-small
font-size: small
font-size:medium
font-size:large
font-size:x-large
font-size:xx-large

44/45

Dott.Ing.Ivan Ferrazzi

I valori relativi
Valore
smaller
larger

Sintassi/Descrizione
font-size:smaller
font-size:larger

I valori assoluti
Valore
nome
esadecimale
rgb
perc.rgb

Sintassi/Descrizione
color: red
color: #00FF00
color: rgb(0,255,0)
color: rgb(0%,100%,0%)

I valori di posizionamento
Attributo

Parametro

position

absolute - static - relative

left

cm - mm - in - pt - pc - px
- ex - em

top

cm - mm - in - pt - pc - px
- ex - em

height
width

cm - mm
cm - mm
-

- in - pt - pc - px
ex - em
- in - pt - pc - px
ex - em

overflow

visible - hidden - scroll

visibility

visible - hidden

Z-index

xx numeri positivi

45/45

Descrizione
Il modo in cui pu essere
posizionato un box contenitore.
la distanza del contenitore dal
margine sinistro della finestra del
browser.
la distanza del contenitore dal
margine superiore della finestra
del browser.
Altezza
del
contenitore
se
posizionato in modo absolute.
Larghezza del contenitore se
posizionato in modo absolute.
Contenuto che supera Larghezza
Altezza del box contenitore.
Visibilit o meno di un box
contenitore.
L'ordine
di
priorit
di
visualizzazione
di
un
box
contenitore.