Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
Note sull’esame L’esame è composto da due parti:
1) valutazione del progetto -> determinerà un voto di gruppo 2) valutazione individuale -> determinera un voto personale Voto d’esame: Media aritmetica fra la valutazione del progetto e la valutazione individuale
2
Cosa posso rifiutare? Potete rifiutare il voto individuale dello scritto e rifarlo all’appello successivo. In questo caso manterremo comunque valido il voto collettivo per il progetto. Potete rifiutare come gruppo la valutazione del progetto. In questo caso manterremo comunque validi i voti individuali e ripresenterete il progetto con le eventuali modifiche che vi saranno indicate (non dovrete rifare l’intero progetto, ma solo incrementarlo)
3
Cosa non potete fare? Rifiutare individualmente il voto di gruppo. Per rifiutare il voto di gruppo ci deve essere accordo unanime di tutti i membri del gruppo
4
E’ tutto chiaro?
5
Font, caratteri e gestione del testo
6
Web safe fonts
7
PRIMA PARTE: CARATTERI E TESTO
Per i caratteri sono disponibili le seguenti proprietà: font-family: specifica il tipo di carattere font-size: specifica la dimensione del carattere font-style: per specificare il corsivo font-weight: per specificare il grassetto font-variant: per specificare il maiuscoletto font: per specificare contemporaneamente le precedenti proprietà
8
PRIMA PARTE: CARATTERI E TESTO
FONT-FAMILY Attraverso font-family è possibile specificare diversi tipi di carattere: body { font-family:verdana,arial,sans-serif; } Il carattere usato sarà il primo, fra quelli specificati, che risulta essere disponibile nel computer dell’utente È bene concludere l’elenco con una famiglia generica da usare nel caso in cui gli altri tipi di carattere non siano disponibili. Le famiglie generiche sono: serif (ad esempio il Times) sans-serif (ad esempio il Verdana) monospace (ad esempio il Courier)
9
PRIMA PARTE: CARATTERI E TESTO
FONT-SIZE Con font-size è possibile specificare la dimensione del carattere Possono essere utilizzate unità di lunghezza (sono consigliate quelle relative ad eccezione dei pixel) e unità percentuali È sconsigliato l’uso dell’unità px poiché con Internet Explorer per Windows il testo sarebbe non ridimensionabile Le unità relative e le percentuali si riferiscono alle dimensioni dell’elemento padre Usare le unità percentuali corrisponde ad utilizzare le unità em
10
FONT-STILE, FONT-WEIGHT
PRIMA PARTE: CARATTERI E TESTO FONT-STILE, FONT-WEIGHT Tramite font-style è possibile formattare il testo in corsivo. i valori ammessi sono: normal | italic Tramite font-weight è possibile formattare il testo in grassetto. i valori ammessi sono: normal | bold Sono ammessi altri valori ma sono scarsamente supportati dai programmi utente
11
FONT Tramite font è possibile specificare tutte le proprietà del carattere contemporaneamente La sintassi ammessa è: <font-style> <font-weight> <font-size> <line-height> <font-family> Non è necessario specificare tutte le proprietà Perché la dichiarazione sia valida è necessario specificare almeno <font- size> e <font-family> Assieme alla dimensione del testo è possibile specificare l’interlinea tramite <font-size>/<line-height> Esempio: h1 { font : bold 2em/1.5em georgia, serif }
12
ALLINEAMENTO DEL TESTO
PRIMA PARTE: CARATTERI E TESTO ALLINEAMENTO DEL TESTO L’allineamento orizzontale del testo può essere stabilito tramite la proprietà text-align Valori ammessi: left | right | center | justify L’indentazione è stabilita tramite text-indent Sono ammesse unità di lunghezza o unità percentuali Esempio: p { text-indent: 2em }
13
PRIMA PARTE: CARATTERI E TESTO
DECORAZIONE DEL TESTO Il testo può essere decorato con sottolineature (da usarsi essenzialmente con i link) Eventuali decorazioni vanno specificate tramite la proprietà text-decoration I valori ammessi sono: none | underline | overline | line- through
14
SPAZIATURA FRA PAROLE E CARATTERI
PRIMA PARTE: CARATTERI E TESTO SPAZIATURA FRA PAROLE E CARATTERI Lo spazio predefinito fra lettere e parole può essere modificato tramite le proprietà letter-spacing e word-spacing Sono ammesse tutte le diverse unità di lunghezza Il valore specificato può essere positivo o negativo Il valore specificato non indica la distanza fra le varie lettere o parole ma va a sommarsi alla distanza predefinita Esempio h1{ letter-spacing:0.2em;word-spacing:0.5em }
15
TRASFORMAZIONI DEL CARATTERE
PRIMA PARTE: CARATTERI E TESTO TRASFORMAZIONI DEL CARATTERE Tramite la proprietà text-transform è possibile gestire i caratteri maiuscoli e minuscoli indipendentemente da quanto specificato nel codice Sono ammessi i seguenti valori: capitalize: la prima lettera di ogni parola è rappresentata in maiuscolo uppercase: tutte le lettere di ogni parola sono rappresentate in maiuscolo lowercase: tutte le lettere di ogni parola sono rappresentate in minuscolo none: nessuna variazione Esempio: h1 { font-variant: uppercase } h2 { font-variant: capitalize }
16
Google fonts 1) Basta importare un css esterno:
<link rel="stylesheet" type="text/css" href=" 2) E richiamarlo dove ci serve. Avremo ora un set disponibile in piu di caratteri che funziona online. body { font-family: 'Tangerine', serif; font-size: 48px; }
19
FORMATTAZIONE DELLE TABELLE
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE FORMATTAZIONE DELLE TABELLE Attraverso i CSS è possibile formattare efficacemente le tabelle I vari attributi delle tabelle hanno un corrispondenza con apposite proprietà CSS: Padding interno ad una cella padding Spaziatura fra le celle border-spacing border bordo della tabella ( ex: 1px solid red) width largehzza della tabella È bene specificare la dimensione del testo per le tabelle (ad esempio table{font-size:1em}) poiché Internet Explorer tende a ignorare le impostazioni scelte per <body>
20
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
BORDER-COLLAPSE I bordi della tabella e delle singole celle sono specificati separatamente: table { border:3px solid #900; } td,th { border:1px solid #900; } Automaticamente, il browser lascia dello spazio fra i bordi delle singole celle Per eliminare tale spazio si utilizza la proprietà border- collapse I valori ammessi sono: collapse | separate Quando i bordi sono separati, può essere utile non mostrare le celle vuote: table { empty-cells: hide; }
21
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
RIGHE E COLONNE Specificando opportunamente i bordi è possibile ottenere una griglia solo orizzontale o solo verticale In tutti e due i casi è necessario impostare i bordi in modo che collassino table { border-collapse: collapse; } Griglia orizzontale td,th { border:1px #900; border-style: solid none; Griglia verticale td,th { border:1px solid #900; } td{ border-style: none solid; }
22
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
Border-collapse collapse: se viene impostato un bordo, le celle della tabella lo condividono; separate: se viene impostato un bordo, ogni cella ha il suo, separato dalle altre; lo spazio tra le celle e tra i bordi si imposta con la proprietà border-spacing.
23
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
INTESTAZIONE E RIGHE L’intestazione della tabella, identificabile tramite il tag <thead> oppure <th> può essere formattata indipendentemente dal resto della tabella: thead { background:#ffc; color:#000; text-align:center; font-weight:bold; text-transform:uppercase; } Attraverso le classi è possibile evidenziare meglio le diverse righe alternandone il colore di sfondo tr.d {background:#eee;color:#000} tr.p {background:#fff;color:#000} <table summary="..."> <thead><tr><th>…</th>…</tr></thead> <tbody> <tr class="d"><td>…</td>…</tr> <tr class="p"><td>…</td>…</tr> </tbody> </table>
24
PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
SPAZIO FRA CELLE Lo spazio fra le celle può essere specificato attraverso la proprietà border-spacing La proprietà border-spacing ha effetto quando i bordi delle singole celle non collassano La proprietà border-spacing ammette come valori solo delle lunghezze: table { border-spacing:20px; } La proprietà border-spacing non è supportata da Internet Explorer
Presentazioni simili
