Informatica Generale: laboratorio di informatica
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.
<LINK><head>
<title>
</title>
<link href=“nomeFile.css” rel=“stylesheet”>
</head>
Path del file che contiene le regole
Relazione che collega il documento HTML al file in href
Informatica Generale: laboratorio di informatica
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 stileSintassi delle regole
Sel { Prop1: Val1; …. Propn:Valn}
Dichiarazione
Proprietà Valore
Selettore
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.cssBODY{
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. Dimensione
2. Tipo
3. Peso
4. Indentazione
5. Colore
6. Interlinea
7. 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 font-family 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 mm
Informatica Generale: laboratorio di informatica
Font-sizeEsempio
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
Esempio: Headings
h1 {color:blue}
h2 {color:navy}
h3 {color:olive}
h4 {color:purple}
h5 {color:maroon}
Informatica Generale: laboratorio di informatica
Sommario
Proprietà textProprietà marginProprietà paddingProprietà borderProprietà background
Informatica Generale: laboratorio di informatica
text-decorationSintassi
{text-decoration:valori }
Possibili valori:
underline testo sottolineato
overline testo con riga sopra
line-through testo sbarrato
blink alternato visibile e invisibile
none nessuno
Informatica Generale: laboratorio di informatica
Esempio: text-decorationH1{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-transformSintassi
{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-alignSintassi
{text-align: valori } Possibili valori:
left testo allineato a sinistra
(valore di default)
right testo allineato a destra
center testo allineato al centro
justify testo giustificato
Informatica Generale: laboratorio di informatica
Esempio: text-alignH1{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-styleSintassi {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-styleSintassi {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-styleH1{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-colorSintassi {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-widthSintassi {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-colorSintassi {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{background-color:yellow}
H2{background-color: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-imageH1{background-
image:url(img1.jpg)}
H2{background-image:url(img2.jpg)}
…………..
<H1>
first title</h1>
<H2>
second title</h2>
Informatica Generale: laboratorio di informatica
background-repeatSintassi {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à delle liste
Proprietà del cursore
CSS interni: peculiarità proprietà link
Informatica Generale: laboratorio di informatica
list-style-type
Sintassi {list-style-type: valori }
Possibili valori:
disc, square, circle, lower-alpha, lower-latin, lower-roman, decimal, upper-alpha, upper-latin, upper-roman
Informatica Generale: laboratorio di informatica
Esempio Disc squareo 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-style-image: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-style-position: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-style-position: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
CursorSintassi {cursor: valori }
Possibili valori:default dipende dal sistemapointer il cursore come dito indicemove le quattro frecce ad indicare
movimentowait la clessidrahelp un punto interrogativourl(URI) un’immagine
Con URI = Path oppure URL (Web)
Informatica Generale: laboratorio di informatica
CSS interni: Peculiarità
1. Regola semplice:
Sel { Prop1: Val1; …. Propn:Valn}
2. Regole con liste di selettori
3. Regole con discendenti
4. Regole con classi
5. 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 headingdiscendente 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 classiEsempio:
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 diclasse 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 passasopra 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 ilpulsante del mouse
Informatica Generale: laboratorio di informatica
Combinazioni: classi & pseudoSel.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
Esempioh1, 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.