Progettazione di siti web a.a. 2015/16

Transcript

1 CSS per la tipografia web Progettazione di siti web a.a. 2015/16 Fogli di stile: tipografia web Maria Simi Marzo, 2016 [Manuale di riferimento del W3C] Gli stili per i caratteri Gli stili per il testo Colori e sfondi Link Liste Tabelle Tipi (font) Il tipo kinesis I caratteri possono essere visualizzati in stili tipografici diversi, o tipi,, associando ad essi delle immagini (glifi o gliph) Kinesis (tipo) (codice carattere) = Un tipo (font)) è un insieme coordinato di glifi Una famiglia di font (font-family) è un insieme coordinato di font Una famiglia generica è una tipologia di font-family La famiglia Kinesis Famiglie generiche di font con grazie senza grazie proporzionali a spaziatura fissa fantasiose manoscritte serif sans-serif variable-width monospace fantasy cursive font-family: "lucida sans unicode", "lucida grande", lucida, sans-serif; font-family: georgia, palatino, "Times New Roman", times, serif; 1 di 6

2 Con e senza grazie Ampiezza fissa e variabile Con grazie (serif) Ampiezza fissa (monospaced) Senza grazie (sans-serif) Ampiezza variabile (variable-width) Perché le alternative? Un tipo può essere o non essere disponibile sulla macchina locale Per questo motivo a volte i caratteri speciali previsti dallo standard (anche se compresi dal browser) non sono visualizzati È buona norma dare delle alternative È buona norma dare alla fine una alternativa generica Conviene usare font comuni sul web (web safe fonts) Core Web Fonts di Microsoft: Georgia, Times New Roman, Arial, Trebuchet MS, Verdana, Courier New, Andale Mono, Comic Sans MS,, Da poco è possibile utilizzare font particolari... Font particolari: problemi 1. Formati non standard: Diversi formati: OTF (OpenType), TTF (TrueType), EOT (EmbeddedOpenType, proprietario Microsoft) WebOpenFontFormat (WOFF) si candida come formato standard e dovrebbe essere adottato anche da MS Explorer nel transitorio dobbiamo fornire diversi formati 2. Diritti d'uso: le font hanno un valore per le aziende che le producono e hanno licenze d'uso restrittive le font devono avere una "web license" (fontsquirell.com) Font particolari: soluzioni 1. Servizi di font: Scegli la font e aggiungila alla tua collezione Genera il codice per il link da includere nella head della pagina HTML Nota: : la font viene servita da Google e quindi non è disponibile in locale, senza rete 2. Font embedding scaricare una font in locale e includere il file di font nel foglio di face { /* dichiarazione */ font-family: DeliciousRoman; src: url(delicious-roman.otf) } Misure assolute o relative Misure assolute punti, pixel, cm, mm... xxsmall, x-small, small, medium, large, x-large, xx-large Nota: non significa che si vedono nelle stesse dimensioni su tutti gli schermi; la grandezza dei pixel varia con la risoluzione dello schermo Misure relative (alla grandezza "attuale") valore %, larger, smaller... 1em è pari all'altezza della font corrente (font 16px, 1em = 16px); (in tipografia 1em è la larghezza della M) specificare 0.8em significa un carattere che è l 80% di quello utilizzato in quel contesto h1 {font-family: DeliciousRoman} /* uso della font */ Nota: controllare che abbiano una "web license" 2 di 6

