Sommario Accessibilit di un sito web CSS 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. Informatica Generale: laboratorio di informatica
<LINK> <head> <title> </title> Path del file che contiene le regole <link href=“nome. File. 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 Valore Proprietà Sel { Prop 1: Val 1; …. 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 : . 5 cm; margin-right : . 5 cm; color : #000066; font-family : Verdana, Arial, Helvetica; font-size : 10 pt; } A: LINK{ text-decoration : none; color : #990066; } A: VISITED{ text-decoration : none; color : #9999 ff; } 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 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: 13 in} Paragrafo con testo di 13 pixel P{Font-size: 13 px} Paragrafo con testo di 13 cm P{Font-size: 13 cm} 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: 18 px} Paragrafo con prima riga distante 18 pixel 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 h 1 {color: blue} h 2 {color: navy} h 3 {color: olive} h 4 {color: purple} h 5 {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 H 1{text-decoration: underline} H 2{text-decoration: line-through} H 3{text-decoration: blink} H 4{text-decoration: overline} …… …………. . <H 1> first title</h 1> <H 2> second title</h 2> <H 3> third title</h 3> <H 4> fourth title</h 4> 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 H 1{text-transform: capitalize} H 2{text-transform: uppercase} H 3{text-transform: lowercase} H 4{text-transform: none} ……………. <H 1> first title</h 1> <H 2> second title</h 2> <H 3> third title</h 3> <H 4> fourth title</h 4> 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 H 1{text-align: left} H 2{text-align: right} H 3{text-align: center} H 4{text-align: justify} ……………. <H 1> first title</h 1> <H 2> second title</h 2> <H 3> third title</h 3> <H 4> fourth title</h 4> 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 H 1{border-style: solid} H 2{border-style: double} H 3{border-style: inset} H 4{border-style: outset} H 5{border-style: groove} H 6{border-style: ridge} <H 1>first title</h 1> <H 2>second title</h 2> <H 3>second title</h 3> <H 4>second title</h 4> <H 5>second title</h 5> <H 6>second title</h 6> 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) codifica decimale del colore Informatica Generale: laboratorio di informatica
Esempio: border-color H 1{border-style: solid; border-color: red} H 2{border-style: solid; border-color: rgb(22, 234, 54)} H 3{border-style: solid; border-color: #234244} <H 1>first title</h 1> <H 2>second title</h 2> <H 3>third title</h 3> 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) codifica decimale del colore Informatica Generale: laboratorio di informatica
Esempio: background-color H 1{backgroundcolor: yellow} H 2{backgroundcolor: red} …………. . <H 1> first title</h 1> <H 2> second title</h 2> Informatica Generale: laboratorio di informatica
background-image Sintassi {background-image: valori } • Possibili valori: url(url. Name) url. Name cammino della immagine Informatica Generale: laboratorio di informatica
Esempio: background-image H 1{backgroundimage: url(img 1. jpg)} H 2{backgroundimage: url(img 2. jpg)} …………. . <H 1> first title</h 1> <H 2> second title</h 2> 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à 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, 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. Regola semplice: Sel { Prop 1: Val 1; …. 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: Lista. Sel{Prop 1: Val 1; …. Propn: Valn} Dove Lista. Sel = Selettore 1, Selettore 2, …. , Selettorem Informatica Generale: laboratorio di informatica
Esempio: liste di selettori <style type="text/css"> p, h 1, div{background: #0000 ff} </style> …. <h 1>Questo e' un heading </h 1> <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: Lista. Sel{Prop 1: Val 1; …. Propn: Valn} Dove Lista. Sel = Selettore 1 Selettore 2 Selettorem Informatica Generale: laboratorio di informatica
Esempio: discendenti <style type="text/css"> p{color: green} h 1 p{color: blue} </style> ……. <p>Questo e' un heading</p> <h 1><p> Questo e' un heading discendente da un paragrafo </p> </h 1> 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{Prop 1: Val 1; …. 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=“nome. Della. Classe. Del. Selettore”> 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{Prop 1: Val 1; …. Propn: Valn} Dove Keyword = parola chiave del linguaggio usato nei css Informatica Generale: laboratorio di informatica
Pseudo-classi : Keyword Sel: Keyword{Prop 1: Val 1; …. 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{Prop 1: Val 1; . . ; Propn: Valn} Esempio: <style type="text/css"> a: link{color: green} a. pippo: link{color: red} </style> ……. <a class=“pippo”>link</a> <a>link 2</a> Informatica Generale: laboratorio di informatica
Esempio h 1, h 2, h 3, h 4, h 5{color: red} h 1, h 2, h 3 {color: blue} h 1 {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
- Slides: 67
