Odseky alebo obsahy buniek tabuliek môžete zarovnať podľa vašich želaní pomocou nasledujúcich vlastností. Tieto vlastnosti sa však môžu uplatňovať aj na všetky ostatné prvky, ktorým je pridelená definovaná alebo vypočítaná výška alebo šírka.
Zarovnanie prvého riadku
Začnime vlastnosťou text-indent. Týmto nastavíte, ako má byť odsadený prvý riadok odseku. Je možné aj "odsadenie" doľava. Na to je potrebné použiť negatívnu hodnotu text-indent. (Podrobnejšie informácie o tom, kedy môže byť takéto extrémne odsadenie užitočné, budú nasledovať neskôr). Očakáva sa numerická hodnota.
Príklad:
.absatz { text-indent: 2em; }
V prehliadači to vyzerá nasledovne:
Ak použijete negatívnu hodnotu, prvý riadok sa odsunie doľava.
.absatz {
text-indent: -2em;
}
A tu je opäť pohľad na výsledok v prehliadači:
Podobné možnosti sú teda možné. Pri definovaní odsadení si však dávajte pozor, aby boli obsahy stále čitateľné, ak je to žiadané. V skutočnosti vlastnosť text-indent môže byť zaujímavá aj v súvislosti s optimalizáciou vyhľadávačov. Občas by sme napríklad radšej zobrazovali obrázky namiesto textu.
Ak však má byť text pre vyhľadávače stále k dispozícii, ocitnete sa na začiatku dilemy. Tento dilema sa dá vyriešiť použitím vlastnosti text-indent. Táto vlastnosť vám totiž umožňuje, ako už viete, posúvať texty. Môžete teda texty skryť pred očami návštevníkov.
Výhoda varianty s text-indent: Text, ktorý má byť nahradený obrázkom, zostáva v pôvodnom kóde nezmenený.
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
Týmto spôsobom sa prvku h1 priradí pozadie. (Vlastnosť background bola v tejto sérii už predstavená). Pomocou text-indent: -99999px sa text nadpisu posunie o 99999 pixelov doľava. Viditeľný text sa tak už nezobrazí. Teraz sa zobrazuje skutočne iba obrázok.
Ak zrušíte štýlovací súbor, text sa však zobrazí normálne.
Nastavenie výšky riadkov
font-size).Vlastnosťou
line-height môžete stanoviť výšku riadkov. Sú povolené číselné hodnoty. Možné sú aj percentuálne hodnoty. Tieto sa potom vzťahujú na veľkosť písma prvku, pre ktorý bola výška riadkov špecifikovaná. Pred definovaním výšky riadkov si však všimnite nasledujúce: Môže sa stať, že prehliadač/Zariadenie poskytne prioritný popis výšky riadkov pred inými vlastnosťami a prvky zobrazí odrezané, ak budú vyššie. To môže byť najmä pri obrázkoch nepríjemné. Testujte preto výsledky pred uverejnením stránky online.Nasledujúci príklad ukazuje, ako použiť
<p style="line-height:1.4em; font-size:1em;">Niekedy vytvoríte skvelé rozloženie, ale chýbajú ešte fotografie a ak používate iba prázdne rámy, rozloženie bude zdať sa celkom odvážne. Dá sa to ale aj lepšie:<br /> V tomto video-tréningu vám ukážem najlepšie webové adresy, odkiaľ rýchlo získate bezplatné vhodné miesta na umiestnenie obrázkov. Geniálny zoznam nájdete napríklad <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">tu</a>.</p> <p style="line-height:2em;font-size:1em;">Niekedy vytvoríte skvelé rozloženie, ale chýbajú ešte fotografie a ak používate iba prázdne rámy, rozloženie bude zdať sa celkom odvážne. Dá sa to ale aj lepšie:<br /> V tomto video-tréningu vám ukážem najlepšie webové adresy, odkiaľ rýchlo získate bezplatné vhodné miesta na umiestnenie obrázkov. Geniálny zoznam nájdete napríklad <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">tu</a>.</p> <p style="line-height:1em; font-size:1em;">Niekedy vytvoríte skvelé rozloženie, ale chýbajú ešte fotografie a ak používate iba prázdne rámy, rozloženie bude zdať sa celkom odvážne. Dá sa to ale aj lepšie:<br /> V tomto video-tréningu vám ukážem najlepšie webové adresy, odkiaľ rýchlo získate bezplatné vhodné miesta na umiestnenie obrázkov. Geniálny zoznam nájdete napríklad <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">tu</a>.</p>
Tu boli definované tri odseky, ktorým boli priradené rôzne výšky riadkov.
Ako vidíte, veľkosťou riadkov sa dá veľmi silno ovplyvniť čitateľnosť plynulého textu. Preto sa opatrne obchádzajte s line-height.
Nakoniec sa samozrejme pýta otázka, akú veľkosť riadkov by ste mali vlastne vybrať. Obvykle sa považuje za vhodné používať výšku riadkov medzi 130 a 150 percentami.
p {
line-height: 150%;
}
Nakoniec, dobrá čitateľnosť závisí predovšetkým od šírky riadkov písma. Tu platí: Výška riadkov by mala byť čím väčšia, tým dlhšie sú textové riadky. Preto si určite otestujte stránku s cieľom zachovať skutočnú čitateľnosť.
Horizontálne zarovnávanie textu
Pomocou vlastnosti text-align sa nastavuje horizontálne zarovnávanie odsekov textu a iných plávajúcich textov alebo inlinových prvkov obsiahnutých v blokových elementoch. Nasledujúce hodnoty môžu byť nastavené pre text-align:
• left – zarovnanie doľava
• right – zarovnanie doprava
• center – zarovnané na stred
• justify – zarovnanie do blokového textu
Tu je opäť príklad:
<!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 takto vyzerá výsledok vo webovom prehliadači:
Všimnite si, že vlastnosť text-align sa vzťahuje nielen na textový obsah. Táto vlastnosť skutočne platí pre všetky inlinové prvky. Ak je teda vložený obrázok, definícia text-align sa vzťahuje aj na tento prvok.
Jedno upozornenie: text-align by sa podľa oficiálnej špecifikácie CSS nemal uplatňovať na blokové elementy. (Aj keď existujú prehliadače, ktoré ju aplikujú aj na blokové prvky). Ak chcete zarovnávať blokové prvky, vo týchto prípadoch použite už predstavené vlastnosti margin.
