css - guida

45
Dott.Ing.Ivan Ferrazzi CSS Introduzione ai Cascading Style Sheet Dott. Ing. Ivan Ferrazzi V1.5 del 14/10/2013 1/45

Upload: ryuxanten

Post on 14-Apr-2016

255 views

Category:

Documents


2 download

DESCRIPTION

Guida esauriente ai CSS, i fogli di stile per la personalizzazione grafica delle pagine Web

TRANSCRIPT

Page 1: Css - Guida

Dott.Ing.Ivan Ferrazzi

CSS

Introduzioneai

Cascading Style Sheet

Dott. Ing. Ivan FerrazziV1.5 del 14/10/2013

1/45

Page 2: Css - Guida

Dott.Ing.Ivan Ferrazzi

Copyright ©2013 Dott.Ing. Ivan FerrazziPermission 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

Page 3: Css - Guida

Dott.Ing.Ivan Ferrazzi

Indice generaleINTRODUZIONE....................................................................................................5I METODI DEL CSS...............................................................................................6

CSS in linea .....................................................................................................6CSS a stile incorporato nella pagina................................................................7CSS in un foglio esterno...................................................................................7

LE CLASSI............................................................................................................9LAVORARE CON GLI ID.......................................................................................10GLI STILI.............................................................................................................11

I parametri di stile per il testo.......................................................................11I parametri di stile per i caratteri...................................................................13I parametri di stile per i colori........................................................................14I parametri di stile per definire le dimensioni................................................15I parametri di stile per definire le posizioni....................................................15I parametri di stile per la visibilità.................................................................17I parametri di stile per lo sfondo....................................................................18I parametri di stile per gli elementi contenitori..............................................19I parametri di stile per le liste........................................................................21I parametri di stile per le tabelle....................................................................22

RAGGRUPPAMENTO E NIDIFICAZIONE...............................................................24Raggruppamento di stili.................................................................................24Elementi nidificati..........................................................................................24Nidificazione padre/figlio...............................................................................25Stile per elemento a seguire..........................................................................25Stile per tutti gli elementi a seguire..............................................................26

PSEUDO-CLASSI ED ELEMENTI...........................................................................27Pseudo-classi per il tag a...............................................................................27Pseudo-classe per il primo figlio....................................................................28Pseudo-classe per elementi con il focus........................................................28Pseudo-elementi su testi in elementi a blocco...............................................28Pseudo-elementi per l'aggiunta di contenuto................................................29

MEDIA QUERIES.................................................................................................30Come integrare le media queries..................................................................30Tipi di dispositivi............................................................................................31Caratteristiche di dispositivi..........................................................................31

CSS3..................................................................................................................34Stili per i contenitori ed i loro contenuti.........................................................34Importazione di font aggiuntivi......................................................................38Stili per la trasformazione degli elementi......................................................39Effetti di transizione.......................................................................................40Effetti di animazione......................................................................................42

LE VARIE UNITA'.................................................................................................44Le unità di misura per le dimensioni..............................................................44I valori assoluti...............................................................................................44I valori relativi................................................................................................45I valori assoluti...............................................................................................45I valori di posizionamento .............................................................................45

3/45

Page 4: Css - Guida

Dott.Ing.Ivan Ferrazzi

4/45

Page 5: Css - Guida

Dott.Ing.Ivan Ferrazzi

INTRODUZIONEI 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 {text­align: justify; color:red; font­size:32pt;}

5/45

Page 6: Css - Guida

Dott.Ing.Ivan Ferrazzi

I METODI DEL CSSVediamo 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

Page 7: Css - Guida

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

Page 8: Css - Guida

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); compreso tra i tag <style type=”text/css”></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

Page 9: Css - Guida

Dott.Ing.Ivan Ferrazzi

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

Page 10: Css - Guida

Dott.Ing.Ivan Ferrazzi

LAVORARE CON GLI IDI 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

Page 11: Css - Guida

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 allineamento a sinistraright allineamento a destracenter centratojustify giustificato

