Vlastnosti ovlivňující text

Pomocí CSS stylů lze upravit zobrazení textu. Je monžé nastavit fornt písma, řez či velikost. Samozřejmostí je barva textu či pozadí, ale to se obvykle řadí do vlastnosti bloků než do vlastností textu.

Vlastnosti ovlivňující font, jsou zařazeny pod souhrnnou vlastnost "font". Mají ale i infividuální vlasntosti s prefixem "font-". Jedná se o tyto vlastnosti.

  • font-size - nastavuje velikost písma. Je možné použít jak absolutní jednotky, tak relativní. Podrobnosti viz samostatná kapitola.
  • font-family - určuje, jaký řez písma se použije. Je třeba brát v potaz, že počítač, který stránky zobrazuje musí daný fonz mít k dispozici. Proto je možné uvést fontů více oddělené čárkou a prohlížeč použije ten, který má k dispzici, přičemž hledá zleva do prava. Obsahuje-li název fontu mezeru, je třeba jej uvést do uvozovek. Podrobnosti viz samostatná kapitola.
  • font-variant - může nabývat hodnot normal, nebo small-caps což znamená kapitálky

Příklad použití

<div style="font-variant: small-caps">Text s hodntou small-caps.</div>

  • font-weight - zdůrazňuje vyznačený text tučným písmem. I když norma definuje několik úovní tučnosti, tak prohlížeče umí pouze krajní hodnoty a to buď normal - tedy běžný řez písma, nebo bold - tučné písmo.

Příklad použití

<div style="font-weight: bold">Text s hodntou bold.</div>

  • font-style - nastavuje u mísma řez kurziva. Docílí se toho hodnotou italic. Naopak, běžný řez je definován hodnootou normall.

Příklad použití

<div style="font-style: italic">Text s hodntou italic.</div>

Další vlastnosti jsou uvedeny s prefixem "text-", Tyto vlastnosti je nutné používat individuálně a neexistuje k nim sdružená vlastnost.

jedná se o:

  • text-transform - dokáže transformovat vlastní znaky textu a to z velkých na malá písmena  a opačně. Může nabývat těchto hodnot: none – bez transformace , capitalize – první písmeno každého slova převede navelké, uppercase – všechny znaky převede na velká písmena, lovercase – všechny znaky převede na malá písmena

Příklad použití

<div style="text-transform: uppercase">Text převedený na velká písmena.</div>

  • text-align - tato vlastnost nastavuje zarovnání textu. Zde se chová odlišně prohlížeč Internet Explorer, který zarovnává jak text, tak veškeré vnořené blokové prvky. Je tedy obvykle třeba upravt HTML kód tak, aby případné blokové prvky byly zanořeny ještě v dalším bloku, ve kterém se zarovnání přenastaví. Vše bude patrné na příkladu. Hodnoty, kterých může vlastnost nabývat jsou tyto (význak je snad zřejmý): left, right, centr a justify;

Příklad použití

<div style="text-align: right;">Text zarovnaný doprave.</div>

<div style="text-align: left;">Text zarovnaný doleva.</div>

<div style="text-align: center;">Text zarovnaný na střed.</div>

  • text-decoration - tato vlastnost nastavuje podtržení, nadtržení či přeškrtnutí textu a to pomocí hodnot: underline, uperline, line-through. Hodnota none naopak znamná, že se tato vlastnot nevyužije.

Příklad použití

<div style="text-decoration: underline">Podtržený text</div>

<div style="text-decoration: line-through">Přeškrtnuutý  text</div>

  • text-ident - nastavuje iniciálu, tedy zvětšení prvního písmene slova přesněkolik řádků.
Naposledy změněno: Pondělí, 31. října 2016, 09.34