Formattazione visual font –caratteri –tabelle

Presentazione sul tema: "Formattazione visual font –caratteri –tabelle"— Transcript della presentazione:

1 Formattazione visual font –caratteri –tabelle
CSS – parte 3 Formattazione visual font –caratteri –tabelle

2 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

3 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)

4

5 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 Internet Explorer ha un baco che sconsiglia l’uso delle unità em per body, poiché il ridimensionamento dei caratteri è eccessivo Possono inoltre essere utilizzati i valori visti nella diapositiva 45 (xx-small … xx-large, larger e smaller)

6 FONT-STILE, FONT-WEIGHT, FONT-VARIANT
PRIMA PARTE: CARATTERI E TESTO FONT-STILE, FONT-WEIGHT, FONT-VARIANT 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 Tramite font-variant è possibile formattare il testo in maiuscoletto. i valori ammessi sono: normal | small-caps

7 PRIMA PARTE: CARATTERI E TESTO
FONT Tramite font è possibile specificare tutte le proprietà del carattere contemporaneamente La sintassi ammessa è: font: <font-style> <font-variant> <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 }

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

9 PRIMA PARTE: CARATTERI E TESTO
DECORAZIONE DEL TESTO Il testo può essere decorato con sottolineature (da usarsi essenzialmente con i link), sopralineature (da evitare), testo barrato (essenzialmente per il tag <del>) Eventuali decorazioni vanno specificate tramite la proprietà text-decoration I valori ammessi sono: none | underline | overline | line-through

10 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, tuttavia sono particolarmente indicate le unità em 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 }

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

12 E se volessi usare dei font non standard?

13

14

15

16

17 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: cellpadding  padding cellspacing  border-spacing border  border width  width È 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>

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

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

20 PRIMA PARTE: FORMATTAZIONE DELLE TABELLE
INTESTAZIONE E RIGHE L’intestazione della tabella, identificabile tramite il tag <thead> 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>

21 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