În timp ce scriem orice articol sau document, de multe ori avem nevoie de unele caractere pentru a fi în cazuri specifice. Pe o pagină web, elementul HTML al cărui text necesită a fi transformat este aplicat cu proprietatea CSS „ text-transformare ”. Această proprietate economisește, de asemenea, timp, astfel încât după adăugarea tuturor personajelor, cazul lor poate fi transformat deodată.

Această postare vă va învăța cum putem schimba cazurile de text cu CSS. Asadar, hai sa incepem!

Cum să textul cu majuscule și minuscule folosind CSS?

În CSS, „ text-transformare ” proprietate controlează scrierea cu majuscule a textului. De asemenea, este utilizat pentru a converti textul în majuscule sau litere mici.

Valori de proprietate text-transform

Valorile posibile ale proprietății CSS text-transform sunt enumerate mai jos:

• • „ majuscule ”: Această valoare face ca toate caracterele din textul elementului să fie scrise cu majuscule.
  • „ litere mici ”: Această valoare schimbă textul elementului în minuscule.
  • „ valorifica ”: Această valoare modifică prima literă a fiecărui cuvânt cu majuscule.
  • „ nici unul ”: Această valoare restricționează textul elementului pentru modificare.
  • „ iniţială ”: Această valoare setează valoarea implicită.
  • „ moștenești ”: Această valoare își stabilește valoarea din elementul părinte.

Analizați exemplul de mai jos!

Exemplu: Transformarea textului în majuscule și minuscule

Mai întâi, adăugați un element div cu numele clasei „ cutie ”. În interiorul corpului, adăugați trei etichete de antet

,

și

, unde textul titlului

este tot cu litere mari,

este cu litere mici, iar al treilea este tot cu litere mici.

Mai jos este codul HTML:

< div clasă = 'cutie' >
< h1 > minuscule: Bine ați venit la LINUXHINT h1 >
< h2 > majuscule: bun venit la linuxhint h2 >
< h3 > capitalize: bun venit la linuxhint h3 >
div >

Caseta de stil div

.cutie {
înălțime: 200px;
lăţime: 80 % ;
chenar: 4px solid #e4cfcf;
culoare de fundal: cadetblue;
marja: 1px automat;
umplutură: 10px;
}

Div-ul creat în fișierul HTML de mai sus este acum stilat cu proprietăți CSS care sunt explicate mai jos:

• • „ înălţime ” este utilizat pentru setarea înălțimii div.
  • „ lăţime ” este utilizat pentru setarea lățimii div.
  • „ frontieră Proprietatea ” este utilizată pentru a aplica chenarul în jurul elementului, care este de 4px lățime, tip linie continuă și culoare #e4cfcf.
  • „ culoare de fundal ” specifică culoarea de fundal a elementului.
  • „ marginea ”proprietatea ajustează spațiul de pe fiecare parte a elementului.
  • „ umplutura „proprietatea este utilizată pentru a produce spațiu în jurul conținutului elementului div sau în interiorul chenarului elementului.

Blocurile de cod de mai jos indică faptul că toate elementele de antet sunt stilate cu valori diferite ale proprietăților de transformare a textului. Elementul

este aplicat cu proprietatea text-transform cu valoarea setată ca „ litere mici ”:

h1 {
text-transform: minuscule;
}

Elementul

este aplicat cu proprietatea text-transform cu valoarea setată ca „ majuscule ”:

h2 {
text-transform: majuscule;
}

Pentru elementul

, valoarea proprietății text-transform este setată ca „ valorifica ”:

h3 {
text-transform: capitalize;
}

Prin furnizarea codului menționat mai sus, textul primului titlu este transformat în litere mici, iar al doilea titlu în majuscule. Întrucât prima literă a fiecărui cuvânt este scrisă cu majuscule în al treilea titlu:

Grozav! Am învățat cu succes cum să transformăm textul în majuscule, litere mici și totul cu majuscule.

Concluzie

Proprietatea de transformare a textului a CSS controlează scrierea cu majuscule a textului și este utilizată pentru a schimba majusculele textului documentului. Această proprietate se aplică tuturor elementelor, unde valorile acestei proprietăți pot fi majuscule, minuscule, majuscule sau niciuna. Acest blog a explicat procedura de conversie a textului în majuscule și litere mici folosind proprietatea CSS text-transform.