Esempi:P {text-align: left;}P {text-align: right;}DIV {text-align: center;}DIV {text-align: justify;}

text-decoration: overline|underline|line-through|blink|none;Questo stile permette di modificare la decorazione del testo.

overline sopralineatounderline sottolineatoline-through sbarratoblink lampeggiantenone senza

Esempi:

11/45

Page 12: Css - Guida

Dott.Ing.Ivan Ferrazzi

H1 {text-decoration: overline;}P {text-decoration: underline;}DIV {text-decoration: overline underline;}P {text-decoration: line-through;}P {text-decoration: blink;}P {text-decoration: none;}

font-style: normal|italic|oblique;

Questo stile permette di modificare la proprietà stile del testo.

normal stile di defaultitalic stile corsivooblique sitle obliquo

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

Questo stile permette di modificare l'indentazione del testo.

Esempi:P {text-indent: 12px;}DIV {text-indent: 20%;}

text-transform: capitalize|uppercase|lowercase;Questa direttiva di stile permette di effettuare delle trasformazioni del testo.

capitalize trasforma in maiuscola la prima lettera di ogni parolauppercase trasforma tutto in maiuscololowercase trasforma tutto in minuscolo

Esempi:P {text-transform: capitalize;}P {text-transform: uppercase;}P {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 interlinea normale{numero} interlinea espressa in em{percentuale} interlinea espressi in percentuale

Esempi:P {line-height: 3em;}DIV {line-height: 50%;}

12/45

Page 13: Css - Guida

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 {letter-spacing: 1em;}DIV {letter-spacing: 2px;}

direction: rtl|ltr;Con questo attributo possiamo definire la direzione del testo.

rtl il testo va da destra verso sinistraltr il testo va da sinistra verso destra

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 {font-size: 9pt;}I {font-size: larger;}B {font-size: 18px;}H1 {font-size: 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

Page 14: Css - Guida

Dott.Ing.Ivan Ferrazzi

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

font-variant: normal|small-caps;Questo parametro permette di definire delle varianti allo stile da apportare al testo desiderato.

Esempi:P {font-variant: small-caps;}B {font-variant: normal;}

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

Con questo attributo possiamo definire lo spessore da utilizzare per la visualizzazione del testo.

bold grassettonormal spessore normalevalore valore numerico compreso tra 100 (normale) a 700

(grassetto)

Esempi:P {font-weight: bold;}H1 {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 {color: red;}DIV {color: #990099;}H1 {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 {background-color: yellow}DIV {background-color: #33ccff}H1 {background-color: rgb(255,255,0)}

14/45

Page 15: Css - Guida

Dott.Ing.Ivan Ferrazzi

I parametri di stile per definire le dimensioni

width: {valore in pixel}|{valore percentuale}|autoQuesto 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 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

fixed 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

relative stacca l'elemento dalla struttura statica, ma utilizza come riferimento il proprio posizionamento all'interno della stessa struttura

static 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

Page 16: Css - Guida

Dott.Ing.Ivan Ferrazzi

left: {valore in pixel}|{valore percentuale}|autoQuesto parametro permette di definire il margine sinistro.

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

display: block|inline|noneQuesto parametro permette di definire lo spazio utilizzato per l'oggetto in questione.

block l'oggetto viene inserito utilizzando un'interruzione prima e dopo l'oggetto stesso; inserimento avviene in modalità verticale

inline l'oggetto viene inserito in sequenza, quindi orizzontalmente

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

right 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

Page 17: Css - Guida

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 nel caso in cui il contenuto fosse più ampio della dimensione del contenitore questo verrebbe visualizzato al di fuori del contenitore stesso

hidden nel caso in cui il contenuto fosse più ampio della dimensione del contenitore questo verrebbe nascosto

scroll in questo caso vengono aggiunte le scrollbars per visualizzare l'intero contenuto

auto 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 l'elemento viene nascosto, ma rimane lo spazio utilizzato dall'elemento quando è visibile

visible l'elemento viene visualizzato

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

Page 18: Css - Guida

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 {background-image: url('percorso/immagine.gif');}DIV {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 ripetizione sia orizzontale che verticalerepeat-x ripetizione orizzontalerepeat-y ripetizione verticaleno-repeat senza ripetizioneinherit 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 per far scorrere lo sfondo insieme al testofixed per fissare lo sfondo e far scorrere solo il testoinherit 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

Page 19: Css - Guida

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 può essere top, center, oppure bottomhpos può essere left, center, oppure rightx% y% sono le coordinate x e y in percentualexpos ypos sono le coordinate x e yinherit 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 non viene utilizzato bordodotted bordo punteggiatodashed bordo tratteggiatosolid bordo solidodouble bordo doppiogroove bordo 3D incavoridge bordo 3D concavoinset bordo 3D abbassatooutset bordo 3D inalzato

border-width: valore; Questo parametro permette di definire lo spessore del bordo.

19/45

Page 20: Css - Guida

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,  outline-width e outline-color.

outline-style: valore [valore [valore valore]];

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

none non viene utilizzato bordodotted bordo punteggiatodashed bordo tratteggiatosolid bordo solidodouble bordo doppiogroove bordo 3D incavoridge bordo 3D concavoinset bordo 3D abbassatooutset 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-right e 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

Page 21: Css - Guida

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

Page 22: Css - Guida

Dott.Ing.Ivan Ferrazzi

disc valore di default; visualizza un puntocircle visualizza un cerchio vuotosquare 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 {list-style-image: url('percorso/immagine.gif');}UL {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 non utilizza puntatorearmenian visualizza la numerazione “Armenian”decimal visualizza la numerazione con numerodecimal-leading-zero visualizza la numerazione con 0 e numerogeorgian visualizza la numerazione “Georgian”lower-alpha visualizza la numerazione a, b, c, ecc.lower-greek visualizza la numerazione alpha, beta, ecc.lower-latin visualizza la numerazione “Latin”lower-roman visualizza la numerazione i, ii, iii, ecc.upper-alpha visualizza la numerazione A, B, C, ecc.upper-latin visualizza la numerazione A, B, C, ecc.upper-roman visualizza la numerazione 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

Page 23: Css - Guida

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

Page 24: Css - Guida

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

Page 25: Css - Guida

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

Page 26: Css - Guida

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

Page 27: Css - Guida

Dott.Ing.Ivan Ferrazzi

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

selettore:pseudo-classeselettore.classe:pseudo-classeselettore:pseudo-elementoselettore.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

Page 28: Css - Guida

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

Page 29: Css - Guida

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

Page 30: Css - Guida

Dott.Ing.Ivan Ferrazzi

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

Page 31: Css - Guida

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 identifica tutti i dispositiviaural per sintetizzatori e dispositivi vocebraille per dispositivi tattili brailleembossed per stampanti braillehandheld per dispositivi piccoli e/o portatiliprint per stampantiprojection per presentazione su proiettoriscreen per schermi di computerspeech per dispositivi vocalitty per dispositivi a dimensione di caratteri fissa (terminal)tv 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-widthQuesta 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

Page 32: Css - Guida

Dott.Ing.Ivan Ferrazzi

</style>

Questo codice identifica tutti gli schermi che hanno una visualizzazione tra 400px e 800px.

height, min-height, max-heightQuesta 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.

orientationQuesta 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-ratioQuesta 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-ratioQuesta caratteristica è identica a aspect-ratio solo che mette a confronto le proporzioni di device-width e device-height. Anche qui si possono

32/45

Page 33: Css - Guida

Dott.Ing.Ivan Ferrazzi

utilizzare i prefissi min e max.

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

Page 34: Css - Guida

Dott.Ing.Ivan Ferrazzi

CSS3Questa 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 questa proprietà ci permette di impostare le dimensioni degli angoli in pixel. Possiamo inserire un valore (per modificare tutti gli angoli), due valori (alto-sinistra/basso-destra e alto-destra/basso-sinistra), tre valori (alto-sinistra alto-destra/basso-sinistra basso-destra), oppure quattro valori (alto-sinistra alto-destra basso-destra basso-sinistra).

v_pixel 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

Page 35: Css - Guida

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 questo valore ci da la possibilità di definire lo spostamento orizzontale dell'ombra. Questo valore è obbligatorio.

v_pos questo valore ci da la possibilità di definire lo spostamento verticale dell'ombra. Anche questo valore è obbligatorio.

blur questo valore identifica la larghezza della sfumatura che vogliamo dare all'ombra. Questo valore è facoltativo.

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

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

inset 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

Page 36: Css - Guida

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, padding-box, 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 questo valore ci da la possibilità di definire lo spostamento orizzontale dell'ombra. Questo valore è obbligatorio.

v_pos questo valore ci da la possibilità di definire lo spostamento verticale dell'ombra. Anche questo valore è obbligatorio.

blur questo valore identifica la larghezza della sfumatura che vogliamo dare all'ombra. Questo valore è

36/45

Page 37: Css - Guida

Dott.Ing.Ivan Ferrazzi

facoltativo.color 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 questo valore definisce lo spessore che vogliamo dare alla linea

stile questo valore definisce lo stile che possiamo dare alla linea (vedi gli stili che abbiamo utilizzato per i bordi)

colore questo valore permette di definire il colore della linea da utilizzare

Esempio:

37/45

Page 38: Css - Guida

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

Page 39: Css - Guida

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 a disposizione la proprietà transform che utilizza una serie di funzioni in grado di trasformare l'aspetto degli elementi HTML. Per trasformare un elemento possiamo utilizzare una serie di funzioni separate da 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 questo valore sposta l'elemento orizzontalmente dalla sua posizione di origine.

v_pos 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

Page 40: Css - Guida

Dott.Ing.Ivan Ferrazzi

-moz-transform: rotate(45deg);}

transform: scale(x_prop,y_prop);

Questa funzione scalare l'elemento in questione:

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

y_prop 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 questo valore definisce i gradi di rotazione intorno all'asse x. L'unità di misura da utilizzare è deg.

y_deg questo valore definisce i gradi di rotazione intorno all'asse y. L'unità di misura 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

Page 41: Css - Guida

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

Page 42: Css - Guida

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

Page 43: Css - Guida

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

Page 44: Css - Guida

Dott.Ing.Ivan Ferrazzi

LE VARIE UNITA'

Le unità di misura per le dimensioni

Unità Descrizione Esempicm centimetri 10cmmm millimetri 10mmin pollici 0,25inpc pica(=12punti) 2pcpx pixel 25pxem lun. lettera 2,5emex alt. carattere 3ex

I valori assoluti

Valore Sintassi/Descrizionexx-small font-size: xx-smallx-small font-size: x-smallsmall font-size: smallmedium font-size:mediumlarge font-size:largex-large font-size:x-largexx-large font-size:xx-large

44/45

Page 45: Css - Guida

Dott.Ing.Ivan Ferrazzi

I valori relativi

Valore Sintassi/Descrizionesmaller font-size:smallerlarger font-size:larger

I valori assoluti

Valore Sintassi/Descrizionenome color: redesadecimale color: #00FF00rgb color: rgb(0,255,0)perc.rgb color: rgb(0%,100%,0%)

I valori di posizionamento

Attributo Parametro Descrizione

position absolute - static - relativeIl modo in cui può essere posizionato un box contenitore.

leftcm - mm - in - pt - pc - px

- ex - em

la distanza del contenitore dal margine sinistro della finestra del browser.

topcm - mm - in - pt - pc - px

- ex - em

la distanza del contenitore dal margine superiore della finestra del browser.

heightcm - mm - in - pt - pc - px

- ex - emAltezza del contenitore se posizionato in modo absolute.

widthcm - mm - in - pt - pc - px

- ex - emLarghezza del contenitore se posizionato in modo absolute.

overflow visible - hidden - scroll Contenuto che supera Larghezza Altezza del box contenitore.

visibility visible - hiddenVisibilità o meno di un box contenitore.

Z-index xx numeri positiviL'ordine di priorità di visualizzazione di un box contenitore.

45/45