3 Spaziature letter-spacing,, lo spazio tra le lettere: blockquote{letter-spacing: 0.1em} word-spacing,, lo spazio tra le parole: h1 {word-spacing: 1em} line-height,, l'interlinea: valori: %, em, px, Es. se la font è 12px, 150% o 1.5em è equivalente a 18px white-space normal (le sequenze di spazi e gli a capo sono ignorati) pre (le sequenze di spazi e gli a capo sono rispettati) nowrap (la linea non viene spezzata anche se troppo lunga) font style, weight, variant font-style normal italic oblique font-weight bold bolder lighter font-variant normal SMALL-CAPS Esempi prova style prova weight prova variant font-size Pixel, punti, em? Grandezze qualitative xx-small x-small medium large large x-large xx-large larger smaller Grandezze in unità di misura em, ex, px, pt, pc, mm, cm, in, - 1 ex è pari all altezza della lettera x minuscola - 1 pt è pari a 1/72 di pollice (in) - 1 pc (pica) sono 12 pt Grandezze in percentuale 80%, 50% rispetto al normale I punti (pt) e le altre misure di lunghezza (pc, mm, cm, in ) sono per la stampa I pixel (px) per lo schermo, con rese diverse Preferenze dei browser per aggiustare dimensioni: funziona in alcuni casi solo su misure relative Funzionalità di zoom nei browser moderni, ma non tutti Le misure relative sono migliori per i testi. Ricetta di Briggs: body {font-size: 76%} /* 12px se il normale e' 16px */ p {font-size: 1em} /* testo normale 12px */ h1 {font-size: 1.5em} Le misure in pixel sono più affidabili per menu Verso siti responsive Ricetta di Ethan Marcotte: body {font-size: 100%} /* di solito 16px */ div {font-size:.875em} /* corrisponde a 14:16, per avere circa 14px*/ div h1 {font-size: em} /* corrisponde a 18:14, per avere circa 18px*/ Nota: : l'em si riferisce al contesto, all'elemento genitore In futuro con i CSS3: rem,, root em html {font-size: 100%} /* di solito 16px */ div {font-size:.875rem} /* corrisponde a 14:16, per avere circa 14px*/ div h1 {font-size: 1.125rem} /* corrisponde a 18:16, per avere circa 18px*/ Nota: : il rem si riferisce all'elemento HTML Font: forme contratte L attributo font (da solo) consente di specificare una sequenza di proprietà, in quest ordine: Zero o più tra: font-style, font-variant, font-weight Font-size (ci deve essere) Font-family (ci deve essere, in fondo) Esempi: h1 { font: 1.75em sans-serif serif } h1 { font: bold 1.75em sans-serif serif } h1 { font: oblique bold 1.75em sans-serif serif } 3 di 6

4 Effetti sul testo text-transform none, capitalize, lowercase, uppercase, inherit indipendentemente da come lo abbiamo scritto, il testo viene trasformato in maiuscoletto, minuscolo, maiuscolo text-decoration underline, overline, line-through, blink :-Q, none text-shadow h1 {text-shadow: 0.2em 0.2em} Generatore di ombre Allineamento del testo text-indent: : il rientro della prima riga di un blocco valori assoluti in px, cm... valori relativi in %, em text-align: : per allineare testo orizzontalmente dentro elementi di tipo blocco valori: center,right, left, justify vertical-align: per allineare testo verticalmente dentro elementi di tipo blocco valori: baseline, sub, super, text-top, text-bottom, top, middle, bottom W3schools Le basi del colore Colori: un certo numero sono disponibili con il loro nome in inglese: blue, green, yellow, red, magenta I colori sono codificati con un numero di 6 cifre esadecimali (codifica RGB per Red-Green-Blue) #ffff00 corrisponde al giallo #ff0000 corrisponde al rosso Tabella dei colori Colore del testo (di primo piano) Due stili che vanno specificati insieme: color: : il colore del testo background-color: : il colore dello sfondo Il colore del testo {color: #0000FF} {color: #00F} {color: rgb(0, 0, 255)} {color: rgb(0%, 0%, 100%)} Sempre lo stesso colore... color è una proprietà che viene ereditata, basta specificarla per body Sfondi background-color: : un colore o transparent body {background-color: #FFEFDB} background-image: : un immagine specificata da un URL body {background-image: url('image/logo.gif' 'image/logo.gif')} Gli sfondi non si ereditano e sono normalmente trasparenti Ripetizione delle immagini sullo sfondo (tiling) SFONDI Proprietà: background-repeat Valori: repeat, repeat-x, repeat-y, no-repeat Sfondi: posizionamento Modalità di posizionamento immagini sullo sfondo Proprietà: background-attachment Valori: scroll, fixed background-position Valori simbolici: left top right bottom center (usati in coppie, es left top, center bottom) Valori in % e pixel: distanza da sinistra e dall'alto #header { background-image: url('logo.gif' 'logo.gif'); background-position: 20px 10px; } W3schools 4 di 6

