Minulý díl jsme věnovali celkem bezelstným vlastnostem, nastavujícím vzhled písma či jeho barvy. Jen málokterá z nich měla co říci k formátování stránky. A právě toto téma nás čeká dnes. Kaskádové styly totiž umožňují zasahovat do práce klienta a ovlivňovat rozměry jednotlivých prvků i jejich vzájemné uspořádání.

Obrázek 1: Součásti bloku Mezera se od okraje liší nejen svou pozicí, ale také vlastnostmi. Dá se říci, že je přidávána k obsahu bloku a proto s ním sdílí stejné pozadí. Naproti tomu okraj je chápán jako prostor k oddělení bloku od jeho okolí a je tudíž průhledný. Neexistuje žádná možnost, jak samostatně měnit barvu mezery či okraje.

Někteří klienti (např. MS Internet Explorer 3) bohužel model bloku zjednodušují. V jejich podání odpadá rámeček i mezera, takže blok je tvořen jen svým obsahem a okrajem kolem něj.

.poznamka { width: 50% }

Samozřejmě můžeme nastavovat rozměry i pro okolní součásti bloku. Začněme okrajem. Máte k dispozici čtyři vlastnosti, nastavující velikost jeho jednotlivých stran. Jmenují se margin-top (horní), margin-bottom (spodní), margin-left (levá) a margin-right (pravá). Hodnotou může být absolutně zadaný rozměr, počet procent vzhledem k šířce nadřazeného bloku nebo auto.

Pokud se vám nechce rozepisovat všechny čtyři vlastnosti, sáhněte po integrující se jménem margin. Její hodnotou může být jeden až čtyři údaje, udávající šířky stran okraje. Pokud uvedete všechny čtyři, jsou chápány jako šířky okrajů v pořadí podle směru hodinových ručiček, počínaje horním. Udávají tedy rozměr horního, pravého, spodního a levého okraje. Je-li čísel méně, chápou se úplně stejně, pouze se rozměry chybějících okrajů doplní vždy podle rozměru okraje protilehlého. Pokud tedy uvedete jediný rozměr, bude platit pro všechny čtyři strany.

Totéž platí pro mezeru mezi obsahem a rámečkem, liší se pouze názvy vlastností. Zde to je padding-top, padding-bottom, padding-left a padding-right. Integrující vlastnost se podle očekávání nazývá padding. V případě šířky rámečku máte k dispozici vlastnosti border-top-width, border-bottom-width, border-left-width, border-right-width a integrující border-width. Na rozdíl od okraje však žádná z vlastností v tomto odstavci nesmí obsahovat hodnotu auto.

U rámečku se nenastavuje pouze tloušťka. Vlastností border-color mu přiřknete určitou barvu a pomocí border-style vnější podobu. Přípustné hodnoty border-style jsou v definici CSS vyjmenovány, ne všechny však obsahují popis, co by měly způsobit. Implicitní hodnotou je none, při níž rámeček není viditelný. Kromě ní máte k dispozici několik "normálních" čar: solid (rámeček plnou čarou), dashed (čárkovaný), dotted (tečkovaný) a double (dvojitá čára). Čtyři zbývající hodnoty (groove, ridge, inset, outset) směřují k různým efektovým a jakoby prostorovým rámečkům. Přesnější popis jejich chování specifikace neobsahuje. Můj Netscape Communicator bohužel na vlastnost nereagoval a MSIE ji vůbec nezná, takže se nedalo ani vyzkoušet, jak na ni zareagují reální klienti.

Jelikož pro rámeček se nabízí celá přehršel parametrů, máme k dispozici další integrující vlastnosti. Pomocí border-top můžete pod jednou střechou nastavit kompletní vzhled horní strany rámečku - například

border-top: 2px #FF0000 solid

Na závěr jsme si nechali dvě vlastnosti lahůdkové, se kterými klienti bohužel mívají nemalé problémy. Souvisí s obtékáním. Zatímco ve stávajícím HTML můžete nechat textem obtékat pouze obrázky (díky atributu ALIGN=LEFT nebo RIGHT značky <IMG>), v CSS to lze provést pro libovolný blok. Stačí vhodně nastavit vlastnost float. Přípustnými hodnotami jsou left (k levému okraji), right (k pravému) a none (nebude obtékán). Implicitní je poslední z nich.

