La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "Informatica Generale: laboratorio di informatica Sommario Accessibilità di un sito web CSS."— Transcript della presentazione:

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

2 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 linserimento di un sommario o di una mappa del sito

3 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

4 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

5 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 lHTML semplice non e possibile fare.

6 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.

7 Informatica Generale: laboratorio di informatica Fogli di stile interno Le regole definite nel foglio di stile vengono incluse nella sezione del documento HTML. Per poter includere nellintestazione del documento HTML il foglio di stile e necessario usare il tag

8 Informatica Generale: laboratorio di informatica Definisco regole del foglio di stile

9 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

10 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 con gli attributi href e rel. Nellintestazione del documento HTML.

11 Path del file che contiene le regole Relazione che collega il documento HTML al file in href

12 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.

13 Informatica Generale: laboratorio di informatica Regole di stile Sintassi delle regole Sel { Prop1: Val1; …. Propn:Valn} Dichiarazione Proprietà Valore Selettore

14 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) dellelemento deve avere

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

16 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

17 Informatica Generale: laboratorio di informatica Font Proprietà Font-family Font-size Font-weight Line-height Letter-spacing Text-indent Color

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

19 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

20 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

21 Informatica Generale: laboratorio di informatica Font-size Proprietà consente di specificare le dimensioni del font utilizzando una delle seguenti unità di misura PixelPuntoPolliceCentimetroMillimetro pxptincmmm

22 Informatica Generale: laboratorio di informatica 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}

23 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

24 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

25 Esempio: Headings h1 {color:blue} h2 {color:navy} h3 {color:olive} h4 {color:purple} h5 {color:maroon}

26 Informatica Generale: laboratorio di informatica Sommario Proprietà text Proprietà margin Proprietà padding Proprietà border Proprietà background

27 Informatica Generale: laboratorio di informatica text-decoration Sintassi {text-decoration:valori } Possibili valori: underlinetesto sottolineato overlinetesto con riga sopra line-throughtesto sbarrato blinkalternato visibile e invisibile nonenessuno

28 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} …… ………….. first title second title third title fourth title

29 Informatica Generale: laboratorio di informatica text-transform Sintassi {text-transform: valori } Possibili valori: capitalizemaiuscola la prima lettera di tutte le parole uppercasetutto il testo in maiuscolo lowercasetutto il testo in minuscolo nonenessuno

30 Informatica Generale: laboratorio di informatica Esempio: text-transform H1{text-transform:capitalize} H2{text-transform:uppercase} H3{text-transform:lowercase} H4{text-transform:none} ……………. ………. first title second title third title fourth title

31 Informatica Generale: laboratorio di informatica text-align Sintassi {text-align: valori } Possibili valori: lefttesto allineato a sinistra (valore di default) righttesto allineato a destra centertesto allineato al centro justifytesto giustificato

32 Informatica Generale: laboratorio di informatica Esempio: text-align H1{text-align:left} H2{text-align:right} H3{text-align:center} H4{text-align:justify} ……………. ………. first title second title third title fourth title

33 Informatica Generale: laboratorio di informatica margin Sintassi {margin: valori } Possibili valori: length dimensione margine espressa in pixel percentage dimensione margine espressa in percentuale auto dimensione margine automatica

34 Informatica Generale: laboratorio di informatica Esempio: margin H1{margin:45px} H2{margin:105px} …………. ……… first title second title

35 Informatica Generale: laboratorio di informatica margin-X Sintassi {margin-X: valori } X = {top, bottom, left, right} Possibili valori: length dimensione margine espressa in pixel percentage dimensione margine espressa in percentuale

36 Informatica Generale: laboratorio di informatica Esempio: margin-X H1{margin-top:45px} H2{margin-left:105px} …………… …………….. first title second title

37 Informatica Generale: laboratorio di informatica margin Sintassi { margin: valore1 valore2 valore3 valore4 } con valore1 dimensione margine alto valore2 dimensione margine destro valore3 dimensione margine basso valore4 dimensione margine sinistro

38 Informatica Generale: laboratorio di informatica Esempio: margin H1{margin:45px 37px 99px 76px} ………………….. ………….. first title second title

39 Informatica Generale: laboratorio di informatica padding Sintassi {padding: valori } Possibili valori: length dimensione margine espressa in misure (cm,pt,px) percentage dimensione margine espressa in percentuale

40 Informatica Generale: laboratorio di informatica Esempio: padding H1{padding:45px} H2{padding:105px} …………. ……… first title second title

41 Informatica Generale: laboratorio di informatica padding-X Sintassi {padding-X: valori } X = {top, bottom, left, right} Possibili valori: length dimensione margine espressa in pixel percentage dimensione margine espressa in percentuale

42 Informatica Generale: laboratorio di informatica Esempio: padding-X H1{padding-top:45px} H2{padding-left:105px} …………… …………….. first title second title

