Introduzione ai
Cascading Style Sheets (CSS)
Realizzare pagine Web
con i fogli di stile
Cosa sono
I fogli di stile sono essenzialmente
un'insieme di regole per istruire il
browser su come debba essere
presentata la pagina web.
ITIS F.Corni
Dicembre 1996 CSS1
Maggio 1998 CSS2
In fase di elaborazione CSS3
Problema della compatibilità
2
A cosa servono
ITIS F.Corni
Semplificare la manutenzione delle
pagine web (definisco le regole una
volta per tutte le pagine del sito, le
modifiche vanno fatte sul foglio di stile
e agiscono su tutte le pagine del sito)
Aumentano le possibilità di
formattazione della pagina (bordi,
sfondi, colore, impaginazione, ecc.)
3
Inserire i fogli di stile
Le regole dei CSS possono essere
ITIS F.Corni
specificate in una pagina esterna al
documento (fogli di stile collegati)
possono essere specificate nel documento
stesso (fogli di stile incorporati)
possono essere incorporate nei tag
(X)HTML (fogli di stile in linea)
4
Fogli di stile collegati
Il foglio di stile è un file (ASCII) esterno con
estensione .css
Dal documento html il collegamento avviene come
segue
ITIS F.Corni
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>...
O in alternativa:
<style>
@import url(stile.css);
</style>
5
Fogli di stile incorporati
Inseriti direttamente nel file html, all’interno della
sezione head con il tag <style>
ITIS F.Corni
<html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type="text/css">
body {background: #FFFFCC;}
</style>
</head>
<body>...
6
Fogli di stile in linea
Lo stile viene definito all’interno degli
elementi del linguaggio html con
l’attributo style
Sintassi generica:
ITIS F.Corni
<elemento style="regole_di_stile">
Es:
<h1 style="color: red; background: black;">...</h1>
7
Come è fatta una regola
Dichiarazioni racchiuse tra “{}”
Proprietà e valore separate da “:”
Dopo ogni dichiarazione “;”
Per ogni dichiarazione una sola proprietà, possibili più
valori
ITIS F.Corni
8
Selettori
Indicano a quale parte del documento html si
applicano le impostazioni
Alcuni selettori:
ITIS F.Corni
Tag HTML
Classi
Identificatori
Raggruppamento
9
Selettori: tag html
Uno qualunque dei tag html
Esempi:
h1 { color: red; }
a { color:yellow;font-weight: bold; }
ITIS F.Corni
10
Selettori: classi
Con le classi posso associare diversi stili
ad uno stesso tag html
CSS
p.nota { font-size: small } /* carattere piccolo */
p.evidenziato { background-color: yellow; } /* area con sfondo
giallo */
Html
<p class="nota">Questo paragrafo è una nota</p>
<p class="evidenziato">Questo paragrafo è evidenziato in
giallo</p>
ITIS F.Corni
11
Selettore: classi
Una classe può essere associata a più
selettori
CSS
.nota { font-size: small } /* carattere piccolo */
HTML
<p class="nota">Questo paragrafo è una nota</p>
<div class="nota">Questa sezione è una nota</div>
ITIS F.Corni
12
Selettori: identificatori
Definiscono una entità unica all’interno
del documento
CSS
#nota-copyright { font-size: xx-small }
HTML
<p id="nota-copyright">Questo paragrafo è la nota per il
copyright</p>
ITIS F.Corni
13
Selettori: raggruppamento
Se la stessa regola deve essere applicata a
più selettori posso usare il raggruppamento:
Esempio
h1, h2, h3, h4, h5, h6 { font-family: sans-serif }
Equivale a:
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
h4 { font-family: sans-serif }
h5 { font-family: sans-serif }
h6 { font-family: sans-serif }
ITIS F.Corni
14
Proprietà
ITIS F.Corni
Specificano la caratteristica che deve essere
impostata, riguardano: font, colore, sfondo,
testo, box model, classificazione, lunghezze
percentuali, colori e url.
15
Proprietà: font
font-family
sintassi: font-family: <nome font> *|| <font generico>
<nome font> qualsiasi nome di font
<font generico> uno tra serif, sans-serif, cursive, fantasy,
monospace
Es. p { font-family: verdana, helvetica, "Trebuchet MS", sans-serif }
Il browser cerca i font da sinistra a destra e applica il primo
disponibile
font-style
sintassi: font-style: normal | italic | oblique;
font-variant
sintassi: font-variant: normal | small-caps
ITIS F.Corni
16
Proprietà: font
font-weight
sintassi: font-weight: normal | bold | bolder | lighter | 100 | 200 |
300 | 400 | 500 | 600 | 700 | 800 | 900
font-size
sintassi: font-size: <dimensione assoluta> | <dimensione relativa>
<dimensione assoluta> xx-small | x-small | small | medium | large |
x-large | xx-large | <una dimensione in punti (pt)o pixels (px)>
<dimensione relativa> larger | smaller| <una dimensione in emheight (em)>|<una percentuale>
Line-height
sintassi: font-size: normal | <moltiplicatore dimensione del font> |
<un valore con unità di misura> | <una percentuale>
ITIS F.Corni
17
Proprietà: font
font
La proprietà font può essere utilizzata come un metodo
veloce per definire le diverse proprietà font-family, font-style,
ecc.
Quando si utilizza la proprietà font è necessario specificare
almeno i valori per le proprietà font-size e font-family.
Esempio:
p.paragrafo-speciale { font: bold 1.00em/1.50em verdana,
helvetica, "Trebuchet MS", sans-serif }
/* la barra dopo la dimensione serve per specificare il lineheight */
ITIS F.Corni
18
Proprietà: testo
word-spacing
sintassi: word-spacing: normal | <lunghezza>
letter-spacing
sintassi: letter-spacing: normal | <lunghezza>
text-indentation
sintassi: text-indentation: <lunghezza>|<percentuale>
vertical-align
sintassi: vertical-align: baseline | sub | super | top | text-top |
middle | bottom | text-bottom | <percentuale>
text-decoration
sintassi: text-decoration:none | [ underline || overline || linethrough || blink ]
ITIS F.Corni
19
Proprietà: testo
text-transform
sintassi: text-transform: none | capitalize | uppercase |
lowercase
text-align
sintassi: text-align: left | right | center | justify
ITIS F.Corni
Esempio 1
Esempio 2
20
Proprietà: colore
color
sintassi: color: <colore>
<colore> può essere:
Una costante
black | navy | blue | maroon | purple | green | red | teal | fuchsia |
olive | gray | lime | aqua | silver | yellow | white
#rrggbb: ad esempio #CC6600
#rgb: ad esempio #C60 (#abc = #aabbcc)
rgb(r,g,b): dove r,g,b possono variare da 0 a 255. Ad esempio
rgb(204,102,0)
rgb(r%,g%,b%): dove r,g,b possono variare da 0 a 100. Ad
esempio rgb(80%,40%,0)
ITIS F.Corni
21
Proprietà: background
background-color
sintassi: background-color: <color> | transparent
<color>: un colore specificato come nella proprietà color
background-image
sintassi: background-image: <image>
<image>: url dell'immagine Es. url(images/sfondo.gif)
background-repeat
sintassi: background-repeat: repeat | repeat-x | repeat-y | no-repeat
l'immagine di sfondo può essere ripetuta, ripetuta orizzontalmente,
ripetuta verticalmente, non essere ripetuta (immagine di sfondo
unica)
ITIS F.Corni
22
Proprietà: background
background-attachment
sintassi: background-attachmente: scroll | fixed
l'immagine si muove col testo ovvero rimane fissa.
background-position
sintassi: background-position: [<percentuale> | <lunghezza>] | [top |
center | bottom] || [left | center | right]
la posizione dell'immagine di sfondo può essere specificata con riferimento
all'angolo superiore sinistro, sia attraverso unità percentuali o di lunghezza
sia attraverso keyword che indicano l’allineamento in orizzontale o
verticale.
Come con la proprietà font è possibile raggruppare tutti i valori per lo sfondo in
un’unica proprietà background.Es.
body { background:#FFFFFF url(/img/sfondo.gif) no-repeat fixed top right; }
La proprietà background si applica a tutti gli elementi di un documento html
ITIS F.Corni
23
Il box model
ITIS F.Corni
Ogni elemento del documento html può
essere visto come un box caratterizzato da:
24
Proprietà: Margini
margin-top: <valore>
margin-bottom:<valore>
margin-left: <valore>
margin-right: <valore>
margin: <valore>
In tutti i casi <valore>può essere:
ITIS F.Corni
un valore numerico con unità di misura
un valore in percentuale
Auto
Specificando un solo valore, si impostano tutti e quattro i margini al valore
specificato. Specificando due valori, si impostano il margine superiore e
inferiore al primo valore indicato, il margine destro e sinistro al secondo
valore indicato. Specificando quattro valori, si impostano il margine
superiore, quello destro, quello inferiore e quello sinistro rispettivamente (in
senso orario a partire dal margine superiore).
Pagina di esempio
25
Proprietà: padding
padding-top: <valore>
padding-bottom:<valore>
padding-left: <valore>
padding-right: <valore>
padding: <valore>
In tutti i casi <valore>può essere:
ITIS F.Corni
un valore numerico con unità di misura
un valore in percentuale
Specificando un solo valore, si imposta il padding di tutti e quattro i lati al
valore specificato. Specificando due valori, si imposta il padding dei lati
superiore e inferiore al primo valore indicato, il padding dei lati destro e
sinistro al secondo valore indicato. Specificando quattro valori, si imposta il
il padding del lato superiore, del lato destro, del lato inferiore e del lato
sinistro rispettivamente (in senso orario a partire dal margine superiore).
Pagina di esempio
26
Proprietà: border
sintassi: border: <spessore> || <stile> || <colore>
<spessore> può essere:
thin | medium | thick | <lunghezza>
<stile> può essere:
none | dotted | dashed | solid | double | groove | ridge | inset |
outset
<colore> può essere un colore specificato come nella proprietà
color
ITIS F.Corni
È possibile specificare i valori di cui sopra per ogni lato del
bordo con le proprietà border-top, border-bottom, border-left,
border-right. Esempio
27
Proprietà: width e height
width: <valore>
height:<valore>
In tutti i casi <valore>può essere:
ITIS F.Corni
un valore numerico con unità di misura
un valore in percentuale
Auto
28
Unità per le dimensioni
ITIS F.Corni
in (inches - pollici): classica misura del sistema metrico americano.
Praticamente nullo il suo valore su un supporto come un browser web
viste le variabili relative a risoluzione e ampiezza dei monitor.
cm (centimetri): stesso discorso visto per i pollici, la difficoltà
maggiore sta nella resa su monitor, che è altra cosa rispetto alla carta
stampata.
mm (millimetri): vedi centimetri.
pt (points - punti): unità di misura tipografica destinata
essenzialmente a definire la dimensione dei font.
pc (picas): unità poco usata. 1 pica equivale a 12 punti.
em (em-height): unità di misura spesso usata dagli autori CSS. 1 em
equivale all'altezza media di un carattere per un dato font. E' un unità
di misura relativa.
ex (ex-height): poco usata. 1 ex equivale all'altezza del carattere x
minuscolo del font scelto.
px (pixels): unità di misura ideale su monitor. E' quella più usata e
facile da comprendere.
29
Riferimenti
ITIS F.Corni
Introduzione ai CSS
HTML.IT
30
Scarica
