Durante la scrittura di qualsiasi articolo o documento, spesso abbiamo bisogno di alcuni personaggi per essere in casi specifici. Su una pagina Web, l'elemento HTML il cui testo richiede di essere trasformato viene applicato con la proprietà CSS "trasformata di testo". Questa proprietà consente anche di risparmiare tempo in modo tale che dopo aver aggiunto tutti i personaggi, il loro caso può essere trasformato immediatamente.

Questo post ti insegnerà come possiamo cambiare i casi di testo con CSS. Quindi iniziamo!

Come testi maiuscolo e minuscolo usando CSS?

In CSS, il “trasformata di testo"La proprietà controlla la capitalizzazione del testo. Viene inoltre utilizzato per convertire il testo in maiuscolo o minuscolo.

Valori delle proprietà trasformati di testo

I possibili valori della proprietà CSS Testo-Transform sono elencati di seguito:

• • "maiuscolo": Questo valore rende capitalizzati tutti i caratteri nel testo dell'elemento.
  • "minuscolo": Questo valore cambia il testo dell'elemento in minuscolo.
  • "capitalizzare": Questo valore altera la prima lettera di ogni parola in capitolo.
  • "nessuno": Questo valore limita il testo dell'elemento per la modifica.
  • "iniziale": Questo valore imposta il valore predefinito.
  • "ereditare": Questo valore imposta il suo valore dal suo elemento genitore.

Analizzare l'esempio di seguito!

Esempio: trasformare il testo in maiuscolo e minuscolo

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

,

, E

, dove il testo del

L'intestazione è tutto in maiuscolo,

è in minuscolo e il terzo è anche in minuscolo.

Di seguito è riportato il codice HTML:

minuscolo: benvenuto a Linuxhint

maiuscola: benvenuto a Linuxhint

Capitalizza: benvenuto a Linuxhint

Style Box Div

.scatola
Altezza: 200px;
larghezza: 80%;
bordo: 4px solido #e4cfcf;
Background-color: CadetBlue;
Margine: 1px Auto;
imbottitura: 10px;

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

• • "altezza"È utilizzato per impostare l'altezza del div.
  • "larghezza"È utilizzato per impostare la larghezza del div.
  • "confine"La proprietà 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 dell'intestazione sono disegnati con diversi valori delle proprietà di trasformazione del testo. IL

L'elemento viene applicato con la proprietà di testo della proprietà con il valore impostato come "minuscolo":

H1
Testo-trasformata: minuscolo;

IL

L'elemento viene applicato con la proprietà Testo-Transform con il valore impostato come "maiuscolo":

H2
Testo-trasformata: maiuscolo;

Per

Elemento, il valore della proprietà Testo-trasformata è impostato come "capitalizzare":

H3
Testo-trasformata: capitalizza;

Fornendo il codice sopra menzionato, il testo della prima intestazione viene tutto trasformato in lettere minuscole e la seconda intestazione in maiuscolo. Mentre la prima lettera di ogni parola è capitalizzata nella terza intestazione:

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

Conclusione

La proprietà di trasformazione del testo di CSS controlla la capitalizzazione del testo e viene utilizzata per modificare i casi del testo del documento. Questa proprietà si applica a tutti gli elementi, in cui i valori di questa proprietà possono essere maiuscole, minuscole, capitalizzare o nessuno. Questo blog ha spiegato la procedura di conversione del testo in maiuscolo e minuscolo utilizzando la proprietà CSS Testo-Transform.