|
Le Classi
Qualunque sia il modo style che abbiamo scelto di usare le "classi"
ci permettono di creare nuovi elementi (tags) di html che sfruttano al
meglio le potenzialità dei css (fogli style).
Le classi di stile si possono infatti
definire con estrema facilità e con altrettanta semplicità queste saranno poi
richiamate dall'interno dei vari elementi html.
Per definire una classe è sufficiente editare un nome qualsiasi preceduto da un
punto. Il nome non ha importanza ma è meglio se attinente con l'effetto che
dovrà produrre in modo tale da essere ricordato con maggiore facilità quando
avremo bisogno di adoperarlo.
Immaginiamo di volere
creare una classe che serva per la nostra firma, quella che di solito
mettiamo alla fine della pagina, alla quale daremo il nome .firma e che farà uso di un font piccolo e di colore rosso in stile italico.
Richiamiamo dal nostro editor il file .css se si trattava di un foglio esterno, altrimenti portatevi all'interno della zona style posizionandoci fuori da eventuali parentesi graffe, possiamo descrivere la nostra classe
firma assegnandole i vari attributi:
.firma {
font-family: Verdana,Arial,sans-serif;
color: #ff0000;
font-size: 10pt;
text-align: center;
font-weight: lighter;
font-style: italic;
} |
font-family: Verdana,Arial,sans-serif;
significa che adopererà il font verdana , se questo non fosse installato sul PC del visitatore si cercherà Arial , nel caso mancasse anche quello si passerà a san-serif e così via, si possono specificare fino a tre fonts alternativi, nel caso in cui nessuno dei tre fosse installato verrà visualizzato quello standard di default.
color: #ff0000;
Colore rosso, si possono esprimere i colori in formato esadecimale facendoli precedere dal segno pound # (cancelletto), oppure scrivendo il nome del colore in lingua inglese.(vedi
pagina).
font-size: 10pt;
Dimensioni del font: 10 punti, potevamo esprimere il valore anche in pixel o in centimetri o anche in altri modi che vedremo in seguito. In pixel forse è addirittura meglio che in punti perchè si adatterà perfettamente
e senza limiti alla risoluzione video qualunque essa sia.
text-align: center;
Allineamento del testo, in
questo caso centrato, si poteva scegliere fra left, right, justify.
font-weight: lighter;
Consistenza del font, lighter; leggera, potevamo adoperare: normal, bolder, bold o anche numeri: 400, 500 ecc. ecc.
font-style: italic;
Stile Italico, avevamo a disposizione anche :normal, oblique.
|
Adesso la classe è pronta,
non resta che richiamarla ogni volta che serve, basterà assegnare la classe "firma"
all'elemento (tag) che ci interessa, nel caso nostro <p class="firma">.
In questo caso tutto ciò che verrà scritto in questo paragrafo fino alla
chiusura </p> rispetterà i parametri definiti nella classe
(firma).
L'elemento html altro non è che un contenitore, per cui potremo continuare ad usare
<p> con classi diverse ed avere così
paragrafi formattati in modo completamente diverso, basterà semplicemente
cambiare il nome della classe facendogli richiamare una classe creata
precedentemente.
Un esempio chiarirà meglio:
<p class="firma">questo
testo rispetta gli attributi della classe firma sopra definiti</p>
Questo il risultato:
questo testo rispetta gli attributi della classe firma
sopra definiti
Continua:
I
selettori ID |
