CSS, maiuscole e minuscole con text-transform

di Michele Costanzo Commenta

CSS text-transform
Proseguiamo la serie di guide dedicate al trattamento del testo tramite i fogli di stile CSS. Nella precedente occasione abbiamo visto come utilizzare la proprietà font-variant per creare l’effetto ‘maiuscoletto’. Sempre in tema di maiuscole e minuscole analizzeremo ora la proprietà text-transform.

Testo maiuscolo o minuscolo con text-transform

La proprietà text-transform applicata ad un selettore di HTML indica al browser come rappresentare il testo in termini di lettere maiuscole o minuscole. Prendiamo come esempio una breve porzione di codice:

p {
  text-transform: uppercase;
  /* rappresenta il testo tutto in maiuscolo */
}

Nel nostro esempio abbiamo utilizzato la proprietà text-transform in abbinamento con l’elemento P di HTML ma ovviamente il discorso resta analogo per qualsiasi altro tag. text-transform può assumere quattro diversi valori:

  • none: è il valore di default ed indica al browser che il testo andrà rappresentato con maiuscole e minuscole riprese dal codice HTML. Si può omettere a meno che non occorra sovrascrivere localmente una disposizione di livello superiore.
  • uppercase: indica al browser che il testo andrà rappresentato con tutti i caratteri maiuscoli.
  • lowercase: indica al browser che il testo andrà rappresentato con tutti i caratteri minuscoli.
  • capitalize: indica al browser che il testo andrà rappresentato con il primo carattere di ogni parola in maiuscolo.

Perché usare text-transform nei CSS

L’uso della proprietà text-transform risponde pienamente alla logica dei fogli di stile CSS. Grazie a questo elemento infatti il testo HTML potrà essere rappresentato con la corretta distribuzione di maiuscole e minuscole affidando al foglio di stile la sua resa a video.

Modificando il valore della proprietà text-transform si potrà in qualsiasi momento modificare l’aspetto finale del testo senza dover modificare il codice HTML delle pagine.

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>