Informatica Generale: laboratorio di informatica Sommario Accessibilità di un sito web CSS.

Informatica Generale: laboratorio di informatica

Sommario

Accessibilità di un sito web

CSS


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


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


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


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.


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.


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>


<STYLE>

<head>

<title>

</title>

<style>

Definisco regole del foglio di stile

</style>

</head>


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


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


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.


Regole di stileSintassi delle regole

Sel { Prop1: Val1; …. Propn:Valn}

Dichiarazione

Proprietà Valore

Selettore


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


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;}


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


Font Proprietà

Font-family Font-size Font-weight Line-height Letter-spacing Text-indent Color


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}


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


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


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


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}


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


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}


Sommario

Proprietà textProprietà marginProprietà paddingProprietà borderProprietà background


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


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>


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


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>


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


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>


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


border-styleSintassi {border-style: valori } Altri possibili valori:

dotted bordo fatto da puntini

dashed bordo fatto da piccole linee

none nessun bordo


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>


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


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>


border-widthSintassi {border-width: valori }

Possibili valori:

thin, medium,thick ampiezze predefinite di solito 'thin' <='medium' <= 'thick'

length ampiezza espressa in pixel


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


Esempio: background-color

H1{background-color:yellow}

H2{background-color:red}

…………..

<H1>

first title</h1>

<H2>

second title</h2>


background-image

Sintassi {background-image: valori }

Possibili valori:

url(urlName) urlName cammino della immagine


Esempio: background-imageH1{background-

image:url(img1.jpg)}

H2{background-image:url(img2.jpg)}

…………..

<H1>

first title</h1>

<H2>

second title</h2>


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


Sommario

Proprietà delle liste

Proprietà del cursore

CSS interni: peculiarità proprietà link


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


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>


list-style-image

Sintassi {list-style-image: valori }

Possibili valori:url(URI) cammino all’immagine

Con URI = Path oppure URL (Web)


Esempio

OL { list-style-image:url(book.gif)}

<OL>

<LI>first item

<LI>second item

<LI>third item

</OL>


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


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>


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>


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)


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


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


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>


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


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>


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


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”>


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>


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


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.


Esempio: link, visited

<style type="text/css">a:link{color: green}a:visited{color: blue}</style>…….

<a>Questo e' un link</a>


Esempio: hover

<style type="text/css">a:link{color: green}a:hover{color: blue}</style>…….


hover: quando il mouse passasopra il link


Esempio: active

<style type="text/css">a:link{color: green}a:active{color: blue}</style>…….


active: quando viene premuto ilpulsante del mouse


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>


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.

Informatica Generale: laboratorio di informatica Sommario Accessibilità di un sito web CSS.

Documents

Transcript of Informatica Generale: laboratorio di informatica Sommario Accessibilità di un sito web CSS.