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:
- Serif Il termine si traduce in italiano "grazie" ed e' consigliabile per lunghe sezioni di testo. Due casi tipici di font serif sono times new roman o garamond
<STYLE>
BODY { font-family:serif }
</STYLE>
- Sans Serif Senza grazie. Tipici gli arial e gli helvetica
<STYLE>
BODY { font-family:"sans serif" }
</STYLE>
- Cursive Font corsivi che imitano la calligrafica umana.
<STYLE>
BODY { font-family:cursive }
</STYLE>
- Fantasy Caratteri decorativi come, per esempio, comic sans
<STYLE>
BODY { font-family:fanct }
</STYLE>
- Monospace Questi font hanno la caratteristica di occupare uno spazio identico. Gli altri caratteri, infatti, occupano uno spazio per lettera proporzionale alla stessa. Un classico font monospace e' il courier.
<STYLE>
BODY { font-family:monospace }
</STYLE>
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:
- Punti: questa unita' di misura viene abbreviata con la sigla pt. Ogni punto rappresenta 1/72 di pollice. I punti fanno riferimento esclusivamente allo spazio verticale occupato sullo schermo, mentre la larghezza aumenta proporzionalmente all'aumentare della misura verticale.
<STYLE>
BODY { font-size:12pt }
</STYLE>
- Pixel: si tratta dei punti presenti su uno schermo, e variano a seconda della risoluzione consentita dal monitor ed impostata dall'utente. Ai pixel si fa riferimento in molti esempi Javascript e per tutte le risoluzioni video consigliate (solitamente 800x600)
<STYLE>
BODY { font-size:12px }
</STYLE>
- Pollici: classica unita' di misura anglosassone, i pollici sono espressi dall'abbreviazione in
<STYLE>
BODY { font-size:1in }
</STYLE>
- Centimetri: unita' di misura comune di molti paesi occidentali ma poco usata nell'ambito della Web grafica
<STYLE>
BODY { font-size:3cm }
</STYLE>
- Percentuale: unita' di misura svincolata da valori predeterminati e variabili. Il valore percentuale si riferisce alla grandezza di default impostata nel browser. Per cui di fronte ad un browser che visualizza di default dei font a 14 pixel, un valore del 200% corrisponde a 28 pixel. Tale misura e' variabile da utente ad utente.
<STYLE>
BODY { font-size:200% }
</STYLE>
La misurazione in percentuale fa parte di un sistema di dimensionamento relativo, cioe' dipendente dalla misura corrente del browser. Esistono altri valori in sostituzione della percentuale analizzata in precedenza.
<STYLE>
BODY { font-size:smaller }
</STYLE>
definisce il font immediatamente piu' piccolo rispetto a quello di default.
<STYLE>
BODY { font-size:larger }
</STYLE>
il contrario del precedente: definisce il font immediatamente piu' grande rispetto a quello impostato dal browser.
<STYLE>
BODY { font-size:2em }
</STYLE>
La misura di riferimento e' sempre quella di default, cio' che cambia è il valore di riferimento stabilito in misura di 1:x
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
Attributi margini e allineamento
