Impossibile scaricare o salvare file

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.

consente all'autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativi

p {font-family: arial, Verdana, sans-serif;}

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)

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette

selettore {font-family: <font 1>, <font2>, ....,<famiglia generica>;}

div {font-family: Georgia, "Times New Roman", serif;}

font-size definisce le dimensioni. Applicabile a tutti gli elementi ed ereditata

selettore { font-size: <valore>; }

Valori dimensioni in senso assoluto o relativo .

Dimensione relativa significa che essa viene calcolata in base alla dimensione del testo dell'elemento parente

p {font-size: 12px;}
div.titolo {font-size: 50%;}
#div1 {font-size: large;}
h2 {font-size: 1.2em;}

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.

Sono valori relativi:

• le parole chiave smaller e larger

• quelli espressi in em (em-height)

• quelli espressi in percentuale

font-weight Serve a definire la consistenza o "peso" visivo del testo. Si applica a tutti gli elementi ed è ereditata. - è ereditata

selettore {font-weight: <valore>;}

Valori:

p {font-weight: 900;}
div {font-weight: bold;}

• 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

font-style Imposta le caratteristiche del testo in base ad uno di questi tre valori:

selettore {font-style: <valore>;}

p {font-style: italic;}

• normal: il testo mantiene il suo aspetto normale

• italic: formatta il testo in corsivo

• oblique: praticamente simile a italic

La proprietà si applica a tutti gli elementi ed è ereditata

Line-height sistema di interlinea - serve a definire l'altezza di una riga di testo all'interno di un elemento blocco - è ereditata

selettore {line-height: <valore>;}

non usare mai la percentuale

p {line-height: 1.5;}
body {line-height: 15px;}

• 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.

font proprietà a sintassi abbreviata che serve a impostare con una sola dichiarazione tutte le principali caratteristiche del testo

selettore {font: <valori>;}

singole proprietà non vanno separati da virgole, i nomi dei font costituiti da più parole vanno racchiusi tra virgolette la dichiarazione dovrebbe sempre finire con la coppia font-size > font-family

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

p {font: bold 12px/1.5 Georgia, "Times New Roman", serif;}

abbiamo definito: font-weight, dimensione/ interlinea, font-family

• font-family

• font-size

• line-height

• font-weight

• font.-style

• font-variant

• font di sistema

Usare i font di sistema

è possibile impostare, invece della normale lista di caratteri, un valore corrispondente ai cosiddetti font di sistema.

Se si intende usare uno dei font di sistema non è necessario specificare altri valori oltre alla keyword

p {font: menu;}
div {font: status-bar;}

1. caption: carattere usato per pulsanti e menu a tendina

2. icon: carattere usato per la descrizione delle icone

3. menu: carattere usato nei menu delle varie finestre

4. message-box: usato per i gli alert e gli altri box con messaggi di sistema

5. small-caption: carattere per i controlli più piccoli

6. status-bar: il font usato per la barra di stato

Allinerare il testo:

Text-align La proprietà serve a impostare l'allineamento del testo. E' ereditata e si applica a tutti gli elementi.

selettore { text-align: <valore>; }

• 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

p {text-decoration: <valore> o <valori>;}

p {text-decoration: none;}
a {text-decoration: underline;

• 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

font-size-adjust migliorare la leggibilità di un carattere alternativo tra quelli indicati con la proprietà font-family - è ereditata

selettore {font-size-adjust: <valore>;}

p {font-size-adjust: 0.50;}

• none. Non avviene nessun aggiustamento. Valore di default.

• valore numerico. Indica il fattore di aggiustamento del font.

supportata solo dai browser Gecko-based (Mozilla, Netscape 6/7)

font-stretch Consente di rendere il testo più o meno espanso del normale. Proprietà non supportata da nessun browser. Ereditata

selettore {font-stretch: <valore>;}

p {font-stretch: ultra-expanded;}

• normal. Valore di default.

• parole chiaveche indicano diversi gradi di espansione del testo.

ultra-expanded, extra-expanded, expanded, semi-expanded, normal, semi-condensed, condensed, extra-condensed, ultra-condensed - con funzione relativa: wider e narrower

font-variant Consente di trasformare il testo in maiuscoletto – ereditata

selettore {font-variant: <valore>;}

• normal. Il testo ha il suo aspetto normale. Valore di default.

• small-caps. trasforma il testo in maiuscoletto.

h2 {font-variant: small-caps;}

text-indent Definisce l'indentazione della prima riga in ogni elemento contenente del testo. Proprietà ben supportata ed ereditata

selettore {text-indent: <valore>;}

• un valore numerico con unità di misura

• un valore in percentuale

il valore con unità di misura è assoluto, quello in percentuale è relativo

p {text-indent: 10px;}
div.contenuto {text-indent: 10%;}

text-shadow Crea un'ombreggiatura per il testo specificato. La proprietà non è supportata da nessun browser e non è ereditata

selettore {text-shadow: <valore colore> <valore x> <valore y> <valore blur>;}

h1 {text shadow: blue 2px 2px 3px;}

text-transform La proprietà serve a cambiare gli attributi del testo relativamente a tre aspetti: maiuscolo, minuscolo, prima lettera maiuscola.

selettore {text-transform: <valore>;}

• none. Valore di default. Nessuna trasformazine viene applicata.

• capitalize. La prima lettera di ogni parola viene trasformata in maiuscolo.

• uppercase. Tutto il testo è maiuscolo.

• lowercase. Tutto il testo è minuscolo.

white-space Questa proprietà serve a gestire il trattamento degli spazi bianchi presenti in un elemento. E' ereditata

selettore {white-space: <valore>;}

p {white-space: pre;}
div {white-space: nowrap;}

• none. Valore di default. Gli spazi bianchi sono ridotti a uno.

• pre. Gli spazi bianchi e l'inizio di nuove righe sono mantenuti così come sono nel codice

• nowrap. Gli spazi bianchi sono ridotti a uno e l'andata a capo è disabilitata

letter-spacing Aumenta lo spazio tra le lettere di una parola. Proprietà ben supportata ed ereditata

selettore { letter-spacing: <valore>; }

h1 { letter-spacing: 5px; }

• normal. Valore di default. Le lettere mantengono il loro spazio normale.

• un valore numerico con unità di misura. Le lettere saranno spaziate secondo la distanza impostata.

word-spacing Serve ad aumentare lo spazio tra le parole comprese in un elemento. Proprietà ben supportata ed ereditata

selettore { word-spacing: <valore>; }

p { word-spacing: 1.2em; }
div.testo { word-spacing: 5px; }

• normal. Valore di default. Le parole mantengono il loro spazio normale.

• un valore numerico con unità di misura. Le parole saranno spaziate secondo la distanza impostata.