Homepage -> Guida CSS (Fogli di Stile)
Vediamo ora come impostare dei semplici CSS su una scritta; vedremo come scegliere il colore ed il font di un testo, la sua dimensione e stile.
Per fissare il colore del testo una volta per tutte bisogna scrivere nel foglio di stile:
| body { color : #000000 } |
E' inoltre possibile fissare un diverso colore per l'intestazione, o magari per il testo in corsivo:
| h1 { color : #660099 } |
em { color : #000000 } |
Così, in modo automatico, tutte le intestazioni ed il testo in corsivo verranno scritte con tali colori prefissati.
Si può scegliere di usare un particolare Font per l'intera pagina, usando la seguente dicitura:
| body { font-face:"Verdana"; } |
E' anche possibile inserire più di un font all'interno delle " ", così che, se il primo non è riconosciuto dal browser, viene usato il secondo font.
L'elemento di stile font-face consente di scegliere un font per una pagina oppure per una parte di essa. In altre parole, scrivendo un pagina con il font predefinito, essa apparirà nel browser con il carattere indicato come valore dell'elemento font-face. Invece l'elemento di stile font-family consente di stabilire una "famiglia" di font; un esempio è il Times, la cui famiglia è costituita da più singoli fonts, quali TimesRegular, TimesBold, TimesItalic, TimesOblique, TimesBoldItalic, TimesBoldOblique, etc. Ognuna delle varianti del Times rientra quindi nel font face.
I "Serif fonts" sono costituiti da lettere proporzionali tra loro ed hanno le così dette "serifs", che sono delle piccole decorazioni, quali linee, alle estremità delle singole lettere. Esempi di serif fonts sono il Times, Garamond.
I "Sans Serif Fonts"
sono anche loro proporzionali, ma non hanno decorazioni delle lettere. Esempi
sono Verdana, Arial.
Ecco un esempio:
| <html> <head> <style type = "text/css"> p { font-family: Verdana, Arial, 'Times New Roman', serif } </style> </head> <body> <p> Questa pagina è stata scritta con il carattere predefinito, ma ti appare come se fosse in Verdana e questo grazie al foglio di stile. </p> </body> </html> |
Al font prescelto può anche essere assegnato uno stile con l'elemento font-style. Questo elemento ha tre possibili valori:
Vediamo nell'esempio i tre valori applicati a tre titoli:
| <head> <style type = "text/css"> p { font-style:italic } h1 { font-style:normal } h2 { font-style:oblique } </style> </head> <body> <p> Questa riga ti appare come fosse scritta in corsivo </p> <h1> Questo titolo ti appare scritto in carattere normale </h1> <h2> Quest'altro titolo ti appare scritto in obliquo </h2> |
Il testo può essere più o meno grassettato utilizzando l'elemento di stile font-weight.
Valori ammessi sono:
Vediamo l'esempio pratico:
| <head> <style type = "text/css"> p { font-weight:bold } em { font-weight:900 } </style> </head> <body> <p> Questa riga appare in grassetto </p> <p><em> Questo riga appare in corsivo ed in grassetto molto accentuato </em></p> </body> |
Con questo elemento di stile puoi variare le dimensioni del font.
Si possono usare valori assoluti:
|
oppure valore relativi:
|
o ancora unità di misura come:
|
o una percentuale (es.: 12%).
Ecco un esempio:
| <head> <style type = "text/css"> p { font-size:x-large } em { font-size:10px } </style> </head> <body> <p> Questa riga appare scritta in carattere molto grande </p> <p><em> mentre questa appare in corsivo e di 10 pixels</em></p> </body> |
L'elemento di stile che consente di assegnare un rientro alla prima riga di un blocco di testo è text-indent.
Il valore può essere espresso in unità di misura come:
o in percentuale.
Vediamo un esempio:
| <head> <style type = "text/css"> p { text-indent:100px } </style> </head> <body> <p> La prima riga di questo testo appare rientrata di 100 pixels rispetto al resto del paragrafo: anche questo effetto si può ottenere con un elemento di stile. </p> <p> Ovviamente l'elemento di stile verrà applicato a ciascun paragrafo presente nella pagina e quindi anche questa seconda riga subirà la stessa sorte. </p> </body> |
L'elemento di stile utilizzato per allineare il testo è text-align.
Valori ammessi sono:
Vediamo un esempio con un paragrafo allineato al centro ed un altro allineato a destra, con l'ausilio, in questo caso, di una classe:
| <head> <style type = "text/css"> p { text-align:center } .all_destra { text-align:right } </style> </head> <body> <p> Questo paragrafo risulta centrato sulla pagina. </p> <p class = "all_destra"> Quest'altro parametro, al quale è associato una classe, risulta allineato a destra. </p> </body> |
Ovviamente una decorazione si può assegnare anche a dei paragrafi di testo con l'elemento di stile text-decoration, oltre che ai link.
Valori ammessi sono:
Vediamo un esempio, aiutandoci ancora con le classi:
| <head> <style type = "text/css"> p { text-decoration:none } .riga_sopra { text-decoration:overline } .riga_mezzo { text-decoration:line-through } </style> </head> <body> <p> Questo paragrafo risulta assolutamente normale. </p> <p class = "riga_sopra">Quest'altro parametro, al quale è associato una classe, risulta sovrastato da una linea. </p> <p class = "riga_mezzo">Mentre quest'ultimo paragrafo è sbarrato da una riga orizzontale </p> </body> |
Ecco un altro esempio che mostra un effetto fuoco:
Effetto testo infuocato |
| div.fire { color: #FFFFFF; font-family: Arial; font-size: 12px; font-weight: Bold; text-align: center; letter-spacing: 10px; filter: glow(color: #800000, strength: 5); } |
Eccone un altro:
Questo è un esempio di testo sfumato verso una certa direzione, stabilita dal valore di Direction. Questo effetto può essere applicato anche ad una immagine. |
| .font { FILTER:Blur(Strength=10,Direction=225); } |
Per assegnare uno spazio predefinito tra una lettera e l'altra della stessa parola si usa l'elemento di stile letter-spacing, mentre per assegnare uno spazio predefinito tra una parola e la successiva si usa l'elemento di stile word-spacing.
Il valore può essere espresso in unità di misura come:
Vediamo un esempio:
| <head> <style type = "text/css"> p { letter-spacing:7pt; word-spacing:10px } </style> </head> <body> <p> Usando questo elemento di stile ogni lettera di ciascuna parola sarà distanziata di 7 punti ed ogni parola sarà distanziata dalla successiva di 10 pixels. </p> |
L'elemento di stile text-transform serve a far sì che un paragrafo o una parte della pagina, in qualunque modo sia stata realmente scritta, appaia tutta in caratteri maiuscoli, tutta in caratteri minuscoli oppure con la prima lettera di ciascuna parola in maiuscolo.
Valori ammessi sono:
Usando le classi, è possibile un esempio realizzare una scritta simile:
| <head> <style type = "text/css"> p { text-transform:none } .maiuscolo {text-transform:uppercase } .minuscolo {text-transform:lowercase } .iniziale {text-transform:capitalize } </style> </head> <body> <p> Tutte le frasi di questa pagina sono state scritte allo stesso modo, </p> <p class = "maiuscolo"> ma questa appare tutta in maiuscolo, </p> <p class = "iniziale"> questa appare con l'iniziale di ogni parola in maiuscolo, </p> <p class = "minuscolo"> e questa tutta in minuscolo. </p> </body> |
Ecco un altro esempio di formattazione del testo:
Le prime due parole di questo paragrafo sono scritte in minuscolo ed in un formato diverso rispetto alle altre; la prima lettera ed in ogni caso le prime due parole sono scritte in realtà in minuscolo, ma compaiono in maiuscolo, grazie al seguente codice di stile: |
| <STYLE type = "text/css"> .P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase } </STYLE> |
ed il codice del paragrafo è:
| <P class = "P"><SPAN> Le prime </SPAN> due parole di questo paragrafo sono scritte in minuscolo ed in un formato diverso rispetto alle altre; la prima lettera ed in ogni caso le prime due parole sono scritte in realtà in minuscolo, ma compaiono in maiuscolo, grazie al seguente codice di stile:</P> |
Esempi simili sono i seguenti:
La prima lettera del paragrafo sarà di un bel rosso vivo. |
| #par1:first-letter { color: Red; font : bold 22px Verdana, Geneva, Arial, Helvetica, sans-serif; } |
La prima linea di questo paragrafo sarà rossa e la dimensione del font di 22 pixel. Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah |
| #par2:first-line { color: Red; font : bold 22px Verdana, Geneva, Arial, Helvetica, sans-serif; } |
Questo è un primo paragrafo con display:inline. Questo è un secondo paragrafo per il quale ho anche impostato la proprietà display:inline. Proprio per questo non compare sulla riga successiva. |
Ecco un altro esempio, in cui un paragrafo viene allineato a destra di un paragrafo ottenuto con il Tag DIV; qui si fa uso della proprietà float:
| div.box1 { width: 200px; padding: 10px; margin: 10px; border: 2px solid black; background : Silver; float : left; } |
A questo div ho applicato un float a sinistra.
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah . Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah . Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah BlahBlah Blah Blah BlahBlah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah . |
Le proprietà di padding e di margin servono rispettivamente a stabilire la distanza tra il testo ed il bordo del DIV, e la distanza tra il testo esterno del paragrafo e la cella.