Il Fogli di Stile - CSS
Cosa sono i CSS ?
CSS è un linguaggio mediante il quale è possibile
definire la formattazione di documenti HTML, XHTML
e XML ad es. siti web e relative pagine.
CSS è l’acronimo di:
CASCADING
STYLE
SHEETS
In italiano: Fogli di Stile “a cascata”.
Cosa sono i CSS ?
Insieme di regole che indica il tipo di formattazione
da applicare.
Regole contenute in un insieme di direttive
(Recommendations) emanate a partire dal 1996 dal
W3C (WWW Consortium)
Sintassi delle regole:
selettore { proprietà: valore;
proprietà: valore;
...
}
UTILIZZO DEI CSS (Parte 1)
È possibile inserire le regole nella sezione HEAD
della pagina HTML (preambolo del documento):
<html>
<head>
<style type=“text/css”>
<!-h1 { color: red; }
p { font-family: sans-serif; }
-->
</style>
</head>
<body>
…
(CONTENUTI CORPO DELLA PAGINA)
</body>
</html>
UTILIZZO DEI CSS (Parte 2)
È possibile inserire le regole INLINE nel BODY della
pagina HTML (per ogni singolo elemento):
<html>
<head>
…
</head>
<body>
<h1 style=“color: blue”>
Titolo di colore blu
</h1>
<p> ... Paragrafo ... </p>
<h1> ... Titolo non formattato ... </h1>
</body>
</html>
UTILIZZO DEI CSS (Parte 3)
È possibile inserire le regole in un file esterno alla
pagina HTML.
(Attenzione: hanno minore precedenza)
<html>
<head>
<link rel=“stylesheet” href=“file_stile.css”
type=“text/css”>
</head>
<body>
<h1>Titolo di colore blu</h1>
<p> ... Paragrafo ... </p>
</body>
</html>
UTILIZZO DEI CSS (Parte 3bis)
È possibile inserire le regole in un file esterno alla
pagina HTML.
(Attenzione: hanno minore precedenza)
<html>
<head>
<style type="text/css"> @import
url(file_stile.css); </style>
</head>
<body>
<h1>Titolo di colore blu</h1>
<p> ... Paragrafo ... </p>
</body>
</html>
FILES CSS ESTERNI (Parte 1)
È possibile richiamare più di un file .CSS nella stessa
pagina web: l’ultimo ha la precedenza.
Una pagina web può essere visualizzata su dispositivi con
caratteristiche molto diverse: PC, smartphone, palmari,
stampanti, dispositivi braille, screen reader,…
<head>
<title> Esempio con differenti dispositivi </title>
<link rel=“stylesheet” media=“screen”
href=“screen.css” type=“text/css”>
<link rel=“stylesheet” media=“print” href=“print.css”
type=“text/css”>
<link rel=“stylesheet” media=“aural”
href=“screenreader.css” type=“text/css”>
</head>
FILES CSS ESTERNI (Parte 2)
È possibile richiamare più di un file .CSS nella stessa
pagina web: l’ultimo ha la precedenza.
Una pagina web può essere visualizzata su
dispositivi con caratteristiche molto diverse: PC,
smartphone, palmari, stampanti, dispositivi braille,
screen reader,…
<head>
<title> Esempio con differenti dispositivi </title>
<link rel=“stylesheet” media=“screen”
href=“screen.css” type=“text/css”>
<link rel=“stylesheet” media=“print”
href=“print.css” type=“text/css”>
</head>
L’ATTRIBUTO MEDIA
È anche possibile utilizzare gli operatori logici come
and, not e only.
screen: schermo di computer;
print: pagina stampata;
projection: presentazioni e proiezioni;
speech: dispositivi a sintesi vocale;
braille: supporti basati sull’uso del braille;
handheld: dispositivi mobili con schermo piccolo e in
genere dotati di browser con limitate capacità grafiche;
tty: dispositivi a carattere fisso come i terminali;
tv: visualizzazione su schermi televisivi.
<link rel=“stylesheet” media=“screen and (color) and
(device-aspect-ratio: 16/9)” href=“colore.css“ />"
REGOLE DI APPLICAZIONE
Uno stile applicato ad un elemento viene applicato
automaticamente anche a tutti i suoi sottoelementi
<body style=“color:blue”>
... testo ...
<div style=“color:green”>
... testo ...
</div>
<div> ... testo ... </div>
</body>
L’ultimo DIV cambia il colore del testo interno, anche
se non specificato!!
I SELETTORI (Parte 1)
DI TIPO: p { font-size : 8pt}
DI ATTRIBUTO: valori degli attributi class e id
<style type=“text/css”>
#p_idenficatore { color:blue; }
.p_classe { font-weight:bold; }
</style>
…
<p id=“p_identificatore”> Testo in blu </p>
<p class=“p_classe”> Testo in grassetto </p>
UNIVERSALI
* { font_weight:bold; }
RAGGRUPPAMENTO DI SELETTORI
h1, h2 { color:blue; font-size:10pt; }
I SELETTORI (Parte 2)
FIGLI E DISCENDENTI
selettore di figli: h1 > p { ...}
selettore di discendenza: h1 p { ...}
DI ADIACENZA
p + div { ...}
ORDINE DI PRECEDENZA:
CSS INLINE CSS esterni Impostazioni personali
dell’utente Impostazioni predefinite del browser (se non
definito o se il browser non supporta i CSS)
Se vengono definite più regole con la stessa importanza
per uno stesso elemento, l’ultima definita è quella che verrà
applicata
Ereditarietà: ogni figlio eredita le impostazioni del padre
I SELETTORI (Parte 3)
LE PSEUDOCLASSI: I LINK
Non definisce un elemento ma un suo particolare
stato
Es. a:link:hover {font-size:3 cm; color:#F00;}
Es2. p:first-child {font-size:12px; color:#000;}
PSEUDOCLASSE
:link
:visited
:active
:hover
:focus
RISULTATO
link non visitato
link visitato
link attivo
vi si trova sopra il mouse
elemento attivo (tab)
GLI PSEUDOELEMENTI
Consentono un controllo approfondito sui formati
tipografici degli elementi dei blocchi
Es. p:first-letter { color:red; }
Attenzione:non sempre sono supportati dai browser!
PSEUDOELEMENTO
:first-letter
:first-line
:before
:after
RISULTATO
prima lettera di un blocco
prima riga di un blocco
testo da aggiungere prima
o dopo un elemento
UNITÁ DI MISURA
Esistono diverse unità di misura; si dividono in:
relative: ex, em, percentuale
assolute: cm, mm, in, pt, px, pc
Unità
Definizione
Esempio
em
ex
px
in
cm
mm
pt
pc
%
Altezza media del font utilizzato
Altezza della x nel font utilizzato
Numero di pixel nello schermo
Inch, pollici (1 in = 2,54 cm)
Centimetri
Millimetri
Punti (1 pt = 1/72 pollici)
Pica (1 pc = 12 punti)
Valore in percentuale relativo a
quello dell’elemento principale
h1 { margin: 0.5em }
h2 { margin: 1ex }
p { font-size: 12px }
p { font-size: 0.5in }
p { font-size: 0.3cm }
p { font-size: 3mm }
p { font-size: 12pt }
p { font-size: 1pc }
p { line-height: 120% }
I COLORI
Espressi con il formato RGB (Red, Green, Blue)
#RRGGBB
#FFFFFF bianco
#FF0000 rosso
#00FF00 verde
#0000FF blu
rgb(y,y,y) oppure rgb(y%, y%, y%)
rgb(255,0,0) o rgb(100%,0%,0%)
rappresentano il rosso brillante
Colori predefiniti che funzionano su tutti i browser:
aqua
gray
fuchsia
…
black
green
maroon
white
lime
purple
IL POSIZIONAMENTO
statico (tipico di HTML): ogni elemento è
posizionato in base al flusso di dati del documento;
assoluto: permette di astrarre il CSS dal flusso dei
dati, consentendo di posizionarlo in qualsiasi punto
della pagina (elementi che possono anche venire
sovrapposti).
relativo: non esce dal flusso di dati, nè produce
alcuna modifica rispetto agli elementi posizionati in
modo statico. Se vengono impostate le proprietà left
e right, si spostano gli elementi a sinistra e in alto di
quello che lo precede.
ATTRIBUTO ABSOLUTE
<DIV STYLE="position:absolute;
top:100px; left:100px;">
<IMG SRC="elemento01.gif" border="0">
</DIV>
ATTRIBUTO RELATIVE
<P>Esempio di posizionamento
<SPAN STYLE="position:relative; top:10px;
left:10px;"><B>relativo</B></SPAN>
usando il marcatore SPAN all’interno del …
alla parola precedente "posizionamento".
</P>
PROPRIETÀ VISIBILITY
Determina se un elemento debba essere visibile o
nascosto. Si applica a tutti gli elementi e non è
ereditata.
l’elemento non viene rimosso dal flusso del
documento e occupa lo spazio relativo alle sue
dimensioni (c’è ma non si vede).
I valori possibili sono:
– visible: default, l’elemento è visibile
– hidden: elemento nascosto (apparirà una zona
vuota)
– collapse: usato nelle tabelle (per righe,colonne e
celle).
Differente dalla proprietà “display: none”.
PROPRIETÀ Z-INDEX (Parte 1)
Imposta l'ordine di posizionamento dei vari elementi
sulla base di una scala di livelli.
Stabilisce la disposizione degli elementi posizionati
lungo l’asse perpendicolare allo schermo.
Esempio:
– <div style="z-index: 1">
– <div style="z-index: 2">
– <div style="z-index: 3">
PROPRIETÀ Z-INDEX (Parte 2)
Codice HTML:
<BODY>
<div class="div1">TESTO DEL PRIMO DIV</div>
<div class="div2">TESTO DEL SECONDO DIV</div>
<div class="div3">TESTO DEL TERZO DIV</div>
</BODY>
PROPRIETÀ Z-INDEX (Parte 3)
Codice HTML:
<STYLE>
div
{ border: #000 solid 2px;
height: 200px;
width: 400px;
padding: 30px;
position: absolute; }
.div1
{ background-color: #DDD;
top: 20px;
left: 20px;
z-index: 1;
visibility: visible; }
.div2
{ background-color: #AAA;
top: 80px;
left: 150px;
z-index: 2;
visibility: visible; }
.div3
{ background-color: #666;
top: 160px;
left: 300px;
z-index: 3;
visibility: visible; }
</STYLE>
PROPRIETÀ Z-INDEX (Parte 4)
Risultato finale:
Scarica
