Come fare il testo in maiuscolo o minuscolo in CSS

Per trasformare il testo tutto in maiuscolo o minuscolo è particolarmente utile il linguaggio CSS. I fogli di stile ci permettono di trasformare l'estetica dei caratteri, indipendentemente da come sono scritti nel codice sorgente HTML.

La proprietà in questione si chiama text-transform e prevede tre possibilità:

  1. uppercase ( tutto in maiuscolo )
  2. lowercase ( tutto in minuscolo )
  3. capitalize ( prima lettera maiuscola per ogni parola ).

Facciamo un esempio pratico, proviamo a scrivere il seguente codice.

<html>
<head>
<style type="text/css">
.foglio1 { text-transform:uppercase; }
</style>
</head>
<body>
<p class=foglio1>tutto in maiuscolo</p>
</body>
</html>

La frase "tutto in maiuscolo" è stata scritta appositamente in minuscolo. Tuttavia, il paragrafo che contiene il testo è associato alla classe "foglio1" che prevede la visualizzazione del testo in maiuscolo ( uppercase ).

Pur essendo scritto a lettere minuscole, il testo viene visualizzato sul browser dell'utente con lettere maiuscole.

TUTTO IN MAIUSCOLO

Allo stesso modo possiamo trasformare tutto il testo in minuscolo, utilizzando il parametro lowercase, oppure possiamo fare in modo che ogni lettera iniziale della frase sia visualizzata in maiuscolo mediante il parametro capitalize.

La proprietà text-trasform del linguaggio CSS è particolarmente utile per formattare automaticamente la visualizzazione dei titoli delle pagine web, in modo tale da compensare eventuali sviste manuali.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base
  1. Cos'è il CSS