Absázky nebo obsah buněk tabulek můžete zarovnat podle svých přání pomocí následujících vlastností. Tyto vlastnosti lze použít i na všechny ostatní prvky, které mají přiřazenou definovanou nebo vypočtenou výšku nebo šířku.
Odsazení prvního řádku
Začínáme vlastností text-indent
. Tímto způsobem určíte, jak má být odsazen první řádek odstavce. Možné je také odsazení doleva. K tomu je třeba použít negativní hodnotu text-indent
. (Podrobné informace o tom, kdy může být extrémní odsazení užitečné, následují). Očekává se číselná hodnota.
Příklad:
.odstavec { text-indent: 2em; }
V prohlížeči to vypadá takto:
Pokud použijete negativní hodnotu, dojde k odsazení textu v prvním řádku.
.odstavec { text-indent: -2em; }
A zde je příklad výsledku v prohlížeči:
Pokud však chceme, aby byl text stále dostupný pro vyhledávače, ocitneme se před dilematem. To lze vyřešit použitím vlastnosti text-indent
. Tato vlastnost vám totiž umožňuje posunout texty. Takže můžete texty vymanit z očí návštěvníků.
Výhoda variace text-indent
: Text, který má být nahrazen obrázkem, zůstává v kódu nezměněn.
<h1>PSD-Tutorials.de</h1> ... h1 { background: url(logo.png) 0 0 no-repeat; text-indent: -99999px; height:200px; }
Tímto zápisem se h1
elementu přiřadí pozadí. (Vlastnost background
byla v této řadě již představena). Pomocí text-indent: -99999px
se text nadpisu posune o 99999 pixelů doleva. Text se tedy již nezobrazuje. Zobrazen je pouze obrázek.
Pokud se vypne stylopis, text se opět zobrazí normálně.
Nastavení výšky řádku
O výšce řádku jsem již jednou hovořil v souvislosti s obecnou vlastností font
. Nyní se budeme více zabývat tímto tématem. Definice výšky řádku v souvislosti se velikostí písma (font-size
) je zajímavá.
Výška řádku se určuje pomocí vlastnosti line-height
. Povoleny jsou číselné hodnoty. Procentuální hodnoty jsou rovněž možné. Ty se vztahují k velikosti písma prvku, pro který byla výška řádku uvedena. Před definicí výšky řádku si také pamatujte na následující: Může se stát, že prohlížeč/nebo zařízení poskytne výšce řádku přednost před jinými vlastnostmi a prvky zobrazí oříznuté, pokud jsou vyšší. To může být nežádoucí zejména u obrázků. Proto otestujte výsledky, než zveřejníte stránku online.
Následující příklad ukazuje, jak použít vlastnost line-height
.
<p style="line-height:1.4em; font-size:1em;">Někdy můžete vytvořit skvělé rozložení, ale stále chybí fotografie, a když použijete pouze prázdné rámce, rozložení vypadá docela holohlavě. Existuje lepší řešení:<br /> V tomto videu vám ukážu nejlepší webové adresy, kde rychle získáte zdarma odpovídající obrázkové zástupce. Skvělý seznam najdete např. zde <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">zde</a>.</p> <p style="line-height:2em;font-size:1em;">Někdy můžete vytvořit skvělé rozložení, ale stále chybí fotografie, a když použijete pouze prázdné rámce, rozložení vypadá docela holohlavě. Existuje lepší řešení:<br /> V tomto videu vám ukážu nejlepší webové adresy, kde rychle získáte zdarma odpovídající obrázkové zástupce. Skvělý seznam najdete např. zde <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">zde</a>.</p> <p style="line-height:1em; font-size:1em;">Někdy můžete vytvořit skvělé rozložení, ale stále chybí fotografie, a když použijete pouze prázdné rámce, rozložení vypadá docela holohlavě. Existuje lepší řešení:<br /> V tomto videu vám ukážu nejlepší webové adresy, kde rychle získáte zdarma odpovídající obrázkové zástupce. Skvělý seznam najdete např. zde <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">zde</a>.</p>
Zde byly definovány tři odstavce textu, kterým byly přiděleny různé řádkové výšky.
Jak vidíte, řádková výška může velmi silně ovlivnit čitelnost běžných textů. Proto buďte opatrní s line-height
.
Jde samozřejmě o to, jaká řádková výška by měla být zvolena. Obvykle se pohybujeme v rozmezí řádkových výšek mezi 130 a 150 procenty.
p { line-height: 150%; }
Nicméně dobrá čitelnost závisí především na šířce písma. Zde platí: Řádková výška by měla být co největší, čím delší jsou textové řádky. Určitě tedy otestujte stránku, zda je čitelnost zachována.
Vodorovné zarovnání textu
Pomocí vlastnosti text-align
se nastavuje vodorovné zarovnání odstavců a jiných prvků obsahujících běžný text nebo vnořené prvky blokových prvků. Pro vlastnost text-align
lze nastavit následující hodnoty:
• left
– zarovnání vlevo
• right
– zarovnání vpravo
• center
– zarovnané na střed
• justify
– zarovnat do bloku
Zde je opět ukázka:
<!DOCTYPE html> <html> <head> <style> h1 {text-align:center} h2 {text-align:left} h3 {text-align:right} </style> </head> <body> <h1>PSD-Tutorials.de</h1> <h2>PSD-Tutorials.de</h2> <h3>PSD-Tutorials.de</h3> </body> </html>
A vypadá to ve webovém prohlížeči takto:
Pamatujte, že text-align
se nevztahuje pouze na textové obsahy. Tato vlastnost platí skutečně pro všechny vnořené prvky. Takže pokud je vloženo obrázek, platí definice text-align
i pro tento prvek.
Poznámka: text-align
by se podle oficiální specifikace CSS nemělo ovlivňovat blokové prvky. (I když existují prohlížeče, které ho používají i na blokové prvky). Pokud chcete zarovnat blokové prvky, v těchto případech použijte již představené vlastnosti margin
.