Nella pagina Font sono stati descritti gli elementi disponibili per definire il testo;
non consentono molto e, volendo usare più volte una stessa formattazione, è necessario ripetere
ad ogni ricorrenza tutte le definizioni.
I fogli di stile (Cascading Style Sheets CSS) contengono insiemi di definizioni associati a dei
nomi. Dichiarando questi nomi, si possono applicare tutte le definizioni associate, in tutto il
documento, senza doverle ripetere punto per punto.
Queste definizioni devono essere dichiarate, nel blocco HEAD del documento, inserite fra gli
elementi <STYLE> e </STYLE>.
Le definizioni di stile sono dette: interne se inserite direttamente in un documento (valgono solo per quel documento),
esterne se le definizioni sono inserite in un file separato (esterno al documento).
Questi file dovranno essere dichiarati in ogni documento in cui si voglia applicare le
definizioni contenute.
I fogli di stile sono stati introdotti da poco, non tutti gli elementi sono
supportati dai vari browser, è opportuno provare accuratamente il risultato su vari browser.
Per esemplificare: si voglia che i titoli di paragrafo (in questo documento "taggati" <h4>
-corsivo, 12 punti-) siano in colore blu e alti 14 punti; nel corpo HEAD occorre inserire queste
linee:
<head>
....
<style>
h4 {color:blue; font-size:14pt} ____notare che le varie proprietà vanno separate da ; ....
</style>
</head>
Le parentesi graffe ({ e }) normalmente non sono presenti sulla tastiera; esse
si possono ottenere tenendo premuto il tasto ALT, digitando (sul tastierino numerico),
rispettivamente, 123 e 125 e rilasciando il tasto ALT.
Per mettere la stessa regola in un foglio di stile esterno, a cui può essere dato un nome
quasliasi, p.e. STILE1.CSS (l'estensione deve essere .CSS), bisogna:
aprire un nuovo file in ASCII (con blocco note, non con word o wordpad) e scrivere le seguenti
righe:
/* stile numero 1 */______________riga di commento, non necessaria. h4 {color:blue; font-size:14pt}
Il file va salvato col nome scelto (STILE1.CSS).
Nel blocco HEAD del documento che deve seguire lo stile definito in STILE1.CSS, occorre
inserire la riga:
<head>
....
LINK HREF="stile1.css" REL="stylesheet"
....
</head>
L'attributo REL specifica le relazioni esistenti fra il documento corrente ed il documento
collegato.
L'uso di un foglio di stile esterno consente di avere le stesse formattazioni in tutti i documenti
e, apportando una modifica al foglio, si modificano automaticamente tutti i documenti che usano
quel foglio di stile.
Metodi di selezione
Per una maggiore versatilità sono previsti alcuni modi per selezionare gli indicatori.
I più usati sono:
SELEZIONE DI PIU' ELEMENTI.
Semplice metodo per semplificare la scrittura del codice delle
regole in comune a più elementi. Per esempio invece di:
<STYLE>
H2 {COLOR:CYAN}
H3 {COLOR:CYAN}
</STYLE>
si può scrivere:
<STYLE>
H2, H3 {COLOR:CYAN}
</STYLE>
SELEZIONE AND.
Si può definire una regola specificando due, o più, selettori.
La regola viene applicata solo in presenza di tutti i selettori indicati. Per esempio
la regola, seguente contenente i selettori H2 e I,
<STYLE>
H2 I {COLOR:magenta}
</STYLE>
si applica solo alle parti del testo definite sia come H2 che come I; le altre parti definite
solo con H2, solo con I, o con altre combinazioni, mantengono le regole generali. Notare che
la differenza, fra questo metodo ed il precedente, è solo la assenza della virgola di
separazione dei descrittori.
SELEZIONE CON L'ATTRIBUTO CLASS.
L'attributo CLASS permette di creare dei tag
personalizzati. E' possibile definire parti del testo, che hanno un significato particolare
come "totale" o "potenza", con elementi che abbiano un nome stabilito dal programmatore. Questo
metodo agevola la scrittura e la correzione di codici con ripetute definizioni, di parti del testo,
abbastanza complesse.
Essenzialmente l'attributo CLASS prevede tre forme di utilizzo:
con l'elemento DIV, con l'elemento SPAN e generale. Il nuovo nome deve essere dichiarato,
nell'elemento STYLE, preceduto da un punto.
A) USO CON L'ELEMENTO DIV. Si usa per definire un blocco di testo, quale un paragrafo,
normalmente definito con l'elemento DIV.
Dichiarazione nel blocco HEAD del nome "POTENZA":
<STYLE>
DIV.POTENZA {COLOR:YELLOW}
</STYLE>
Il testo interessato va definito con:
<DIV CLASS="POTENZA"> testo da formattare </DIV>
B) USO CON L'ELEMENTO SPAN. Si usa come si userebbero i tag <b>, <i>, ecc. per
definire una parte di un testo.
P.e. si può definire in corsivo, grassetto e verde
il nome di una ditta "BASV" nella frase "la ditta BASV
produce..", e dove altro si voglia nel testo, dichiarando nel blocco HEAD la classe SPAN.DITTA:
la ditta <SPAN CLASS="DITTA">BASV</SPAN> produce..
C) USO GENERALE. Si usa per gli altri elementi di definizione del testo.
Dichiarazione nel blocco HEAD del nome "PREZZI":
<STYLE> .PREZZI {COLOR: ORANGE}
</STYLE>
Per applicare quest'attributo CLASS all'elemento P:
<P CLASS="PREZZI">qualunque testo</P>
Proprietà per i font in CSS
I fogli di stile CSS prevedono moltissime poprietà; i browser ne supportano poche, volendo usarle
è necessario un collaudo attento. Le più importanti sono: FONT-FAMILY Indica le famiglie di font che dovrebbero essere usate con il testo del
documento. Possono essere indicate più famiglie nel caso che il browser non disponga del primo
font scelto. Possono essere indicate anche famiglie generiche (serif, sans serif, monospace).
Un esempio è:
<STYLE>
P {FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF}
</STYLE>
FONT-SIZE Definisce la dimensione dei caratteri con la possibilità di usare le nove unità
di misura riportate nella tabella seguente:
unità
sigla
descrizione
Centimetro
cm
Un centimetro.
Em
em
Larghezza della lettera "m" maiuscola nel font corrente.
Ex
ex
Altezza della lettera x nel font corrente.
Pollice
in
Pollice americano standard (25,4 mm).
Millimetro
mm
Un millimetro.
Relativo
%
Valore relativo alle dimensioni base del font corrente.
Pica
pc
Unità standard equivalente a 12 punti.
Pixel
px
Dimensione di un pixel sullo schermo.
Punto
pt
Dimensione standard equivalente a 1/72 di pollice.
Come esempio:
<STYLE>
P {FONT-FAMILY: ARIAL, HELVETICA; FONT-SIZE:1,2pc}
</STYLE>
FONT-WEIGHT Nei fogli CSS è possibile definire quattro intensità dei caratteri: NORMAL,
BOLD, BOLDER, LIGHTER; non sempre vengono supportati.
Come esempio:
<STYLE>
P {FONT-FAMILY: ARIAL, HELVETICA; FONT-SIZE:1,2pc; FONT-WEIGHT: BOLD}
</STYLE>
LETTER-SPACING Nei fogli CSS è possibile regolare lo spazio che separa le lettere (kerning).
Lo spazio va definito in una delle unità di misura in tabella.
Come esempio:
<STYLE>
P {FONT-SIZE:1,2pc; FONT-WEIGHT: BOLD; LETTER-SPACING: 2pt}
</STYLE>
TEXT-INDENT Nei fogli CSS è possibile regolare lo spazio di rientro all'inizio di paragrafo
(indentazione).
Lo spazio va definito in una delle unità di misura in tabella. Il valore può avere anche segno negativo
Come esempio:
<STYLE>
P {FONT-SIZE:1,2pc; FONT-WEIGHT: BOLD; LETTER-SPACING: 2pt; TEXT-INDENT: -5px}
</STYLE>
COLOR Nei fogli CSS è possibile definire il colore dei caratteri con il nome o con il codice
esadecimale.
Come esempio:
<STYLE>
P {FONT-SIZE:1,2pc; FONT-WEIGHT: BOLD; LETTER-SPACING: 2pt; COLOR: ACQUA}
</STYLE>
BACKGROUND-COLOR Nei fogli CSS è possibile definire il colore di fondo del testo.
Come esempio:
<STYLE>
P {FONT-SIZE:1,2pc; FONT-WEIGHT: BOLD; LETTER-SPACING: 2pt; BACKGROUND-COLOR: LIME}
</STYLE>
Valori di spaziatura a livello di paragrafo
Nei fogli CSS è possibile definire anche la spaziatura intorno ai paragrafi. Sono disponibili
tre proprietà:
BORDER Definisce un'area cornice intorno al testo; dispone di tre attibuti:
PADDING Definisce un'area compresa fra il testo ed il bordo definito con BORDER, se
questo non è definito si riferisce al limite esterno dell'area scrivibile.
La proprietà PADDING può anche essere differenziata con:
PADDING-TOP (in alto), PADDING-BOTTOM (in basso), PADDING-LEFT (a sinistra), PADDING-RIGHT
(a destra).
L'ampiezza dello spazio va definita in una delle unità di misura in tabella.
Come esempio:
<STYLE>
P {FONT-SIZE:1,2pc; PADDING-LEFT: 26pt; PADDING-RIGHT: 22pt}
</STYLE>
MARGIN Definisce l'area compresa fra l'esterno del bordo definito con BORDER ed il
limite dell'area scrivibile; se non è stato definito il bordo, MARGIN definisce l'area fra
il testo ed il limite dell'area scrivibile.
La proprietà MARGIN può anche essere differenziata con:
MARGIN-TOP, MARGIN-BOTTOM, MARGIN-LEFT, MARGIN-RIGHT
aree di spaziatura a livello paragrafo
margin
border
padding
TESTO
TESTO
TESTO
TESTO
TESTO
TESTO
verificare come viene visualizzato questo schema da Explorer e da
Netscape.