|
LA SINTASSI
Tutto ciò che in html
si trova specificato fra i tag <style> e la sua relativa chiusura
</style> serve per informare il browser che si tratta di stili che
modificano gli elementi html. Questa dichiarazione di style deve
normalmente essere indicata fra i tags <head> e </head> della
pagina tranne che per la modalità direttamente in linea nella quale
<style> e </style> bastano quale parametro del tag.
I tre modi in cui si
utilizzano i CSS differiscono leggermente uno dall'altro e dovete
essere voi a decidere quale utilizzare per soddisfare le vostre esigenze.
-
Direttamente
In
linea
-
Ad inizio pagina con lo
stile incorporato
nella pagina
-
Con un collegamento ad
un vero e proprio
foglio stile esterno alla pagina
I tre modi d'utilizzo non
si escludono tra loro, anzi, al contrario si combinano in modo perfetto
integrandosi in modo da essere sfruttati al massimo.
La sintassi prevede che che
gli attributi devono essere inseriti all'interno di parentesi graffe { }
laddove in html verrebbe usato un "="
(uguale) viene invece usato ":" (due punti).
Gli argomenti consecutivi sono separati da ";" (punto e virgola) invece che da
"," (virgola).
Gli stessi argomenti sono separati dal - (trattino) che è parte
integrante del nome dell'argomento
<style>
P {text-align: justify; text-indent: 18px}
</style> |
Osservate questa dichiarazione di stile che assegna
al nostro testo una leggera indentazione di 18px e lo allinea su entrambi i lati come dimostra il testo che state
leggendo in questa cella.
|
Come vedete abbiamo
associato al tag html <P> (paragrafo) l'attributo text-align con il parametro
justify per giustificare il testo, mentre con l'attributo text-indent
con valore 18px abbiamo indentato il testo come visibile nella
dimostrazione a destra della dichiarazione nella quale va notata la sintassi
utilizzata.
Se non lo sapete per
digitare le parentesi graffe, non presenti nelle tastiere italiane, si utilizza
il codice ascii 123 (aperta) e 125 (chiusa) che si ottiene
digitando il numero 123 o 125 tenendo contemporaneamente premuto il tasto ALT
sinistro oppure, a mo di pianista, premere in modo contemporaneo il tasto
Alt GR assieme al tasto Shift (maiuscole) e uno dei tasti
parentesi [ ] che vengno tramutate in { }.
Attributi e parametri
utilizzabili meritano un approfondimento al quale vi rimando alle pagine
attributi di stile e
parametri
dove troverete una esauriente panoramica degli attributi più comunemente usati.
Se associamo il nostro stile all'elemento
<body> sarà come aver definito uno style per tutta la pagina web, (nell'esempio precedente ci eravamo limitati al solo tag
P di paragrafo).
<style>
body {text-align:justify;font-size: 10pt; color: Blue;}
strong {font-size: 12pt; color: Red;}
em {font-size: 8pt; font-style: italic; color: Green;}
</style> |
Osservate questa dichiarazione di stile che assegna
al nostro testo dimensione 10pt e colore blu (#000099) e lo allinea su entrambi
e applica ad una parte un
bold (strong) di 12pt di colore
rosso e un
italic (em) di 8pt di colore verde
(#008000) come dimostrato nel testo che state
leggendo in questa cella.
|
Il parametro strong
(bold in html) aumenta il font a 12pt bold rispetto i 10pt normale definito in
body e passa il testo dal colore Blue (#000099) al colore Red .
Il parametro em (italic
in html) diminusce il font a 8pt italic rispetto i 10pt normale definito in
body e passa il testo dal colore Blue (#008000) al colore Green .
E' anche possibile associare le stesse definizioni a più elementi:
<style>
h1,h2,h3{font-size: 10pt; color: Blue;}
h4,h5{font-size: 10pt; color: Red;}
h6{font-size: 11pt; font-style: italic;color: Green;}
</style> |
elemento h1,h2,h3 (dimensione 10pt colore blu
(#000099) elemento h4 e h5
(dimensione 10pt colore rosso (#FF0000)
elemento h6
(dim. 11pt italic colore verde(#008000) |
L'utilizzo di uno qualunque dei tag dichiarati: h1, h2, h3, h4, h5, h6 produrrà
la formattazione del testo come definito con i parametri all'interno delle
graffe.
Passiamo ora ad analizzare le varie tecniche per
associare lo stile agli elementi html e ricordandovi che le modalità sono tre
iniziamo da quello sicuramente più semplice e facilmente intuibile, lo stile
in linea.
Continua:
stile in linea |
