LEZIONE
NUMERO 16:
GESTIONE DEL COLORE
GESTIONE DEL COLORE
LINK: http://css.html.it/guide/lezione/29/gestione-del-colore/
Esamineremo prima le diverse possibilità di definire i valori dei vari colori, per poi analizzare usi e sintassi della proprietà color.
16 parole che definiscono
i colori della palette VGA standard di Windows:
black | navy | blue | maroon | purple | green | red | teal |
fuchsia | olive | gray | lime | aqua | silver | yellow | white
http://www.liconet.com/htmltools/web-safe-colors.html
(256 colori disponibili)
#RRGGBB+
Le semplici 16 parole chiave non
esauriscono ovviamente la gamma dei colori visualizzabili su un
monitor moderno. Già in HTML era possibile impostare il colore
di un elemento servendosi di codici esadecimali. In
essi, le prime due lettere (o numeri) corrispondono ai valori per il
colore rosso (RED), la seconda coppia fa riferimento
al verde (GREEN), l'ultima al blue (BLUE).
Esempio
#CC0000 |
Il codice sopra rappresenta una
tonalità di rosso.
#RGB
Molti dei codici esadecimali sono rappresentati da valori duplicati. E' possibile usare per essi una sintassi abbreviata in cui i valori per il rosso, il verde e il blue sono definiti solo dalla prima lettera o numero. Il colore dell'esempio precedente può essere definito anche così:#C00 |
rgb(rrr, ggg, bbb)
Ultima possibilità. Si definiscono i valori di rosso, verde e blue con tre valori compresi, rispettivamente, tra 0 e 255. Sistema ben noto a chi usa programmi di grafica. Il range 0-255 è l'equivalente decimale di quello esadecimale 00-FF visto in precdenza. Anche qui, i tre valori vanno separati da una virgola. Questo è il codice del nero:rgb(0, 0, 0,) |
La proprietà color
Visti i sistemi per rappresentare i colori, dobbiamo ora chiarire un aspetto importante. Per ogni elemento si possono definire almeno tre colori:- il colore di primo piano (foreground color)
- il colore di sfondo (background color)
- il colore del bordo (border color)
- il colore di primo piano, ovvero quello del testo
- il colore del bordo di un elemento quando non si imposti
esplicitamente quest'ultimo con le proprietà border
o border-color (vedi l'esempio
allegato).
Sintassi
La proprietà color si applica a tutti gli elementi ed è ereditata. Significa che se si imposta il colore per un elemento esso sarà ereditato da tutti gli elementi discendenti per cui non si definisca esplicitamente un altro colore. La sintassi è semplice:
selettore { color: <valore> } |
I valori possibili sono:
- qualunque valore di un colore definito con i metodi visti sopra
- la parola chiave inherit. Con essa si dice
esplicitamente al browser di ereditare le impostazioni definite per
l'elemento parente. E' stata introdotta con CSS2 e da qui in avanti
sarà citata nella guida senza ulteriori spiegazioni.
p {color: black; background-color: white; } |
Links
CSS color names: ottima risorsa dal sito W3Schools. Tabella Websafe con valori esadecimali e nomi dei colori (ricordiamo però che nei CSS gli unici nomi accettati sono i 16 visti nella lezione). L'utilità più grande la notate se cliccate sul codice esadecimale del colore. Si aprirà una pagina in cui quel colore viene usato come sfondo e tutti gli altri vengono usati per il testo. Eccellente quando si deve valutare l'impatto visivo della coppia colore testo-sfondo."I colori e il loro uso nel web": dalla sezione PRO di HTML.it.
LEZIONE NUMERO 18:
GESTIONE DEL TESTO: PROPRIETA' DI BASE
Se c'è un aspetto essenziale dei
CSS questo è il nuovo approccio che hanno introdotto per
la gestione del testo. Prima c'era il tag <font>:
pagine pesanti e difficili da gestire. Oggi qualcosa che può
trasformare una pagina web in un perfetto esempio di stile
tipografico e che finalmente consente, almeno in parte, la
potenza e la flessibilità di un word-processor.
La proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante e abbiamo deciso di suddividere l'argomento in due lezioni. Iniziamo quindi dalle proprietà di base. Sono quelle che definiscono i seguenti aspetti:
Gli uomini del W3C hanno creato un meccanismo che consente all'autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativi. Il meccanismo funziona così:
p {font-family: arial, Verdana, sans-serif;}
Quando la pagina verrà caricata, il browser tenterà di usare il primo font della lista. Se questo non è disponibile userà il secondo. In mancanza anche di questo verrà utilizzato il font principale della famiglia sans-serif presente sul sistema. La spiegazione di tutto ciò è semplice: ovviare al problema dei diversi font presenti sulle piattaforme software.
Dunque: quando si imposta la proprietà font-family si possono usare tutti i font che si vuole, ma non dimenticate mai di inserire alla fine l'indicazione di una famiglia generica. Esse sono cinque (tra parentesi riportiamo i caratteri predefiniti su ciascuna sui sistemi Windows):
Sintassi
selettore {font-family: <font 1>, <font2>, ....,<famiglia generica>;}
Esempi
div {font-family: Georgia, "Times New Roman", serif;}
Sintassi
selettore { font-size: <valore>; }
Valori
I valori delle dimensioni del testo possono essere espressi in vari modi. Per un approfondimento sull'uso dei diversi metodi e sulle implicazioni in termini di accessibilità e compatibilità cross-browser si consiglia la lettura dell'articolo "Stabilire le dimensioni dei font con i CSS: vantaggi, problemi e soluzioni".
I diversi sistemi si possono distinguere a seconda che definiscano le dimensioni in senso assoluto o relativo. Dimensione assoluta significa che essa non dipende da nessun altro elemento ed è quella definita dall'unità di misura usata. Dimensione relativa significa che essa viene calcolata in base alla dimensione del testo dell'elemento parente.
Sono valori assoluti:
p {font-size: 12px;}
div.titolo {font-size: 50%;}
#div1 {font-size: large;}
h2 {font-size: 1.2em;}
Sintassi
selettore {font-weight: <valore>;}
Valori
Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave:
p {font-weight: 900;}
div {font-weight: bold;}
Sintassi
selettore {font-style: <valore>;}
Esempi
p {font-style: italic;}
Sintassi
selettore {line-height: <valore>;}
Valori
Esempi
p {line-height: 1.5;}
body {line-height: 15px;}
selettore {font: <valori>;}
Alcune indicazioni sull'uso. I valori relativi alle singole proprietà non vanno separati da virgole. Virgola che deve invece separare i valori definiti per la font-family. Anche in questo caso i nomi dei font costituiti da più parole vanno racchiusi tra virgolette. Per quanto riguarda l'ordine, la dichiarazione dovrebbe sempre finire con la coppia font-size > font-family.
Il valore della proprietà line-height si imposta invece così, facendo seguire il suo valore a quello di font-size e separando i due con una slash:
font-size/line-height
Esempi
p {font: bold 12px/1.5 Georgia, "Times New Roman", serif;}
Nell'ordine abbiamo definito: font-weight, dimensione/ interlinea, font-family.
Esempi
p {font: menu;}
div {font: status-bar;}
Sintassi
selettore { text-align: <valore>; }
Valori
Sintassi
p {text-decoration: <valore> o <valori>;}
Valori
p {text-decoration: none;}
a {text-decoration: underline;}
L'arte del testo perfetto: come utilizzare i CSS per formattare il testo di una pagina web
Stabilire le dimensioni dei font in un CSS: vantaggi, problemi e soluzioni
I font e la tipografia del testo
La proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante e abbiamo deciso di suddividere l'argomento in due lezioni. Iniziamo quindi dalle proprietà di base. Sono quelle che definiscono i seguenti aspetti:
- il font da usare
- la sua dimensione
- la sua consistenza
- l'interlinea tra i paragrafi
- l'allineamento del testo
- la sua decorazione (sottolineature e simili)
font-family
La proprietà font-family serve a impostare il tipo di carattere di una qualunque porzione di testo. Si applica a tutti gli elementi ed è ereditata.Gli uomini del W3C hanno creato un meccanismo che consente all'autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativi. Il meccanismo funziona così:
p {font-family: arial, Verdana, sans-serif;}
Quando la pagina verrà caricata, il browser tenterà di usare il primo font della lista. Se questo non è disponibile userà il secondo. In mancanza anche di questo verrà utilizzato il font principale della famiglia sans-serif presente sul sistema. La spiegazione di tutto ciò è semplice: ovviare al problema dei diversi font presenti sulle piattaforme software.
Dunque: quando si imposta la proprietà font-family si possono usare tutti i font che si vuole, ma non dimenticate mai di inserire alla fine l'indicazione di una famiglia generica. Esse sono cinque (tra parentesi riportiamo i caratteri predefiniti su ciascuna sui sistemi Windows):
- serif (Times New Roman)
- sans-serif (arial)
- cursive (Comic Sans)
- fantasy (Allegro BT)
- monospace (Courier)
Sintassi
selettore {font-family: <font 1>, <font2>, ....,<famiglia generica>;}
Esempi
div {font-family: Georgia, "Times New Roman", serif;}
font-size
Insieme a font-family è la proprietà considerata essenziale nella definizione dell'aspetto del testo, di cui definisce le dimensioni. Applicabile a tutti gli elementi ed ereditata.Sintassi
selettore { font-size: <valore>; }
Valori
I valori delle dimensioni del testo possono essere espressi in vari modi. Per un approfondimento sull'uso dei diversi metodi e sulle implicazioni in termini di accessibilità e compatibilità cross-browser si consiglia la lettura dell'articolo "Stabilire le dimensioni dei font con i CSS: vantaggi, problemi e soluzioni".
I diversi sistemi si possono distinguere a seconda che definiscano le dimensioni in senso assoluto o relativo. Dimensione assoluta significa che essa non dipende da nessun altro elemento ed è quella definita dall'unità di misura usata. Dimensione relativa significa che essa viene calcolata in base alla dimensione del testo dell'elemento parente.
Sono valori assoluti:
- le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large
- quelli espressi con le seguenti unità di
misura: pixel (px), centimetri (cm),
millimetri (mm), punti (pt),
picas (pc), pollici (in),
x-height(ex). Di tutte queste unità le
uniche proponibili per il testo sono punti e pixel. Si
consiglia di usare la prima solo per CSS destinati alla
stampa.
- le parole chiave smaller e larger
- quelli espressi in em (em-height)
- quelli espressi in percentuale
p {font-size: 12px;}
div.titolo {font-size: 50%;}
#div1 {font-size: large;}
h2 {font-size: 1.2em;}
font-weight
Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata.Sintassi
selettore {font-weight: <valore>;}
Valori
Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave:
- valori numerici 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900 ordinati in senso crescente (dal leggero al pesante)
- normal. Valore di default. E' l'aspetto normale del font ed equivale al valore 400
- bold. Il carattere acquista l'aspetto che definiamo in genere grassetto. Equivale a 700
- bolder. Misura relativa. Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell'elemento parente
- lighter. Misura relativa. Il testo
sarà più leggero di quello dell'elemento parente
p {font-weight: 900;}
div {font-weight: bold;}
font-style
Imposta le caratteristiche del testo in base ad uno di questi tre valori:- normal: il testo mantiene il suo aspetto normale
- italic: formatta il testo in corsivo
- oblique: praticamente simile a italic
Sintassi
selettore {font-style: <valore>;}
Esempi
p {font-style: italic;}
Line-height
Grazie a line-height è possibile finalmente usare nelle nostre pagine un sistema di interlinea degno di questo nome. La proprietà, in realtà, serve a definire l'altezza di una riga di testo all'interno di un elemento blocco. Ma l'effetto ottenuto è appunto quello tanto agognato da tutti i web designer: un modo per impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi ed è ereditata.Sintassi
selettore {line-height: <valore>;}
Valori
- normal. Il browser separerà le righe con uno spazio ritenuto "ragionevole". Dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2
- valore numerico. Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l'altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore.
- un valore numerico con unità di misura. L'altezza della riga sarà uguale alla dimensione specificata.
- percentuale. L'altezza della riga
viene calcolata come una percentuale della dimensione del
font.
Esempi
p {line-height: 1.5;}
body {line-height: 15px;}
font
La proprietà font può essere paragonata a background. Si tratta di una proprietà a sintassi abbreviata che serve a impostare con una sola dichiarazione tutte le principali caratteristiche del testo. Le proprietà definibili in forma abbreviata con font sono:- font-family
- font-size
- line-height
- font-weight
- font.-style
- font-variant
- font di sistema
selettore {font: <valori>;}
Alcune indicazioni sull'uso. I valori relativi alle singole proprietà non vanno separati da virgole. Virgola che deve invece separare i valori definiti per la font-family. Anche in questo caso i nomi dei font costituiti da più parole vanno racchiusi tra virgolette. Per quanto riguarda l'ordine, la dichiarazione dovrebbe sempre finire con la coppia font-size > font-family.
Il valore della proprietà line-height si imposta invece così, facendo seguire il suo valore a quello di font-size e separando i due con una slash:
font-size/line-height
Esempi
p {font: bold 12px/1.5 Georgia, "Times New Roman", serif;}
Nell'ordine abbiamo definito: font-weight, dimensione/ interlinea, font-family.
Usare i font di sistema
All'interno della proprietà font è possibile impostare, invece della normale lista di caratteri, un valore corrispondente ai cosiddetti font di sistema. Si tratta del tipo di carattere che usiamo sul nostro sistema operativo per definire l'aspetto di elementi dell'interfaccia come barre dei menu, icone o barra di stato. In particolare, le parole chiave relative ai font di sistema sono 6 e riguardano:- caption: carattere usato per pulsanti e menu a tendina
- icon: carattere usato per la descrizione delle icone
- menu: carattere usato nei menu delle varie finestre
- message-box: usato per i gli alert e gli altri box con messaggi di sistema
- small-caption: carattere per i controlli più piccoli
- status-bar: il font usato per la barra
di stato
Esempi
p {font: menu;}
div {font: status-bar;}
Allinerare il testo: Text-align
La proprietà serve a impostare l'allineamento del testo. E' ereditata e si applica a tutti gli elementi.Sintassi
selettore { text-align: <valore>; }
Valori
- left. Allinea il testo a sinistra
- right. Allinea il testo a destra
- center. Centra il testo
- justify. Giustifica il testo
Text-decoration
Imposta particolari decorazioni e stili per il testo. Ereditabile e applicabile a tutti gli elementi.Sintassi
p {text-decoration: <valore> o <valori>;}
Valori
- none. Il testo non avrà alcuna decorazione particolare
- underline. Il testo sarà sottolineato
- overline Il testo avrà una linea superiore
- line-through. Il testo sarà attraversato da una linea orizzontale al centro
- blink. Testo lampeggiante
p {text-decoration: none;}
a {text-decoration: underline;}
Links
Negli articoli che seguono troverete risposte a importanti questioni legate alla gestione del testo con i CSS e che esulano dall'impianto di una guida come questa. La lettura è pertanto fortemente consigliata:L'arte del testo perfetto: come utilizzare i CSS per formattare il testo di una pagina web
Stabilire le dimensioni dei font in un CSS: vantaggi, problemi e soluzioni
I font e la tipografia del testo
REALIZZAZIONE PRATICA SU
COFFEECUP:
la seguente immagine rappresenta la schermata di CoffeeCup
della pagina “stile.css”la visualizzazione della pagina “index.html” risulta essere così:
Nessun commento:
Posta un commento