Corso HTML e CSS (24^ lezione): Stilizzare il testo (parte 1^)

Impariamo a costruire un sito Web

Lezione 24: CSS: Stilizzare il testo (parte 1^).

 

Quando si relizza un sito web una importanza fondamentale l’assume l’aspetto. I criteri per rendere un sito fruibile sono numerosissimi, ma non si può trascurare anche l’apporto estetico che il testo può dare all’aspetto finale delle nostre pagine.

Vediamo quindi quali sono gli attributi con i loro relativi valori che permettono la stilizzazione del testo.


color Imposta il colore di un testo.

I valori che questa proprietà può assumere sono:

colore Specifica il colore del testo espresso come da tabella colori.
inherit Specifica che il colore sarà ereditato dall’elemento padre.

Es d’uso:

h1 {

color:#336699;

}

Specifica che l’intestazione <h1> avrà il colore indicato (tonalità d’azzurro).

direction Imposta la direzione con cui il testo dev’essere stampato a video.

I valori che questa proprietà può assumere sono:

ltr Left to right (da sinistra a destra). Questo è il default.
rtl Right to left (da destra a sinistra)
inherit Specifica che il valore sarà ereditato dall’elemento padre.
font Imposta tutte le proprietà di un font come lo stile, la dimensione ed il carattere di un testo, in un’unica dichiarazione.

Le proprietà che possono essere impostate sono in ordine:

font-style

font-variant

font-weight

font-size/line-height

font-family

font-size e font-family sono obbligatori. Per gli altri, se mancano, verrà usato il default.

I valori che può assumere sono tutti quelli che verranno descritti per le suddette proprietà con i più i valori seguenti:

caption Il font usato è quello dei controlli che ammettono una caption (es. i bottoni)
icon Il font usato è quello delle etichette delle icone.
menu Il font usato è quello dei menu drop-down
message-box Il font usato è quello delle finestre di dialogo.
small-caption Il font usato è quello dei controlli che ammettono una caption, ma di dimensioni inferiori
status-bar Il font usato è quello delle barre di stato.
inherit Specifica che il valore sarà ereditato dall’elemento padre.

Es d’uso:

.GrassettoCorsivo {

font:italic bold 12px/20px arial,sans-serif;

}

font-family Imposta il tipo di font da usare per un testo. Ogni famiglia di fonts ha un font principale ed altri che verranno presi in considerazione se il principale non fosse supportato dal browser.

Il nome dei font che hanno degli spazi all’interno del nome va racchiuso tra virgolette (“); usare gli apici se la stilizzazione anziché in foglio CSS
viene fatta in un tag html con style.

Quindi in un CSS si scriverà ad esempio:

font-family:”Times New Roman”, Times, serif;

mentre in un tag html sarà ad esempio:

<p style=”font-family:’Times New Roman’, Times, serif;”>

L’unico valore che questa proprietà può assumere oltre all’elenco di fonts, come detto sopra, è inherit, che come sempre sta a significare che la famiglia di font da usare è ereditata dall’elemento padre.

font-size Imposta le dimensioni di un testo..

I valori che possono essere assegnati a questa proprietà sono:

xx-small Imposta il font ad una dimensione estremamente piccola.
x-small Imposta il font ad una dimensione extra-piccola.
small Imposta il font ad una dimensione piccola.
smaller Imposta il font ad una dimensione inferiore a quella dell’elemento padre.
medium Imposta il font ad una dimensione media.
xx-large Imposta il font ad una dimensione estremamente grande.
x-large Imposta il font ad una dimensione extra-grande.
large Imposta il font ad una dimensione grande.
larger Imposta il font ad una dimensione superiore a quella dell’elemento padre.
lunghezza Imposta il font ad una dimensione fissa espressa in pixels, em, cm , etc.
% Imposta il font ad una dimensione fissa espressa in % di quella dell’elemento padre.
inherit Specifica che Il padding sarà ereditato dall’elemento padre.

Es d’uso:

p {

font-size:14px;

}

oppure

p {

font-size:150%;

}

font-style Imposta uno stile per un testo. Ad esempio corsivo od obliquo.

I valori che possono essere assegnati a questa proprietà sono:

normal Il font viene usato nel suo stile standard. Questo è il default.
italic Viene usato lo stile Italico.
oblique Viene usato uno stile obliquo (stesso effetto di Italico).
inherit Specifica che il valore sarà ereditato dall’elemento padre.
font-variant Imposta il maiuscoletto. In questo modo il corpo del carattere manterrà le dimensioni normali ma il carattere sarà sempre maiuscolo.

I valori accettati sono:

normal Font normale. Questo è il default.
small-caps Imposta il maiuscoletto.
inherit Specifica che Il valore sarà ereditato dall’elemento padre.

Es d’uso:

p.maiusc {

font-variant:small-caps;

}

Nella pagina html se scriviamo:

<p class=”maiusc”>Questo è maiuscoletto</p>Questo è maiuscoletto</p>

si otterrà a video:

Questo è maiuscoletto

font-weight Imposta il grassetto. In realtà questa proprietà può impostare differenti ‘pesi’ per il carattere, ma a video si vedrà comunque il font normale o in grassetto.

I valori possono essere:

normal Font normale. Questo è il default.
bold Imposta il grassetto.
bolder Imposta un grassetto più forte.
lighter Imposta un font più leggero.
100

200

300

400

500

600

700

800

900

Imposta un valore per il peso del font. 400 = normal e 700 = bold.
inherit Specifica che Il valore sarà ereditato dall’elemento padre.

Es d’uso:

Nel CSS scriviamo:

p.normale {font-weight:normal;}

p.light {font-weight:lighter;}

p.bold {font-weight:bold;}

p.bolder {font-weight:900;}

e nel foglio html:

<p class=”normale”>Questo font è normal</p>

<p class=”light”>Questo font è lighter</p>

<p class=”bold”>Questo font è bold</p>

<p class=”bolder”>Questo font è bolder</p>

e a video vedremo:

Questo font è normal

Questo font è lighter

Questo font è bold

Questo font è bolder

@font-face Una regola che consente di usare font diversi dai fonts standard.

Internet Explorer supporta @font-face solo a partire dalla versione 9. Inoltre IE9 supporta solamente i font di formato .eot e non i .ttf.

Va usato indicando i seguenti descrittori:

Descrittore Valori Descrizione
font-family nome del font Obbligatorio. Definisce il nome del font.
src URL Obbligatorio. Definisce l’URL da dove va caricato il font.
font-stretch normal

condensed

ultra-condensed

extra-condensed

semi-condensed

expanded

semi-expanded

extra-expanded

ultra-expanded

Opzionale. Definisce se e quanto il font debba essere compresso od allargato. Il default è “normal”.
font-style normal

italic

oblique

Opzionale. Definisce lo stile del font. Il default è “normal”
font-weight normal

bold

100

200

300

400

500

600

700

800

900

Opzionale. Definisce se e quanto il font debba essere in grassetto o leggero. Il default è “normal”
unicode-range unicode-range Opzionale. Definisce il range di caratteri entro il quale applicare questa regola. Il default è “U+0-10FFFF”

Questa regola è decisamente interessante per poter finalmente usare, anche solo per alcuni caratteri i fonts che scegliamo noi e non quelli installati sul computer di chi ci legge. Purtroppo il comportamento dei browser come sempre, non è uniforme ed il supporto a questa regola è in alcuni casi singolare per cui varrà la pena di dedicare un’intera lezione all’uso di questa regola.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.