5 Liste list-style-type: : lo stile del simbolo che precede gli elementi della lista Proprietà: disc, none, circle, square, decimal, lower- roman, upper-roman, upper-latin W3schools list-style-image: : il simbolo che precede gli elementi della lista è un immagine Proprietà: none, url('pallino.gif') list-style-position: : la posizione del simbolo Proprietà: inside, outside Forma abbreviata: Esempi liste list-style: none outside img('pallino.gif'); Tabelle Stili che si possono applicare a tabelle, righe e celle: Tutti gli stili per i testi Stili per l allineamento dei contenuti (text-align, vertical-align) Colori e immagini di sfondo Bordi (border), imbottitura (padding) Bordi collassati e non collassati border-collapse: separate border-collapse: collapse Tabelle: esempio <table> <tr id="riga1" "riga1"> <th>titolo 1</th> <td>cella 1</td> <td>cella 2</td> </tr>... </table> Aggiungiamo un po di stile con i CSS... Esempio tabella Tabelle e CSS table {border: 1px solid black; border-collapse: collapse } td { vertical-align: middle; border: 1px solid red } th {text-align: center; font-weight: bold; font-size: x-large } tr#riga1 { text-align: left } tr#riga2 { text-align: center } tr#riga3 { text-align: right } td#centro {background: #aaaaaa} Esempio tabella Stile dei link Come cambiare stile a un link a:link {color: red} a:visited {color: blue} a:hover {color: fuchsia; text-decoration: none} a:active active {color: maroon} Pseudo-classi / pseudo-selettori Selettori che si applicano ad elementi in un particolare stato; sono classi fantasma che non appaiono nel file HTML CSS2.1 introduce altri pseudo selettori Ordine LVHA (LoVe, HA) :link link non ancora visitato :visited link visitato :hover quando si va sopra con il mouse :active quando si tiene premuto il bottone mouse Questi selettori sono specializzazioni di a non sono proprio classi come le altre... sono piuttosto delle pseudo-classi o pseudo-selettori :first-child li:first-child :last-child div#content p:last-child li:last-child un elemento che compare come primo figlio primo elemento di una lista l ultimo figlio di un elemento ultimo paragrafo dentro il div ultimo elemento di una lista 5 di 6

6 Pseudo-elementi Vengono selezionate parti di testo che non sono nemmeno annotati come elementi nell HTML :first-line seleziona la prima riga di un elemento Es. p:first-line {letter-spacing: 6px} aggiunge degli spazi tra le lettere della prima riga di un paragrafo. :first-letter seleziona la prima lettera di un elemento Es. p:first-letter {font-size: 300%} ingrandisce le prime lettere dei paragrafi Sono ammessi solo stili appropriati per i testi Contenuti generati Per inserire contenuto con stile prima e dopo un elemento (senza inserirlo nel file HTML) :before inserisce contenuto prima di un elemento Es. blockquote:before before {content: "\'" ; font-size: 24px} :after inserisce contenuto alla fine di un elemento Es. blockquote:after {content: "\'" ; font-size: 24px} I caratteri speciali si inseriscono attraverso il loro codice esadecimale Unicode: blockquote:before before {content: "\201C" ; font-size: 24px} blockquote:before before {content: "\201D" ; font-size: 24px} È corretto perché questi contenuti fanno in qualche modo parte dello stile, non sono contenuti veri Linee guida design siti PA: tipografia Font: Titillium web Conclusioni Con quanto abbiamo visto possiamo cimentarci nel fare pagine di testo con un bell aspetto dal punto di vista tipografico. Il prossimo esercizio sarà su questo Nella lezione successiva ci occuperemo di come creare layout di pagina. 6 di 6