4 Creare contenuti per il web - Andrea Giachetti

84
solo per gli elementi block-level) si controlla con text­align che può assumere valori
left, right, justify.
Come abbiamo già visto, il colore del testo si controlla con color:nomecolore; quello
dello sfondo con background:valore; qui il valore oltre che di colore può anche essere
transparent, cioè si può rendere lo sfondo trasparente. Un'ulteriore possibilità è quella di
mettere come sfondo dell'elemento un'immagine, in tal caso si indica:
background:url(indirizzoimmagine) con eventuale indicazioni su come
l'immagine vada scalata o ripetuta ( repeat, no­repeat, repeat­x, repeat­y,
fixed, scroll )
✔ Nota: valori utilizzabili per i colori
Abbiamo visto molti esempi, ma non abbiamo descritto in dettaglio come effettivamente si
controllano i valori dei colori degli elementi, per cui rimediamo.
Esistono in HTML/CSS 16 nomi di colori predefiniti che consentono l'uso della semplice
sintassi color=”nome”. Questi sono: aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive, purple, red, silver, teal,
white, yellow.
Per controllare invece le sfumature della tinta in dettaglio, possiamo utilizzare due differenti
notazioni: la prima è quella esadecimale, che si può ottenere scrivendo, ad esempio,
color=”#RRGGBB” negli elementi HTML e color:#RRGGBB nelle regole CSS, ove RR,
GG, BB sono, appunto, numeri esadecimali di due cifre che codificano numeri da 0 a 255 per le
componenti rispettivamente di rosso, verde e blu. Pur essendo poco intuitivo (le cifre
esadecimali vanno da 0 a F) il metodo è il più usato; ad esempio color=#00ff00 vuol dire
verde saturo, color=#400040 è un violetto poco saturo (rosso+blu) eccetera. Nelle regole
di stile si può comunque usare la notazione RGB anche in decimale, utilizzando
color=rgb(r,g,b), con valori 0-255 o percentuali, come in color:rgb(200,0,255)
o color:rgb(10%,50%,100%).
✔ Nota: la leggibilità del testo sul web
Al di là del come si possa tecnicamente variare l'aspetto del testo delle pagine, ha senso
chiedersi se esistano delle regole sensate per scegliere nei nostri documenti tipologia, colori o
dimensioni dei caratteri in modo da renderli più efficaci e gradevoli, cioè qual è la scelta che
migliora l'usabilità del sito. Uno dei criteri per rendere più efficiente l'utilizzo dei siti web è
certamente quello di rendere più leggibili le informazioni utili. A questo scopo si sono fatti vari
studi sperimentali misurando, ad esempio, la velocità di lettura (cronometrando l'esecuzione di
opportuni task). Si è notato che tale velocità dipende da tipo e dimensione dei caratteri. I tipi di
caratteri si dividono in due principali famiglie: con grazie (es Times) e senza grazie, cioè
abbellimenti ai bordi (es. Arial). Esistono poi i vari stili (corsivo, grassetto). Si è visto che i
font senza grazie sono più leggibili sullo schermo (a differenza che sulla carta) e che sullo
schermo il corsivo è meno leggibile (per via dell'aliasing, cioè degli artefatti che si creano a
causa della dimensione finita dei punti dello schermo o pixel). La dimensione più grande
migliora la leggibilità e valgono ovviamente le considerazioni viste prima per i colori (l'azzurro
è meno leggibile, i contrasti di luminosità vanno preferiti a quelli di tinta). Il minuscolo è più