Text-transform

CSS vlastnost text-transform určuje převod na velká nebo malá písmena.

text-transform
hodnoty převedení velikosti písmen
none nic se nepřevádí
capitalize první písmena všech slov budou velká
uppercase všechna písmena se převedou na velká
lowercase všechna písmena se převedou na malá

Vlastnost text-transform ovlivňuje pouze zobrazení. Samotný text ve zdroji samozřejmě ovlivněný nebude. Jedná se o téměř zbytečnou vlastnost, zejm. hodnota capitalize je dost drsná :-)

Podpora

Podpora vlastnosti
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer všechny verze  
Firefox všechny verze  
Opera všechny verze  
Chrome ano  

Příklady

<h2 style="text-transform:uppercase;">Nějaký nadpis</h2>

se zobrazí jako NĚJAKÝ NADPIS. Pokud se ten text bude kopírovat a vkládat, opět se objeví malými.

Eliminace lennosti

Máte-li nekvalitně udržovaný text, zejména menu se střídavě velkými a malými počátečními písmeny, můžete si usnadnit unifikaci. Hodí se na to pseudoelement first-letter. Dejme tomu, že mám texty v prvcích li:

<ul>
<li>text s malým na začátku</li>
<li>Text s velkým na začátku</li>
</ul>

Patřičný styl to vyřeší:

<style>
li:first-letter {text-transform: capitalize;} /* nebo uppercase */
</style>

Všechna začáteční písmena pak budou velkými. (Testováno v Exploreru 6.)

Zobrazit tento příkald: Sjednocení velikosti začátečních písmen

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.