Při psaní jakéhokoli článku nebo dokumentu často potřebujeme, aby některé znaky byly v konkrétních případech. Na webové stránce se prvek HTML, jehož text vyžaduje transformaci, použije s vlastností CSS „ textová transformace “. Tato vlastnost také šetří čas takovým způsobem, že po přidání všech postav lze jejich případ změnit najednou.

Tento příspěvek vás naučí, jak můžeme změnit textové případy pomocí CSS. Takže, začněme!

Jak psát velkými a malými písmeny pomocí CSS?

V CSS je „ textová transformace Vlastnost ” řídí velikost písmen v textu. Používá se také pro převod textu na velká nebo malá písmena.

Text-transform Property Values

Možné hodnoty vlastnosti CSS text-transform jsou uvedeny níže:

• • “ velká písmena ”: Tato hodnota změní všechny znaky v textu prvku na velká písmena.
  • “ malá písmena “: Tato hodnota změní text prvku na malá písmena.
  • “ kapitalizovat “: Tato hodnota mění první písmeno každého slova velké.
  • “ žádný “: Tato hodnota omezuje text prvku pro úpravy.
  • “ počáteční ”: Tato hodnota nastavuje výchozí hodnotu.
  • “ dědíte ”: Tato hodnota nastavuje svou hodnotu z nadřazeného prvku.

Analyzujte příklad níže!

Příklad: Transformace textu na velká a malá písmena

Nejprve přidejte prvek div s názvem třídy „ krabice “. Do těla přidejte tři značky nadpisu

,

a

, kde text nadpisu

je celý napsán velkými písmeny,

malými písmeny a třetí je také malými písmeny.

Níže je uveden HTML kód:

< div třída = 'krabice' >
< h1 > malá písmena: VÍTEJTE V LINUXHINT h1 >
< h2 > velká písmena: vítejte v linuxhintu h2 >
< h3 > velká písmena: vítejte v linuxhintu h3 >
div >

Styl box div

.krabice {
výška: 200px;
šířka: 80 % ;
ohraničení: 4px plné #e4cfcf;
barva pozadí: kadetově modrá;
okraj: 1px auto;
odsazení: 10px;
}

Div vytvořený ve výše uvedeném souboru HTML má nyní styl s vlastnostmi CSS, které jsou vysvětleny níže:

• • “ výška ” se používá pro nastavení výšky div.
  • “ šířka ” se používá pro nastavení šířky div.
  • “ okraj Vlastnost ” se používá k aplikaci okraje kolem prvku, který má šířku 4 pixely, typ plné čáry a barvu #e4cfcf.
  • “ barva pozadí “ určuje barvu pozadí prvku.
  • “ okraj Vlastnost ” upravuje prostor na každé straně prvku.
  • “ vycpávka ” vlastnost se používá k vytvoření prostoru kolem obsahu prvku div nebo uvnitř ohraničení prvku.

Níže uvedené bloky kódu označují, že všechny prvky nadpisu mají styl s různými hodnotami vlastností transformace textu. Prvek

se použije s vlastností text-transform s hodnotou nastavenou jako „ malá písmena “:

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

Prvek

se použije s vlastností text-transform s hodnotou nastavenou jako „ velká písmena “:

h2 {
text-transform: velká písmena;
}

Pro prvek

je hodnota vlastnosti text-transform nastavena jako „ kapitalizovat “:

h3 {
text-transform: velká písmena;
}

Poskytnutím výše uvedeného kódu se text prvního nadpisu celý převede na malá písmena a druhý nadpis na velká písmena. Zatímco první písmeno každého slova je ve třetím záhlaví velké:

Skvělý! Úspěšně jsme se naučili, jak převést text na velká, malá a celá velká.

Závěr

Vlastnost text-transform CSS řídí velká písmena v textu a používá se ke změně velkých a malých písmen v textu dokumentu. Tato vlastnost se vztahuje na všechny prvky, kde hodnoty této vlastnosti mohou být velká, malá, velká nebo žádná. Tento blog vysvětlil postup převodu textu na velká a malá písmena pomocí vlastnosti CSS text-transform.