Jakmile je povoleno obtékání, musí se zároveň nabídnout mechanismus, jak je zastavit. Bylo by nevhodné, aby například nadpis další části stránky obtékal kolem obrázku, náležejícího části předchozí. CSS to řeší vlastností clear. Přiřadíte-li některému prvku stránky vlastnost clear s hodnotou left, bude zařazen až pod všechny obtékané části stránky u levého okraje. right zajistí totéž pro pravý okraj a při hodnotě both se prvek ocitne až pod veškerým obtékaným materiálem. Implicitní hodnotou je none, která obtékání nijak neomezuje.

Horší práce nastává ve směru vodorovném. Zde existuje maximální šířka stránky, daná současnou šířkou okna. Smí se překročit jen pokud je některý prvek stránky sám o sobě příliš široký, potom se však celková šířka stanoví podle něj. V každém případě existuje jakýsi horní limit.

Bloky však často bývají vzájemně vnořeny. Například blok s položkou seznamu (vytvořený značkou <LI>) je vnořen do bloku celého seznamu (vytvořeného značkou <UL>), ten může být vnořen do bloku <BLOCKQUOTE> a ten je konečně vnořen do samotné stránky (blok značky <BODY>). Pokud je jeden blok vnořen do druhého, stává se celý (včetně své mezery, rámečku a okraje) obsahem bloku nadřazeného. Jeho celková šířka proto musí souhlasit s šířkou obsahu nadřazeného bloku.

Protože je stanovena vnější šířka celé stránky (a ta se zpravidla mění podle velikosti okna), musí klient upravovat šířky vnořených bloků, aby dodržel výše uvedené pravidlo. K této úpravě mu slouží rozměry s hodnotou auto. Připomeňme, že ji můžete přidělit šířce obsahu (width) a levého a pravého okraje.

Nejjednodušším případem je, pokud hodnotu auto nastavíte právě jednomu z uvedených tří rozměrů. Ostatní si pak ponechají své předepsané šířky a klient upraví onen jediný pružný rozměr podle potřeby. Pokud se zapomenete a všechny tři rozměry stanovíte pevně, bude se klient chovat, jako by vlastnost width měla hodnotu auto.

Když učiníte pružným více než jeden rozměr, chování klienta se poněkud komplikuje. Je-li jedním z pružných rozměr width, strhne veškeré roztahování na sebe. Ostatním pružným rozměrům se v takovém případě přidělí nulová šířka. Je-li však width stanoven pevně a pružné jsou oba okraje, rozdělí se o dostupné místo rovným dílem.

Na rozdíl od HTML kaskádové styly neodlišují seznamy s odrážkami od číslovaných. Vlastností list-style-type pouze stanoví, jakým způsobem budou zahajovány jednotlivé položky. Přípustné hodnoty shrnuje tabulka 1. Jak vidíte, obsahuje jak odrážky, tak různé způsoby číslování.

Před touto vlastností však má přednost list-style-image. Její hodnotou je lokátor obrázku, kterým má být zahájena každá položka menu. Kaskádové styly tak vycházejí vstříc oblíbenému zařazování grafických odrážek do seznamů. Vlastnost list-style-type se uplatní pouze pokud list-style-image chybí nebo je předepsaný obrázek nedostupný. Samozřejmě také platí pro negrafické klienty.

Opět se nabízí vlastnost list-style, kterou lze společně předepsat všechny parametry seznamu.

Druhou zajímavou vlastností je whitespace. Řídí, jakým způsobem bude klient zacházet s mezerami, konci řádků a tabelátory uvnitř daného prvku. Nabízí se dvě hodnoty. normal představuje standardní chování klienta, kdy se libovolně velké prázdné místo scvrkne do jediné mezery. Naproti tomu hodnota pre zachovává mezery i konce řádků, jak to známe z těla značky  PRE>.