43 Informatica Generale: laboratorio di informatica padding Sintassi { padding: valore1 valore2 valore3 valore4 } con valore1 dimensione margine alto valore2 dimensione margine destro valore3 dimensione margine basso valore4 dimensione margine sinistro

44 Informatica Generale: laboratorio di informatica Esempio: padding H1{padding:45px 37px 99px 76px} ………………….. ………….. first title second title

45 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 dallalto groove bassorilievo ridge altorilievo

46 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

47 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} first title second title

48 Informatica Generale: laboratorio di informatica border-X-style Sintassi {border-X-style: valori } con X= {top, bottom, left, right} Possibili valori: quelli visti per border-style

49 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

50 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} first title second title third title

51 Informatica Generale: laboratorio di informatica border-X-color Sintassi {border-X-color: valori } con X= {top, bottom, left, right} Possibili valori: quelli visti per border-color

52 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

53 Informatica Generale: laboratorio di informatica border-X-width Sintassi {border-X-width: valori } con X= {top, bottom, left, right} Possibili valori: quelli visti per border-width

54 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

55 Informatica Generale: laboratorio di informatica Esempio: background-color H1{background- color:yellow} H2{background- color:red} ………….. first title second title

56 Informatica Generale: laboratorio di informatica background-image Sintassi {background-image: valori } Possibili valori: url(urlName) urlName cammino della immagine

57 Informatica Generale: laboratorio di informatica Esempio: background-image H1{background- image:url(img1.jpg)} H2{background- image:url(img2.jpg)} ………….. first title second title

58 Informatica Generale: laboratorio di informatica background-repeat Sintassi {background-repeat: valori } Possibili valori: repeat limmagine è ripetuta sia orrizontalmente che verticalmente repeat-x limmagine è ripetuta solo orrizontalmente repeat-y limmagine è ripetuta solo verticalmente no-repeat limmagine non è ripetuta

59 Informatica Generale: laboratorio di informatica Sommario Proprietà delle liste Proprietà del cursore CSS interni: peculiarità proprietà link

60 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

61 Informatica Generale: laboratorio di informatica Esempio Disc square o circle i. lower-roman a. lower-alpha ……………….. OL { list-style-type:lower-alpha} first item second item third item

62 Informatica Generale: laboratorio di informatica list-style-image Sintassi {list-style-image: valori } Possibili valori: url(URI) cammino allimmagine Con URI = Path oppure URL (Web)

63 Informatica Generale: laboratorio di informatica Esempio OL { list-style- image:url(book.gif)} first item second item third item

64 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 s ono allineate con la prima

65 Informatica Generale: laboratorio di informatica Esempio OL { list-style- position:inside} la seconda riga torna a capo allineate con la prima? second item third item

66 Informatica Generale: laboratorio di informatica Esempio OL { list-style- position:outside} la seconda riga torna a capo allineate con la prima? second item third item

67 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) unimmagine Con URI = Path oppure URL (Web)

68 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

69 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

70 Informatica Generale: laboratorio di informatica Esempio: liste di selettori p, h1, div{background: #0000ff} …. Questo e' un heading Questo e' un paragrafo Questo e' un div

71 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

72 Informatica Generale: laboratorio di informatica Esempio: discendenti p{color: green} h1 p{color: blue} ……. Questo e' un heading Questo e' un heading discendente da un paragrafo

73 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

74 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:

75 Informatica Generale: laboratorio di informatica Esempio: classi p{color: green} p.pippo{color: blue} ……. Questo e' un heading Questo e' un paragrafo di classe pippo

76 Informatica Generale: laboratorio di informatica Regole con pseudo-classi Se voglio applicare delle proprietà ad un selettore ma solo in conseguenza di alcune azioni dellutente uso la seguente sintassi: Sel:Keyword{Prop1: Val1; …. Propn:Valn} Dove Keyword = parola chiave del linguaggio usato nei css

77 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.

78 Informatica Generale: laboratorio di informatica Esempio: link, visited a:link{color: green} a:visited{color: blue} ……. Questo e' un link

79 Informatica Generale: laboratorio di informatica Esempio: hover a:link{color: green} a:hover{color: blue} ……. Questo e' un link hover: quando il mouse passa sopra il link

80 Informatica Generale: laboratorio di informatica Esempio: active a:link{color: green} a:active{color: blue} ……. Questo e' un link active: quando viene premuto il pulsante del mouse

81 Informatica Generale: laboratorio di informatica Combinazioni: classi & pseudo Sel.classe:Keyword{Prop1:Val1;..;Propn:Valn} Esempio: a:link{color: green} a.pippo:link{color:red} ……. link link2

82 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 lultimo valore definito.


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

Presentazioni simili


Annunci Google