Kaskádové styly III.

Jiří Kosek ml.

Dnes se zaměříme na nejdůležitější vlastnosti, které ovlivňují formátování textu odstavce a formátování celé stránky.

Formátování textu

Mezi nejznámější atribut, kterým lze popsat formátování odstavce, je způsob zarovnání. K jeho určení slouží vlastnost text-align, která může nabývat jedné ze čtyř hodnot: left (zarovnání na levý praporek), right (zarovnání na pravý praporek), center (centrování) a justify (zarovnání do bloku). Vidíme, že pomocí této vlastnosti můžeme efektivně řídit způsob zarovnání, který bychom v klasickém HTML museli u každého odstavce nastavit zvlášť pomocí atributu ALIGN.

Další důležitou vlastností je line-height. Ta určuje velikost řádkování. Můžeme ji zadat buď absolutně (14pt) nebo relativně jako násobek či procento velikosti písma. Aby se text dobře četl, mělo by být řádkování alespoň o 2 body větší než písmo. S délkovými jednotkami, které můžeme používat pro určování velikosti řádkování jsme se seznámili v předešlém díle seriálu.

Když můžeme ovlivnit výšku řádky, můžeme ovlivnit i to, jak se na této řádce budou jednotlivé elementy vertikálně zarovnávat. K tomu slouží vlastnost vertical-align. Z HTML již známe hodnoty top, bottom a middle. Zajímavou možností je sub a super. Ty zajistí, že element bude umístěn jako dolní resp. horní index. Standardní hodnotou je baseline, která zajistí vyrovnání účaří elementu s účařím okolí. Při vertikálním zarovnání můžeme použít i procenta. Interpretují se jako posunutí elementu nahoru o poměrnou část výšky řádky. Pokud chceme, aby byl nějaký element posunut o čtvrtinu řádky dolů, použijeme deklaraci vertical-align: -25%.

Další užitečnou vlastností je text-indent. Umožňuje nastavit velikost odstavcové zarážky -- tj. o kolik bude první řádka odstavce odsazena. Můžeme použít buď absolutní určení délky nebo relativní jako procento z šířky nadřazeného elementu (tím je běžně šířka okna prohlížeče).

Pokud potřebujeme nějaký text zvýraznit p r o s t r k á n í m, použijeme vlastnost letter-spacing, která udává délku mezery, která se vloží mezi jednotlivé litery.

Použití vlastností si ukážeme na malém příkladě (výsledek je na obrázku 1):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Použití stylů</TITLE>
<STYLE><!--
   EM { letter-spacing: 4px;  /* zvýraznění bude */
        font-style: normal }  /* prostrkáno */
   P  { text-indent: 30px;    /* odstavcová zarážka */
        text-align: justify } /* zarovnání do bloku */
   BLOCKQUOTE { text-align: center; /* centrování */
                line-height: 150% } /* řádkování 1,5 */
--></STYLE>
</HEAD>
<BODY>
<P>Náš ukázkový odstavec bude v prohlížečích, které
podporují <EM>kaskádové styly</EM> krásně zarovnán do
bloku. Všimněte si odstavcové zarážky, která byla
získána bez použití několika pevných mezer
(<CODE>&amp;nbsp;</CODE>) na jeho začátku.

<BLOCKQUOTE>
Nemusí pršet, hlavně když kape. A aby měla voda kudy
téci, uděláme větší mezery mezi řádky.
</BLOCKQUOTE>
</BODY>
</HTML>

Obr. 1: Ukázky formátování odstavce

Formátování

Abychom správně pochopili všechny vlastnosti, které ovlivňují formátování stránky, musíme se seznámit s formátovacím modelem, který je v CSS používán. V tomto modelu je výsledkem zobrazení každého elementu jeden nebo několik obdélníkových boxů. Všechny boxy se skládají ze samotného obsahu elementu. Kromě toho mohou obsahovat vnitřní okraj, rámeček a vnější okraj (viz obr. 2).

Obr. 2: Formátovací model

K nastavení velikosti vnějšího okraje slouží vlastnosti začínající na margin. margin-top (horní okraj), margin-right (pravý okraj), margin-bottom (spodní okraj) a margin-left (levý okraj). Obdobně k nastavení velikosti vnitřního okraje slouží vlastnosti začínající na paddinga pro velikost rámečku jsou zde vlastnosti začínající na border. U rámečku lze kromě jeho velikosti nastavit i barvu border-color a styl border-style. Styl rámečku můžeme nastavit například na hodnoty: none (žádný rámeček), solid(plný) či double (dvojitý).

