Negli esempi a completamento di questo articolo, non a caso ho usato l'attributo BODY. I fogli di stile, infatti, riconoscono questo attributo come valore di default di tutto il documento. Un po' come accade per il tag <BODY> in HTML classico. Quindi, tutto cio' che viene inserito all'interno di BODY sara' assegnato all'intero documento.
Per gli esempi ho usato fogli di stile incorporati, i quali possono tranquillamente raccogliersi in un file esterno secondo quanto visto nel capitolo "css esterni".

Attributo font-family

Elenca la famiglia di font per lo stile di una pagina o di porzioni di essa. Si consideri, per esempio, di voler stabilire un font tipo "arial" per tutto il documento. Quello che segue e' il modo corretto di impostare lo stile:

<STYLE>
BODY { font-family:arial }
</STYLE>


E' possibile stabilire diversi ordini di preferenza, per cui in mancanza del primo font il browser interpreta il successivo. Per fare questo i nomi delle famiglie di font devono essere separate da una virgola.
Per nome di famiglia si intende uno dei caratteri quali Arial, courier new, times new roman, impact e innumerevoli altri. I font con nomi composti da piu' termini vanno inseriti tra apici doppi:

<STYLE>
BODY { font-family:arial, "courier new", impact }
</STYLE>


Un'ultima alternativa e' quella di servirsi di un nome generico di font. Si intendono con questo termine gruppi di font che seppur non identici, hanno delle peculiarita' che li accomunano. In questo modo il browser cerchera' il font disponibile sul computer del navigatore, in base all'indicazione del nome generico:

<STYLE>
BODY { font-family:serif }
</STYLE>


I fogli di stile riconoscono 5 categorie di font generici:

Attributo font-size

Questo attributo stabilisce la dimensione del testo. Mentre HTML standard prevede soltanto 7 livelli predefiniti per la grandezza del testo (da font size=1 a font size=7), i fogli di stile peremettono un controllo molto piu' preciso ed elastico, che non soffre di nessuna limitazione.

E' possibile impostare lo stile in base a cinque diverse unita' di misura:

Attributo font-style

Questo attributo indica lo stile per il font. E' possibile impostare l'attributo su diversi valori:

<STYLE>
BODY { font-style:normal }
</STYLE>


Normal non visualizza alcuno stile particolare e si rifa' a quello stabilito di default dal browser. E' possibile sostituire "roman" a "normal"

<STYLE>
BODY { font-style:italic }
</STYLE>


Il classico testo corsivo che ben conosciamo da HTML classico e da tutti gli editor di testo.

<STYLE>
BODY { font-size:oblique }
</STYLE>


Questo attributo funziona apparentemente come "italic", ma se ne differenzia perche' rende obliquo verso destra il normale font, e non richiede il caricamento di un altro carattere come per italic.

Attributo font-variant

Questo attributo e' simile a font-size, ma se ne differenzia perche' assegna uno stile tutto maiuscolo. Se non e' disponibile sulla macchina client la versione a maiuscole grandi del font, lo stile usera' le maiuscole adattandone le misure. I valori da assegnare sono "normal" e "small-caps"

<STYLE>
BODY { font-variant: small-caps }
</STYLE>


Attributo font-weight

L'attributo font-weight stabilisce lo spessore del font come BOLD per HTML classico. E' possibile assegnare a questo attributo 7 differenti valori:

<STYLE>
BODY { font-weight: extra-light }
</STYLE>


<STYLE>
BODY { font-weight: demi-light }
</STYLE>


<STYLE>
BODY { font-weight: light }
</STYLE>


<STYLE>
BODY { font-weight: medium }
</STYLE>


<STYLE>
BODY { font-weight: extra-bold }
</STYLE>


<STYLE>
BODY { font-weight: demi-bold }
</STYLE>


<STYLE>
BODY { font-weight: bold }
</STYLE>


Attributo text-decoration

Questo attributo consente di abbellire il testo con sottolineature e altri effetti. Puo' assumere diversi valori: none, underline, italic e line-height:

<STYLE>
BODY { text-decoration: none }
</STYLE>


<STYLE>
BODY { text-decoration: underline }
</STYLE>


<STYLE>
BODY { text-decoration: italic }
</STYLE>


<STYLE>
BODY { text-decoration: line-height }
</STYLE>


Un altro effetto molto in voga in questi ultimi tempi e' quello che elimina le sottolineature dai link. Per fare questo e' necessario impostare per i font incorporati il seguente codice:

<STYLE>
A { text-decoration: none }
</STYLE>


e per i fogli di stile in linea il seguente codice:

<A HREF="http://www.fauser.edu" STYLE="text-decoration: none">Fauser.edu</A>

Sulla falsariga di questo esempio sara' possibile impostare i fogli di stile incorporati in modo tale che la sottolineatura appaia solo quando il mouse sfiora i link:

<STYLE>
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
</STYLE>


In questo modo, quando il link e' inattivo non e' sottolineato, mentre quando il mouse sfiora il link viene attivata la sottolineatura.
Questo esempio funziona perfettamente con Internet Explorer, mentre con Netscape rende privo di sottolineatura il testo ma non riconosce A:hover.
Per ulteriori esempi e informazioni sull'argomento si rimanda alla sezione effetti su testo e link



Css esterni Vai all'argomento precedente        Attributi margini e allineamento Vai all'argomento successivo