Sommario
Accessibilità
di un sito web
CSS
Informatica Generale: laboratorio di
informatica
Accessibilità
Descrivere sempre le immagini
Utilizzare contrasti di colore marcati
Font di dimensioni abbondanti
Usare per i link una frase che abbia senso
Identificare le intestazioni delle tabelle
contenenti dati
Prevedere l’inserimento di un sommario o
di una mappa del sito
Informatica Generale: laboratorio di
informatica
Accessibilità
Organizzare i contenuti delle pagine in
modo chiaro e logico
Fornire un titolo a tutti gli eventuali frames
Controllare la portabilità del proprio lavoro
usando diversi Browser.
Usare se possibile i fogli di stile
Informatica Generale: laboratorio di
informatica
CSS
Cascading Style Sheet
Fogli sovrapposti di stile.
Con fogli di stile si intendono modelli o stili che
si applicano a varie parti del documento e che
descrivono il modo in cui viene reso.
Supportati dai principali browser: Netscape &
Explorer
Informatica Generale: laboratorio di
informatica
Fogli di stile
Si basano su regole che selezionano un
elemento HTML e ne dichiarano le
caratteristiche stilistiche.
In alcuni casi usando i fogli di stile e’
possibile modificare proprieta’ degli
elementi che con l’HTML semplice non e’
possibile fare.
Informatica Generale: laboratorio di
informatica
Come usare i fogli di stile
Ci sono due modalita’ per usare i fogli di
stile che abbiamo creato:
Esterna.
Definisco il mio foglio di stile in un
file esterno al documento HTML in cui verra’
usato;
Interna.
Definisco il foglio di stile nello stesso
documento HTML in cui verra’ usato.
Informatica Generale: laboratorio di
informatica
Fogli di stile interno
Le regole definite nel foglio di stile
vengono incluse nella sezione <head> del
documento HTML.
Per poter includere nell’intestazione del
documento HTML il foglio di stile e’
necessario usare il tag
<STYLE>
Informatica Generale: laboratorio di
informatica
<STYLE>
<head>
<title>
</title>
<style>
Definisco regole del foglio di stile
</style>
</head>
Informatica Generale: laboratorio di
informatica
Fogli di stile esterno
Le regole definite nel foglio di stile
vengono incluse in un documento distinto
da quello HTML in cui verra’ usato.
I fogli di stile esterni sono file in cui sono
dichiarate le regole di stile e la cui
estensione e’ .css
Informatica Generale: laboratorio di
informatica
Fogli di stile esterno
Per comunicare al browser che in un
determinato documento HTML vogliamo
usare un foglio di stile esterno e’
necessario usare il tag
<LINK href=“….” rel=“…”>
con gli attributi href e rel.
Nell’intestazione del documento HTML.
Informatica Generale: laboratorio di
informatica
<LINK>
<head>
<title>
</title>
Path del file che
contiene le
regole
<link href=“nomeFile.css” rel=“stylesheet”>
</head>
Relazione che collega il
documento HTML al file
in href
Differenze
Usare un foglio di stile interno permette di
definire regole di stile valide solo per il
documento HTML in cui e’ specificato.
Usare un foglio di stile esterno permette di
definire regole di stile valide per piu’
documenti HTML, ad esempio per un
intero sito Web.
Informatica Generale: laboratorio di
informatica
Regole di stile
Sintassi delle regole
Proprietà
Valore
Sel { Prop1: Val1; …. Propn:Valn}
Selettore
Dichiarazione
Informatica Generale: laboratorio di
informatica
Regole di stile: Semantica
Selettore:
elemento HTML (A, IMG) a cui deve
essere applicata la regola di stile.
Dichiarazione:
descrive il Valore che una certa Proprietà
(size, height) dell’elemento deve avere
Informatica Generale: laboratorio di
informatica
Esempio file style.css
BODY{
margin-left : .5cm;
margin-right : .5cm;
color : #000066;
font-family : Verdana,Arial,Helvetica;
font-size : 10pt;
}
A:LINK{
text-decoration : none;
color : #990066;
}
A:VISITED{
text-decoration : none;
color : #9999ff;
}
Informatica Generale: laboratorio di
informatica
Font e CSS
CSS permette di controllare diverse
proprietà dei font:
1.
2.
3.
4.
5.
6.
7.
Dimensione
Tipo
Peso
Indentazione
Colore
Interlinea
Spazio tra le lettere di una parola
Informatica Generale: laboratorio di
informatica
Font Proprietà
Font-family
Font-size
Font-weight
Line-height
Letter-spacing
Text-indent
Color
Informatica Generale: laboratorio di
informatica
Font-Family
Questa proprietà ci permette di specificare
quale tipo di font vogliamo usare. (attributo
face di font)
Esempio
Paragrafo con font di tipo Verdana
P{Font-family: Verdana}
Informatica Generale: laboratorio di
informatica
Font-Family II
Se il font specificato non e’ disponibile il
browser userà un font standard.
Per questo motivo e’ possibile specificare
font alternativi quindi come valore di fontfamily si ha una lista di possibili font.
Esempio
P{Font-family: Verdana, ARIAL, Sans-Serif}
Valori alternativi separati da virgole
Informatica Generale: laboratorio di
informatica
Font-weight
Questa proprietà consente di specificare
il formato del font. I valori più usati sono:
Normal
Bold
Bolder
Lighter
Esempio
P{Font-weight: Bold}
Paragrafo con font in grassetto
Informatica Generale: laboratorio di
informatica
Font-size
Proprietà
consente di specificare le
dimensioni del font utilizzando una
delle seguenti unità di misura
Pixel
Punto
Pollice
Centimetro Millimetro
px
pt
in
cm
Informatica Generale: laboratorio di
informatica
mm
Font-size
Esempio
Paragrafo con testo di 13 pollici
P{Font-size: 13in}
Paragrafo con testo di 13 pixel
P{Font-size: 13px}
Paragrafo con testo di 13 cm
P{Font-size: 13cm}
Informatica Generale: laboratorio di
informatica
Text-indent
Proprietà che permette di impostare il
livello di indentazione della prima riga di
testo di un paragrafo. I valori più usati
sono i pixel (indicati con px)
Esempio
P{Text-indent: 18px}
Paragrafo con prima riga distante 18pixel
dal margine sinistro
Informatica Generale: laboratorio di
informatica
Color
Proprieta’ che definisce il colore del testo
di un elemento. Possibili valori o i nomi dei
colori o i valori esadecimali.
Esempio
P{color: #FFFFFF}
Paragrafo con testo in bianco
Informatica Generale: laboratorio di
informatica
Esempio: Headings
h1 {color:blue}
h2 {color:navy}
h3 {color:olive}
h4 {color:purple}
h5 {color:maroon}
Sommario
Proprietà
text
Proprietà margin
Proprietà padding
Proprietà border
Proprietà background
Informatica Generale: laboratorio di
informatica
text-decoration
Sintassi
{text-decoration:valori }
Possibili valori:
underline
overline
testo sottolineato
testo con riga sopra
line-through testo sbarrato
blink
alternato visibile e invisibile
none
nessuno
Informatica Generale: laboratorio di
informatica
Esempio: text-decoration
H1{text-decoration:underline}
H2{text-decoration:line-through}
H3{text-decoration:blink}
H4{text-decoration:overline}
……
…………..
<H1>
first title</h1>
<H2>
second title</h2>
<H3>
third title</h3>
<H4>
fourth title</h4>
Informatica Generale: laboratorio di
informatica
text-transform
Sintassi
{text-transform: valori }
Possibili valori:
capitalize
maiuscola la prima lettera di tutte le
parole
uppercase
tutto il testo in maiuscolo
lowercase
tutto il testo in minuscolo
none
nessuno
Informatica Generale: laboratorio di
informatica
Esempio: text-transform
H1{text-transform:capitalize}
H2{text-transform:uppercase}
H3{text-transform:lowercase}
H4{text-transform:none}
…………….
……….
<H1>
first title</h1>
<H2>
second title</h2>
<H3>
third title</h3>
<H4>
fourth title</h4>
Informatica Generale: laboratorio di
informatica
text-align
Sintassi
{text-align: valori }
Possibili valori:
left
right
testo allineato a sinistra
(valore di default)
testo allineato a destra
center
testo allineato al centro
justify
testo giustificato
Informatica Generale: laboratorio di
informatica
Esempio: text-align
H1{text-align:left}
H2{text-align:right}
H3{text-align:center}
H4{text-align:justify}
…………….
……….
<H1>
first title</h1>
<H2>
second title</h2>
<H3>
third title</h3>
<H4>
fourth title</h4>
Informatica Generale: laboratorio di
informatica
border-style
Sintassi {border-style: valori }
Possibili valori:
solid bordo singolo
double bordo doppio
inset ombreggiato dal basso
outset ombreggiato dall’alto
groove bassorilievo
ridge altorilievo
Informatica Generale: laboratorio di
informatica
border-style
Sintassi {border-style: valori }
Altri possibili valori:
dotted bordo fatto da puntini
dashed bordo fatto da piccole linee
none nessun bordo
Informatica Generale: laboratorio di
informatica
Esempio: border-style
H1{border-style:solid}
H2{border-style:double}
H3{border-style:inset}
H4{border-style:outset}
H5{border-style:groove}
H6{border-style:ridge}
<H1>first title</h1>
<H2>second title</h2>
<H3>second title</h3>
<H4>second title</h4>
<H5>second title</h5>
<H6>second title</h6>
Informatica Generale: laboratorio di
informatica
border-color
Sintassi {border-color: valori }
Possibili valori:
colorname nome del colore
#$$$$$$ codifica esadecimale del colore
rgb(0-255,0-255,0-255) codifica decimale
del colore
Informatica Generale: laboratorio di
informatica
Esempio: border-color
H1{border-style:solid;
border-color:red}
H2{border-style:solid;
border-color:rgb(22,234,54)}
H3{border-style:solid;
border-color:#234244}
<H1>first title</h1>
<H2>second title</h2>
<H3>third title</h3>
Informatica Generale: laboratorio di
informatica
border-width
Sintassi {border-width: valori }
Possibili valori:
thin, medium,thick ampiezze predefinite
di solito 'thin' <='medium' <= 'thick'
length ampiezza espressa in pixel
Informatica Generale: laboratorio di
informatica
background-color
Sintassi {background-color: valori }
Possibili valori:
colorname nome del colore
#$$$$$$ codifica esadecimale del colore
rgb(0-255,0-255,0-255) codifica decimale
del colore
Informatica Generale: laboratorio di
informatica
Esempio: background-color
H1{backgroundcolor:yellow}
H2{backgroundcolor:red}
…………..
<H1>
first title</h1>
<H2>
second title</h2>
Informatica Generale: laboratorio di
informatica
background-image
Sintassi {background-image: valori }
Possibili valori:
url(urlName) urlName cammino della
immagine
Informatica Generale: laboratorio di
informatica
Esempio: background-image
H1{backgroundimage:url(img1.jpg)}
H2{backgroundimage:url(img2.jpg)}
…………..
<H1>
first title</h1>
<H2>
second title</h2>
Informatica Generale: laboratorio di
informatica
background-repeat
Sintassi {background-repeat: valori }
Possibili valori:
repeat l’immagine è ripetuta sia
orrizontalmente che verticalmente
repeat-x l’immagine è ripetuta solo
orrizontalmente
repeat-y l’immagine è ripetuta solo
verticalmente
no-repeat l’immagine non è ripetuta
Informatica Generale: laboratorio di
informatica
Sommario
Proprietà
Proprietà
CSS
delle liste
del cursore
interni: peculiarità
proprietà link
Informatica Generale: laboratorio di
informatica
list-style-type
Sintassi {list-style-type: valori }
Possibili valori:
disc, square, circle, lower-alpha, lowerlatin, lower-roman, decimal, upperalpha, upper-latin, upper-roman
Informatica Generale: laboratorio di
informatica
Esempio
Disc
square
o
circle
i.
lower-roman
a. lower-alpha
………………..
OL { list-style-type:lower-alpha}
<OL>
<LI>first item
<LI>second item
<LI>third item
</OL>
Informatica Generale: laboratorio di
informatica
list-style-image
Sintassi {list-style-image: valori }
Possibili
valori:
url(URI) cammino all’immagine
Con URI = Path oppure URL (Web)
Informatica Generale: laboratorio di
informatica
Esempio
OL { list-styleimage:url(book.gif)}
<OL>
<LI>first item
<LI>second item
<LI>third item
</OL>
Informatica Generale: laboratorio di
informatica
list-style-position
Sintassi {list-style-position: valori }
Possibili
valori:
inside il testo delle linee successive
alla prima non sono allineate con la prima
outside il testo delle linee successive
alla prima sono allineate con la prima
Informatica Generale: laboratorio di
informatica
Esempio
OL { list-styleposition:inside}
<OL>
<LI>la seconda riga torna a
capo allineate con la
prima?
<LI>second item
<LI>third item
</OL>
Informatica Generale: laboratorio di
informatica
Esempio
OL { list-styleposition:outside}
<OL>
<LI>la seconda riga torna a
capo allineate con la
prima?
<LI>second item
<LI>third item
</OL>
Informatica Generale: laboratorio di
informatica
Cursor
Sintassi {cursor: valori }
Possibili valori:
default dipende dal sistema
pointer il cursore come dito indice
move le quattro frecce ad indicare
movimento
wait la clessidra
help un punto interrogativo
url(URI) un’immagine
Con URI = Path oppure URL (Web)
Informatica Generale: laboratorio di
informatica
CSS interni: Peculiarità
1.
2.
3.
4.
5.
Regola semplice:
Sel { Prop1: Val1; …. Propn:Valn}
Regole con liste di selettori
Regole con discendenti
Regole con classi
Regole con pseudo-classi
Informatica Generale: laboratorio di
informatica
Regole con liste di selettori
Se voglio applicare le stesse proprietà a
selettori diversi uso la seguente sintassi:
ListaSel{Prop1: Val1; …. Propn:Valn}
Dove ListaSel =
Selettore1, Selettore2, …., Selettorem
Informatica Generale: laboratorio di
informatica
Esempio: liste di selettori
<style type="text/css">
p, h1, div{background: #0000ff}
</style>
….
<h1>Questo e' un heading
</h1>
<p>Questo e' un paragrafo
</p>
<div>Questo e' un div
</div>
Informatica Generale: laboratorio di
informatica
Regole con discendenti
Se voglio applicare delle proprietà ad un
selettore che pero’ e’ obbligatoriamente
discendente di un altro uso la seguente
sintassi:
ListaSel{Prop1: Val1; …. Propn:Valn}
Dove ListaSel =
Selettore1 Selettore2 Selettorem
Informatica Generale: laboratorio di
informatica
Esempio: discendenti
<style type="text/css">
p{color: green}
h1 p{color: blue}
</style>
…….
<p>Questo e' un heading</p>
<h1><p>
Questo e' un heading
discendente da un paragrafo
</p>
</h1>
Informatica Generale: laboratorio di
informatica
Regole con classi
Se voglio applicare delle proprietà ad un
selettore ma non ogni qualvolta viene
usato, uso la seguente sintassi:
Sel.Name{Prop1: Val1; …. Propn:Valn}
Dove Name = Nome che mi servira’ da
identificativo quando vorro’ usare il Sel con
le proprieta’ definite dalla regola
Informatica Generale: laboratorio di
informatica
Regole con classi
Esempio:
P.pippo{color:red; text-align:center}
Per poter usare il selettore P di classe pippo
devo fare ricorso ad un attributo standard di
tutti gli elementi HTML class
Sintassi:
<Sel class=“nomeDellaClasseDelSelettore”>
Informatica Generale: laboratorio di
informatica
Esempio: classi
<style type="text/css">
p{color: green}
p.pippo{color: blue}
</style>
…….
<p>Questo e' un heading</p>
<p class=“pippo”>
Questo e' un paragrafo di
classe pippo
</p>
Informatica Generale: laboratorio di
informatica
Regole con pseudo-classi
Se voglio applicare delle proprietà ad un
selettore ma solo in conseguenza di
alcune azioni dell’utente uso la seguente
sintassi:
Sel:Keyword{Prop1: Val1; …. Propn:Valn}
Dove Keyword = parola chiave del
linguaggio usato nei css
Informatica Generale: laboratorio di
informatica
Pseudo-classi :Keyword
Sel:Keyword{Prop1: Val1; …. Propn:Valn}
Valori possibili per keyword:
link
visited
active
hover
I primi due si applicano al selettore dei link,
mentre gli altri si applicano a tutti i selettori.
Informatica Generale: laboratorio di
informatica
Esempio: link, visited
<style type="text/css">
a:link{color: green}
a:visited{color: blue}
</style>
…….
<a>Questo e' un link</a>
Informatica Generale: laboratorio di
informatica
Esempio: hover
<style type="text/css">
a:link{color: green}
a:hover{color: blue}
</style>
…….
<a>Questo e' un link</a>
hover: quando il mouse passa
sopra il link
Informatica Generale: laboratorio di
informatica
Esempio: active
<style type="text/css">
a:link{color: green}
a:active{color: blue}
</style>
…….
<a>Questo e' un link</a>
active: quando viene premuto il
pulsante del mouse
Informatica Generale: laboratorio di
informatica
Combinazioni: classi & pseudo
Sel.classe:Keyword{Prop1:Val1; ..;Propn:Valn}
Esempio:
<style type="text/css">
a:link{color: green}
a.pippo:link{color:red}
</style>
…….
<a class=“pippo”>link</a>
<a>link2</a>
Informatica Generale: laboratorio di
informatica
Esempio
h1, h2, h3, h4, h5{color: red}
h1, h2, h3 {color: blue}
h1 {color: green}
Se ho un elemento usato
in più regole per la
stessa proprietà il browser
prende l’ultimo valore
definito.
Informatica Generale: laboratorio di
informatica
Scarica
