Pri písaní akéhokoľvek článku alebo dokumentu často potrebujeme, aby boli nejaké znaky v konkrétnych prípadoch. Na webovej stránke sa prvok HTML, ktorého text vyžaduje transformáciu, použije s vlastnosťou CSS „ textová transformácia “. Táto vlastnosť tiež šetrí čas takým spôsobom, že po pridaní všetkých postáv sa ich prípad môže zmeniť naraz.

Tento príspevok vás naučí, ako môžeme zmeniť textové prípady pomocou CSS. Takže, začnime!

Ako písať veľké a malé písmená pomocou CSS?

V CSS je „ textová transformácia Vlastnosť ” riadi veľkosť písmen v texte. Používa sa tiež na prevod textu na veľké alebo malé písmená.

Text-transform Property Values

Možné hodnoty vlastnosti CSS text-transform sú uvedené nižšie:

• • “ veľké písmená “: Táto hodnota zmení všetky znaky v texte prvku na veľké písmená.
  • “ malými písmenami “: Táto hodnota zmení text prvku na malé písmená.
  • “ kapitalizovať “: Táto hodnota zmení prvé písmeno každého slova na veľké.
  • “ žiadny “: Táto hodnota obmedzuje text prvku na úpravu.
  • “ počiatočné ”: Táto hodnota nastavuje predvolenú hodnotu.
  • “ dedíš ”: Táto hodnota nastavuje svoju hodnotu z nadradeného prvku.

Analyzujte príklad nižšie!

Príklad: Transformácia textu na veľké a malé písmená

Najprv pridajte prvok div s názvom triedy “ box “. Do tela pridajte tri značky nadpisu

,

a

, pričom text nadpisu

je celý napísaný veľkými písmenami,

malými písmenami a tretí je tiež malými písmenami.

Nižšie je uvedený HTML kód:

< div trieda = 'box' >
< h1 > malé písmená: VITAJTE V LINUXHINT h1 >
< h2 > veľké písmená: vitajte v linuxhinte h2 >
< h3 > veľké písmená: vitajte v linuxhinte h3 >
div >

Štýlový box div

.box {
výška: 200px;
šírka: 80 % ;
orámovanie: 4px plné #e4cfcf;
farba pozadia: kadetská modrá;
okraj: 1px auto;
výplň: 10px;
}

Div vytvorený vo vyššie uvedenom súbore HTML má teraz štýl s vlastnosťami CSS, ktoré sú vysvetlené nižšie:

• • “ výška ” sa používa na nastavenie výšky div.
  • “ šírka ” sa používa na nastavenie šírky div.
  • “ hranica Vlastnosť ” sa používa na aplikovanie okraja okolo prvku, ktorý má šírku 4 pixely, typ plnej čiary a farbu #e4cfcf.
  • “ farba pozadia “ určuje farbu pozadia prvku.
  • “ marža vlastnosť upraví priestor na každej strane prvku.
  • “ vypchávka ” vlastnosť sa používa na vytvorenie priestoru okolo obsahu prvku div alebo vo vnútri okraja prvku.

Nižšie uvedené bloky kódu naznačujú, že všetky prvky nadpisov majú štýl s rôznymi hodnotami vlastností transformácie textu. Element

sa použije s vlastnosťou text-transform s hodnotou nastavenou ako „ malými písmenami “:

h1 {
text-transform: malé písmená;
}

Element

sa použije s vlastnosťou text-transform s hodnotou nastavenou ako „ veľké písmená “:

h2 {
text-transform: veľké písmená;
}

Pre prvok

je hodnota vlastnosti text-transform nastavená ako „ kapitalizovať “:

h3 {
text-transform: veľké písmená;
}

Poskytnutím vyššie uvedeného kódu sa celý text prvého nadpisu zmení na malé písmená a druhý nadpis na veľké písmená. Zatiaľ čo prvé písmeno každého slova je veľké v treťom nadpise:

Skvelé! Úspešne sme sa naučili, ako transformovať text na veľké, malé a všetky veľké.

Záver

Vlastnosť text-transform CSS riadi kapitalizáciu textu a používa sa na zmenu veľkosti písmen v texte dokumentu. Táto vlastnosť sa vzťahuje na všetky prvky, kde hodnoty tejto vlastnosti môžu byť veľké, malé, veľké alebo žiadne. Tento blog vysvetlil postup prevodu textu na veľké a malé písmená pomocou vlastnosti CSS text-transform.