Mnoho z výše uvedených vlastností lze nastavit jedinou deklarací pro všechny čtyři strany (horní, pravá, dolní a levá). Počet hodnot přiřazených takovéto souhrnné vlastnosti může být od jedné do čtyř. Použijeme-li pouze jednu hodnotu, bude platit pro všechny čtyři strany. Při použití dvou hodnot bude první platit pro horní a dolní stranu a druhá pro levou a pravou stranu. Při použití tří hodnot budou postupně odpovídat horní, pravé a dolní straně. Pro levou stranu bude použita stejná hodnota jako pro pravou. Zápis

BODY { margin: 1em 2em }   BODY { margin: 1em 2em 3em }

je ekvivalentní s

BODY { margin-top: 1em;    BODY { margin-top: 1em;
       margin-bottom: 1em;        margin-bottom: 3em;
       margin-right: 2em;         margin-right: 2em;
       margin-left: 2em }         margin-left: 2em }

V této skupině ještě nalezneme vlastnosti width a height, které slouží k nastavení šířky a výšky elementu. Uplatní se zejména u elementů jako jsou obrázky a aplety.

Pomocí vlastnosti float můžeme z elementu udělat plovoucí objekt. To znamená, že pak bude obtékán okolním textem zleva či zprava. Tato vlastnost odpovídá nastavení atributu ALIGNu obrázků na hodnotu LEFT nebo RIGHT. Svou obdobu má v HTML i vlastnost clear, která určuje, zda se element zobrazí až po skončení všech plovoucích objektů. Můžeme si vybrat, zda se bude čekat na skončení všech objektů (hodnota both) nebo jen na skončení objektů vpravo (right) či vlevo (left). Následující krátký styl umístí všechny obrázky jako plovoucí objekty vlevo. Všechny nadpisy první a druhé úrovně budou vždy začínat až pod obrázky.

IMG     { float: left }
H1, H2  { clear: both }

Klasifikace elementů

V této části se seznámíme se dvěma druhy vlastností. První slouží k určení druhu elementu a způsobu jeho zobrazení. Do druhé skupiny patří vlastnosti, které určují druh zobrazení seznamů.

Pomocí vlastnosti display můžeme změnit druh elementu. Styly rozdělují všechny elementy do tří skupin:

Blokové elementy jsou ty elementy, před i za kterými je zalomena řádka (např. H1 a P).
Inline elementy jsou běžnou součástí textu na řádce. Nemají okolo sebe žádné zalomení řádek (např. STRONG).
Nahrazované elementy jsou ty, které jsou nahrazeny nějakým obsahem a pro jejichž zařazení do okolního textu stránky jsou důležité pouze jejich rozměry (např. IMG a OBJECT).

Z blokového elementu (hodnota block) tak můžeme udělat třeba inline element (hodnota inline). Tato možnost v praxi asi uplatnění nenajde. Užitečná je však hodnota none, která způsobí nezobrazování daného elementu. Chceme-li tedy, aby se v dokumentu nezobrazovaly obrázky, můžeme použít:

IMG {display: none }

Pomocí vlastnosti list-style-type si vybíráme způsob odrážek a jejich číslování. Na výběr máme stejné možnosti, které nám nabízí atribut TYPE v HTML u seznamů. O poznání zajímavější je vlastnost list-style-image. Slouží ke specifikování URL obrázku, který se použije místo odrážky. Snadno tak vyřešíme problém, který jsme řešili ve WWW-dílně Seznamy s grafickými odrážkami -- CW 35/97. Stačí používat běžně seznamy a styl

UL LI {list-style-image: url(arrow.gif) }

Pokud není obrázek z nějakého důvodu k dispozici, použije se odrážka nastavená pomocí list-style-type. Vlastnost list-style-position určuje pozici odrážky vůči položce seznamu (viz obr. 3).

Vlastnost odrážek můžeme nastavit najednou pomocí vlastnosti list-style:

list-style: disc outside url(arrow.gif)

Obr. 3: Změna umístění odstavcové odrážky