CSS Introduzione ai Cascading Style Sheet

Transcript

Dott.Ing.Ivan Ferrazzi
CSS
Introduzione
ai
Cascading Style Sheet
Dott. Ing. Ivan Ferrazzi
V1.5 del 14/10/2013
1/45
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
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
4/45
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
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
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
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
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
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
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
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
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
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
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
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
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
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-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
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-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
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-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
Questo parametro permette di definire il margine sinistro di un
margin-right: valore;
Questo parametro permette di definire il margine destro di un
margin-bottom: valore;
Questo parametro permette di definire il margine inferiore di un
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
padding-left: valore;
Questo parametro permette di definire lo spazio sinistro di un
padding-right: valore;
Questo parametro permette di definire lo spazio destro di un
padding-bottom: valore;
Questo parametro permette di definire lo spazio inferiore di un
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
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
“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
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
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
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
}
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
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
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
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
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
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
</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
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
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
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.
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
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-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-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
spostamento orizzontale dell'ombra. Questo valore è
obbligatorio.
spostamento verticale dell'ombra. Anche questo valore
è obbligatorio.
questo valore identifica la larghezza della sfumatura
che vogliamo dare all'ombra. Questo valore è
36/45
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;
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
div {
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 {
}
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
@font-face {
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
}
-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
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
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;
}
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;}
}
@-moz-keyframes myanim {
50% {background-color: yellow;}
}
42/45
div {
width: 200px;
height: 200px;
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
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
I valori relativi
Valore
smaller
larger
font-size:smaller
font-size:larger
I valori assoluti
Valore
nome
esadecimale
rgb
perc.rgb
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.

CSS Introduzione ai Cascading Style Sheet

Transcript

Documenti analoghi

Ricchi e Poveri - LIVE A GROTTE DI CASTRO (12-8-15)

Chiara Visen n Social Media Manager ING BANK Lavoro in ING

Esercitazione 2 - Scienze Politiche

Modulo d`iscrizione

versione pdf - Matteo Lampertico

IRCA SPA Div. RICA - Zoppas Industries

Testi di riferimento del corso: Bejan A., Tsatsaronis G., and Moran M

a.1.2_relazione di calcolo impianti meccanici

Html: style, span, div

Un clacson diventa musica "Così conquisto Fabri Fibra"