La sintassi Abbiamo detto che hanno un loro elemento (tag) che viene specificato in html, si tratta dell'elemento: <style> e relativa chiusura </style> questo elemento serve ad informare il browser che si tratta di stili che apporteranno le dovute modifiche agli elementi di html definiti. La dichiarazione di style deve essere collocata all'interno dei tags <head> e </head> della pagina web, unica eccezione per le definizioni direttamente in linea.
Fondamentalmente sono tre i modi di usare i css, quale sia il migliore lo lascio decidere a voi visto che dipende soltanto da voi, dal vostro modo di organizzarvi e dalle vostre reali esigenze:
1. Direttamente In linea
2. Ad inizio pagina a stile incorporato
3. Nel collegamento ad un foglio di stile esterno
Ognuno di questi tre possibili modi differisce leggermente dall'altro, lo vedremo più avanti quando li analizzeremo uno per uno.
Le regole comuni sono invece quelle che gli attributi devono essere inseriti all'interno di parentesi graffe { } 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.
Vediamo un possibile style. Immaginiamo di volere assegnare al nostro testo una leggera indentazione (12 pixel) con allineamento giustificato; che tradotto significa avere un leggero rientro del testo ad inizio paragrafo con allineamento poi su entrambi i lati esattamente come quello che state vedendo in questa pagina.
{text-align : justify; text-indent : 12px} |
Abbiamo adoperato l'attributo text-align con il parametro justify per il testo giustificato, mentre l'attributo text-indent con il parametro 12 pixel per l'indentazione ad inizio paragrafo.
Da notare in questa fase di apprendimento soltanto la sintassi: parentesi graffa, attributo, due punti, parametro, punto e virgola, attributo, due punti, parametro, parentesi graffa.
Le parentesi graffe non sono presenti nelle tastiere italiane, si possono ottenere con i codici ascii 123 e 125, praticamente tenendo premuto il tasto ALT sinistro, si digiti dal tastierino numerico il relativo numero, senza rilasciare il tasto ALT se non a fine digitazione... spero di essermi spiegato :-))
Per conoscere quali siano gli attributi e i relativi parametri possibili, vi rimando alle voci del menù laterale gli attributi di stile e i parametri dove è possibile vedere un'ampia panoramica, più o meno completa, di quelli che sono i più comuni e di conseguenza i più adoperati.
Abbiamo detto che uno stile può essere associato ad un elemento valido di html, per cui se associamo il nostro stile all'elemento <body> sarà come aver definito uno style per tutta la pagina web, essendo infatti body in html l'elemento che comprende tutta la pagina. Alcuni esempi di possibili stili:
body {font-size : 10pt; color : #000099;}
B {font-size : 12pt; color : #ff0000;}
I {font-size : 8pt; font-style : italic;}
|
Vediamo i tre esempi sopra, il primo: body ha un font formato da 10 punti e di colore blu scuro per cui tutto il testo all'interno di quella pagina seguirà questo stile perchè l'elemento html body si riferisce a tutto il documento html. Un po' quello che ho fatto io con questa pagina.
B ( bold in html) invece, aumenta il font di 2 punti rispetto a quello definito in body così da evidenziarlo maggiormente e in più ne cambia anche il colore passando dal blu al rosso.
I ( Italico in html ) mantiene lo stile Italic ma ne riduce il font di due punti rispetto a quello standard definito nel body.
Se avete capito il meccanismo, se vi risulta tutto quanto chiaro, non resta che vedere meglio come associare lo stile ai vari elementi html e per fare questo vi ricordo che i metodi sono tre. Iniziamo dal primo, forse il più semplice ed immediato, quello in linea.
Andrea Bianchi
© Andrea Bianchi 1997-1998-1999-2000-2001