|
 |
|
|
|||
           |
|||
 |
 |
 |
||||||||||||||||||||||||||||||||||||||||||||
  |
| |||||||||||||||||||||||||||||||||||||||||||||
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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.
Torna su 
| Indice Guida 
| Pagina << 5 >>
|
     |
|
--> [Il tuo link qui] |
||
| 
| 
