Dok pišemo bilo koji članak ili dokument, često su nam potrebni neki znakovi u određenim slučajevima. Na web stranici, HTML element čiji tekst treba transformirati primjenjuje se sa CSS svojstvom ' tekstualna transformacija ”. Ovo svojstvo također štedi vrijeme na takav način da nakon dodavanja svih znakova, njihova velika i mala slova mogu se transformirati odjednom.

Ovaj post će vas naučiti kako možemo promijeniti velika i mala slova teksta pomoću CSS-a. Dakle, počnimo!

Kako tekst pisati velikim i malim slovima pomoću CSS-a?

U CSS-u, ' tekstualna transformacija ” Svojstvo kontrolira korištenje velikih slova u tekstu. Također se koristi za pretvaranje teksta u velika ili mala slova.

Text-transform Property Values

Moguće vrijednosti svojstva CSS text-transform navedene su u nastavku:

• • “ velika slova ”: Ova vrijednost čini sve znakove u tekstu elementa velikim slovima.
  • “ mala slova ”: Ova vrijednost mijenja tekst elementa u mala slova.
  • “ kapitalizirati ”: Ova vrijednost mijenja veliko slovo svake riječi.
  • “ nikakav ”: Ova vrijednost ograničava tekst elementa za izmjenu.
  • “ početni ”: Ova vrijednost postavlja zadanu vrijednost.
  • “ nasljeđuješ ”: Ova vrijednost postavlja svoju vrijednost iz nadređenog elementa.

Analizirajte primjer u nastavku!

Primjer: Pretvaranje teksta u velika i mala slova

Prvo dodajte div element s nazivom klase ' kutija ”. Unutar tijela dodajte tri oznake naslova

,

i

, gdje je tekst naslova

sav napisan velikim slovima,

je malim slovima, a treći je također malim slovima.

Ispod je HTML kôd:

< div razreda = 'kutija' >
< h1 > mala slova: DOBRODOŠLI U LINUXHINT h1 >
< h2 > velika slova: dobrodošli u linuxhint h2 >
< h3 > veliko slovo: dobrodošli u linuxhint h3 >
div >

Stilska kutija div

.kutija {
visina: 200px;
širina: 80 % ;
granica: 4 px puna #e4cfcf;
boja pozadine: kadetplava;
margina: 1px auto;
ispuna: 10px;
}

Div stvoren u gornjoj HTML datoteci sada je stiliziran CSS svojstvima koja su objašnjena u nastavku:

• • “ visina ” koristi se za postavljanje visine div.
  • “ širina ” koristi se za postavljanje širine div.
  • “ granica ” Svojstvo se koristi za primjenu obruba oko elementa, koji ima širinu od 4 px, vrstu pune linije i boju #e4cfcf.
  • “ boja pozadine ” određuje boju pozadine elementa.
  • “ margina Svojstvo ” prilagođava prostor sa svake strane elementa.
  • “ podstava ” Svojstvo se koristi za stvaranje prostora oko sadržaja elementa div ili unutar ruba elementa.

Donji blokovi koda pokazuju da su svi elementi naslova oblikovani različitim vrijednostima svojstava transformacije teksta. Element

primjenjuje se sa svojstvom text-transform s vrijednošću postavljenom kao “ mala slova ”:

h1 {
tekst-transformacija: mala slova;
}

Element

primjenjuje se sa svojstvom transformacije teksta s vrijednošću postavljenom kao ' velika slova ”:

h2 {
transformacija teksta: velika slova;
}

Za

element, vrijednost svojstva text-transform postavljena je kao “ kapitalizirati ”:

h3 {
tekst-transformacija: kapitaliziraj;
}

Unosom gore navedenog koda, tekst prvog naslova pretvara se u mala slova, a drugog naslova u velika. Dok je prvo slovo svake riječi u trećem naslovu veliko:

Sjajno! Uspješno smo naučili kako pretvoriti tekst u velika, mala slova i sve velikim slovima.

Zaključak

Svojstvo tekstualne transformacije CSS-a kontrolira upotrebu velikih slova u tekstu i koristi se za promjenu malih i malih slova u tekstu dokumenta. Ovo se svojstvo odnosi na sve elemente, gdje vrijednosti ovog svojstva mogu biti velika, mala, velika ili nijedna. Ovaj blog objasnio je proceduru pretvaranja teksta u velika i mala slova pomoću svojstva CSS text-transform.