Durante la scrittura di qualsiasi articolo o documento, spesso abbiamo bisogno di alcuni caratteri per essere in casi specifici. In una pagina Web, l'elemento HTML il cui testo richiede di essere trasformato viene applicato con la proprietà CSS ' trasformazione del testo ”. Questa proprietà consente inoltre di risparmiare tempo in modo tale che dopo aver aggiunto tutti i caratteri, il loro caso può essere trasformato in una sola volta.

Questo post ti insegnerà come possiamo cambiare maiuscole e minuscole con i CSS. Quindi iniziamo!

Come scrivere in maiuscolo e minuscolo usando i CSS?

Nei CSS, il ' trasformazione del testo La proprietà ” controlla la maiuscola del testo. Viene anche utilizzato per convertire il testo in maiuscolo o minuscolo.

valori di proprietà di trasformazione del testo

I possibili valori della proprietà CSS text-transform sono elencati di seguito:

• • “ maiuscolo ”: questo valore rende maiuscoli tutti i caratteri nel testo dell'elemento.
  • “ minuscolo ”: questo valore trasforma il testo dell'elemento in minuscolo.
  • “ capitalizzare ”: Questo valore altera la prima lettera maiuscola di ogni parola.
  • “ nessuno ”: Questo valore restringe il testo dell'elemento per la modifica.
  • “ iniziale ”: Questo valore imposta il valore predefinito.
  • “ erediti ”: Questo valore imposta il suo valore dal suo elemento genitore.

Analizza l'esempio qui sotto!

Esempio: trasformazione del testo in lettere maiuscole e minuscole

Innanzitutto, aggiungi un elemento div con il nome della classe ' scatola ”. All'interno del corpo, aggiungi tre tag di intestazione

,

e

, dove il testo dell'intestazione

è tutto in maiuscolo,

è in minuscolo e anche il terzo è in minuscolo.

Di seguito è riportato il codice HTML:

< div classe = 'scatola' >
< h1 > minuscolo: BENVENUTI IN LINUXHINT h1 >
< h2 > maiuscolo: benvenuto in linuxhint h2 >
< h3 > maiuscolo: benvenuto in linuxhint h3 >
div >

Casella stile div

.scatola {
altezza: 200px;
larghezza: 80 % ;
bordo: 4px solido #e4cfcf;
colore di sfondo: blu cadetto;
margine: 1px automatico;
imbottitura: 10px;
}

Il div creato nel file HTML sopra è ora stilizzato con le proprietà CSS spiegate di seguito:

• • “ altezza ” è utilizzato per impostare l'altezza del div.
  • “ larghezza ” è utilizzato per impostare la larghezza del div.
  • “ frontiera ” viene utilizzata per applicare il bordo attorno all'elemento, che è di larghezza 4px, tipo di linea continua e colore #e4cfcf.
  • “ colore di sfondo ” specifica il colore di sfondo dell'elemento.
  • “ margine La proprietà ” regola lo spazio su ogni lato dell'elemento.
  • “ imbottitura La proprietà ” viene utilizzata per produrre spazio attorno al contenuto dell'elemento div o all'interno del bordo dell'elemento.

I blocchi di codice seguenti indicano che tutti gli elementi di intestazione sono stilizzati con valori diversi delle proprietà di trasformazione del testo. L'elemento

viene applicato con la proprietà text-transform con il valore impostato come ' minuscolo ”:

h1 {
text-transform: minuscolo;
}

L'elemento

viene applicato con la proprietà text-transform con il valore impostato come ' maiuscolo ”:

h2 {
text-transform: maiuscolo;
}

Per l'elemento

, il valore della proprietà text-transform è impostato come ' capitalizzare ”:

h3 {
text-transform: maiuscolo;
}

Fornendo il suddetto codice, il testo della prima intestazione viene trasformato tutto in minuscolo e la seconda intestazione in maiuscolo. Mentre la prima lettera di ogni parola è in maiuscolo nella terza intestazione:

Grande! Abbiamo imparato con successo come trasformare il testo in maiuscolo, minuscolo e tutto in maiuscolo.

Conclusione

La proprietà text-transform dei CSS controlla la maiuscola del testo e viene utilizzata per modificare le maiuscole e minuscole del testo del documento. Questa proprietà si applica a tutti gli elementi, dove i valori di questa proprietà possono essere maiuscoli, minuscoli, maiuscoli o nessuno. Questo blog ha spiegato la procedura di conversione del testo in lettere maiuscole e minuscole utilizzando la proprietà CSS text-transform.