CSS



Gli attributi per il font  (carattere)

Prima di passare in rassegna le categorie di attributi vorrei ricordare la loro sintassi per poterli adoperare, e questo qualunque sia il modo che deciderete di usare.

Gli attributi devono essere inseriti all'interno di parentesi graffe { } e laddove in HTML verrebbe usato un "=" (uguale) viene invece usato ":" (due punti). Argomenti consecutivi sono separati da ";" (punto e virgola) invece che da "," (virgola). Inoltre molti argomenti sono divisi da - (trattini) anche se questi fanno parte integrante del nome stesso.

Per i parametri ad essi associabili fare riferimento a questa tabellina.



Passiamo in rassegna gli attributi per il carattere:




font-family : famiglia1 famiglia2 famiglia3 ;
Si possono elencare più famiglie di caratteri per dare la possibilità al browser di selezionare quella presente sulla macchina del visitatore. Si tenterà di visualizzare la prima specificata per poi passare a quelle successive nel caso in cui non fossero presenti quelle precedenti. A questo proposito è opportuno descrivere le possibili alternative partendo proprio da quelle più rare.

Le famiglie si separano da uno spazio vuoto o da una virgola e nel caso in cui il nome della famiglia fosse composto da più di una sola parola, per esempio: MS Sans Serif, questo dovrà essere racchiuso fra virgolete (doppie o singole) "MS Sans Serif".


P    {font-family: verdana,arial,geneva;}
DIV  {font-family: "MS Sans Serif", verdana, arial;}
B    {font-family: "MS Sans Serif" verdana arial;}



font-family: 'MS Serif', 'New York', serif;
font-family: verdana, arial;




font-size : lunghezza | dim. assoluta | dim. relativa | percentuale ;
Si possono esprimere le dimensioni del font facendi riferimento a uno dei quattro possibili attributi, vedi anche tabellina parametri.

Di solito si adoperano i punti (pt), ma qualsiasi altro parametro andrà sintatticamente bene.


P    {font-size: 12pt;}
I    {font-size: larger;}
B    {font-size: 22mm;}
H1   {font-size: 150%;}


font-size: 12pt
font-size: 150%




font-style : normal | italic | oblique;
Si puo eseguire il rendering dei caratteri in corsivo.


P    {font-style: italic;}
H1   {font-style: normal;}


font-style: italic;
font-style: normal




font-variant : normal | small-caps ;
Simile a font-style assegna tutte maiuscole grandi per le lettere maiuscole e maiuscole piccole per le lettere minuscole. normal per rimuovere il tutto.


P    {font-variant: small-caps;}
H1   {font-variant: normal;}


font-variant: small-caps;
font-variant: normal




font-weight : bold | bolder | lighter | normal;
Per impostare lo spessore del testo. Oltre ai parametri sopra è possibile introdurre anche un numero da 100 a 900 con incremanti di 100, e soltanto a partire dal valore 700 si avvertirà l'effetto grassetto.


P    {font-weight: bold;}
H1   {font-weight: 700;}


font-weight: bold;
font-weight: lighter;




Vi ricordo due indirizzi sui quali reperire ulteriori informazioni:  specifiche del W3C , dove troverete tutti gli attributi e i parametri ammessi e supportati dai CSS1 e :  specifiche per i nuovi CSS2   dove alcuni di questi non sono ancora supportati da nessun browser, almeno non fino alle versioni 5.5 di IE e 6 di NS.

Andrea Bianchi



Continua: Colore e sfondo





© Andrea Bianchi 1997-1998-1999-2000-2001