Questo è un paragrafo standard con testo in Verdana 12px. Ci servirà da termine di paragone per le nostre trasformazioni. Tutti gli stili dei paragrafi sono stati definiti con delle classi.
Codice:
.p1 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
Il testo di questo paragrafo è in Verdana 12px. Abbiamo applicato la proprietà font-size-adjust.
Codice:
.p2 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-size-adjust: 1.5;
}
Il testo di questo paragrafo dovrebbe apparire molto espanso.
Codice:
.p3 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-stretch: ultra-expanded;
}
Il testo di questo paragrafo dovrebbe apparire molto compatto.
Codice:
.p4 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-stretch: ultra-condensed;
}
Il testo di questo paragrafo sarà tutto in maiuscoletto.
Codice:
.p5 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
font-variant: small-caps;
}
Lo spazio tra le lettere di questo paragrafo sarà più ampio del normale. Abbiamo applicato la proprietà letter-spacing con valore positivo.
Codice:
.p6 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 5px;
}
Lo spazio tra le lettere di questo paragrafo sarà notevolmente contratto. Abbiamo applicato la proprietà letter-spacing con valore negativo: letter-spacing 5px;
Codice:
.p6bis {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: -5px;
}
Il testo di questo paragrafo e degli altri due è indentato di 20px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Codice:
.p7 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-indent: 20px;
}
Il testo di questo paragrafo dovrebbe un'ombreggiatura blu.
Codice:
.p8 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-shadow: 5px 5px Blue;
}
Il testo di questo paragrafo dovrebbe essere tutto in maiuscolo, ma nel codice è scritto in minuscolo.
Codice:
.p11 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
}
IL TESTO DI QUESTO PARAGRAFO DOVREBBE ESSERE TUTTO MINUSCOLO, MA NEL CODICE è SCRITTO TUTTO IN MAIUSCOLO. POTENZA DI TEXT-TRANSFORM.
Codice:
.p11bis {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: lowercase;
}
Notate la prima lettera di ogni parola: maiuscola.
Codice:
.p11 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: capitalize;
}
Il testo di questo paragrafo dovrebbe mantenere gli spazi bianchi presenti nel codice.
Codice:
.p9 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
white-space: pre;
}
Il testo di questo paragrafo non mantiene gli spazi bianchi presenti nel codice e dovrebbe apparire tutto su una riga. Per far vedere come funziona abbiamo aggiunto queste parole insignificanti ma utili allo scopo.
Codice:
.p9bis {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
white-space: nowrap;
}
Le parole di questo paragrafo dovrebbero essere più spaziate del normale, esattamente di 15px.
Codice:
.p10 {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
word-spacing: 15px;
}