V předchozím díle jsme se zabývali obecnými mechanismy kaskádových stylů, které umožňují ovlivňovat vzhled vašich stránek. Dnes budeme v procházce po CSS pokračovat. Čekají nás vlastnosti, které má autor k dispozici a které do značné míry vymezují vyjadřovací schopnosti kaskádových stylů.

Kompletní sortiment vlastností čítá kolem padesáti kousků. Proto si dovolíme jisté zjednodušení a zatajíme ty, které nepovažujeme za příliš zajímavé. I tak budou k jejich popisu potřeba dva díly seriálu.

Tím nejzákladnějším je font-family, určující rodinu (tedy jakýsi recept na základní tvar) písma. Hodnotou může být čárkami oddělovaný seznam názvů. Klient použije první, který má k dispozici. Jako poslední v seznamu vždy uveďte jedno z obecných jmen podle tabulky 1. Ta vyjadřují základní charakteristiku písma a lze očekávat, že každý grafický klient bude mít vždy alespoň jedno vyhovující písmo k dispozici. Pokud totiž klient nenajde písmo, které by vyhovovalo vašemu zadání, může se chovat dosti podivně. Doporučujeme také vyhýbat se hodnotám cursive a fantasy. Jsou určeny pro ozdobná písma a výsledek je jen těžko předvídatelný.

Dalšími vlastnostmi pak můžete ovlivnit charakter písma v rámci dané rodiny. font-style umožňuje nastavit normální vzpřímené písmo (normal), kurzívu (italic) či písmo skloněné (oblique). Pomocí font-weight si můžete poručit duktus (čili tloušťku) písma. Nabízí celou řadu přípustných hodnot. Nejpraktičtější jsou normal a bold, které vytvoří normální a tučné písmo. Můžete také pomocí bolder požadovat, aby písmo bylo o něco tučnější, než momentálně je. Pravého opaku dosáhnete hodnotou lighter.

font-size nastaví stupeň (velikost) písma. Základní možností je nastavit určitý konkrétní rozměr (např. 10pt). To je však poněkud problematické, protože neznáte implicitní nastavení klienta. Může se stát, že písmo, které jste si představovali jako velké, vyzní v porovnání se standardním písmem klienta jako vyslovený mrňous. Můžete sáhnout po symbolických hodnotách xx-small, x-small, small, medium, large, x-large a xx-large. Ty by klient měl přizpůsobit své konfiguraci a tudíž se snad nedočkáte nepříjemného překvapení. Lze též požadovat zmenšení (smaller) či zvětšení (larger) aktuálního stupně.

Jako alternativu k některým skupinám vlastností nabízí kaskádové styly jakési kolektivní vlastnosti. V nich můžete pod jednou střechou nastavit to, k čemu byste jinak potřebovali několik různých vlastností. V případě práce s písmem je takovým kolektivistou vlastnost font. Její hodnotu můžete smíchat z hodnot ostatních vlastností písma, oddělovaných navzájem mezerami.

Řekněme, že pro nadpis stránky chcete použít velmi velké tučné písmo, nejraději Gill, pokud nebude k dispozici spokojíte se s písmem Helvetica, případně libovolným bezserifovým písmem. Můžete nastavit buď sadu vlastností

H1 { font-family: Gill, Helvetica, sans-serif;
     font-weight: bold;
     font-size:   xx-large }

H1 { font: bold xx-large Gill, Helvetica, sans-serif }

Pokud se týče zarovnání ve směru svislém, máme k dispozici vlastnost vertical-align. Kromě obvyklých hodnot top, middle a bottom, jejichž protějšky důvěrně známe z atributu ALT značky <IMG>, nabízí několik dalších. Zajímavé jsou především sub a super, které umístí daný prvek jako dolní (respektive horní) index. Implicitní hodnotou svislého zarovnání je baseline, kdy jsou proti sobě postavena účaří prvku a jeho okolí. Jako hodnotu vertical-align můžete také zadat počet procent. Tento údaj je interpretován jako počet procent z výšky řádku, o něž má být prvek posunut nad účaří. Pokud tedy některé části textu přiřadíte vlastnost

vertical-align: -10%

Atraktivní název text-decoration skrývá vlastnost nanejvýš nebezpečnou. Jejím prostřednictvím lze realizovat všechny ty kousky, kterým by se slušný člověk měl vyhnout. Implicitní hodnotou je naštěstí normal (tedy text bez přídavků). Dále vám tato vlastnost umožňuje udělat čáru nad textem (overline), pod ním (underline) a přímo přes písmena (line-through). K dispozici je i široce opovrhované blikání (blink).

Pomocí text-transform můžete zasahovat nejen do vnějšího vzhledu určitého textu, ale přímo do textu samotného. Hodnota uppercase jej převede na verzálky (velká písmena), lowercase naopak na minusky (malá písmena). Nejinteligentnější chování vykazuje hodnota capitalize, díky níž bude první písmeno každého slova převedeno na verzálku. U nás takové chování nenajde příliš velké uplatnění, nicméně v anglicky hovořících zemích bývá občas zvykem psát tímto způsobem nadpisy. Z přiloženého příkladu je vidět, že při kombinaci akcentovaných znaků s transformacemi textu lze očekávat nedokonalosti, místy až problémy.

text-indent řídí odsazení prvního řádku odstavce. Hodnotou může být buď absolutní rozměr nebo počet procent z aktuální šířky řádku. Pro zadávání rozměrů máte k dispozici řadu různých jednotek - viz tabulka 2. Některé jsou relativní a závisí na momentálně nastaveném písmu. Jiné set váří absolutně, to je však třeba chápat s rezervou. Váš WWW klient jistě nebude schopen rozpoznat, kolik bodů obrazovky představuje 1cm. Hodnotu může nanejvýš odhadnout, protože závisí na velikosti vašeho monitoru, jeho nastavení a rozlišení grafické karty.

Při zápisu rozměrů se nedělá mezera mezi číslem a jednotkou. Číslo samozřejmě může mít znaménko. Na řadě míst jsou totiž povoleny i záporné rozměry (např. pro okraje).

Vlastností line-height ovlivníte výšku řádku. Je dost důležitá, protože má vliv na uspořádání ve svislém směru. Základní chování klienta při zpracování jednoho prvku řádku (např. vymezeného značkou) vypadá následovně: Klient spočítá velikosti písmen a určí, kolik bodů nad a pod účaří sahá text. Je-li součet těchto dvou údajů menší, než požadovaná výška (hodnota line-height), rozdělí zbylé místo rovným dílem a přidá mezery této velikosti nad a pod text, aby celková výška odpovídala požadavku.

Poté si klient poskládá vedle sebe všechny prvky, tvořící aktuální řádek. Zjistí, který z nich dosahuje nejvýše a který nejníže. Nemusí se jednat o jeden a tentýž prvek - některý mohl být například posunut pomocí vertical-align. Z těchto údajů zjistí celkovou výšku řádku a vytvoří z něj blok. Ten pak bude přiložen "na doraz" k podobně vzniklým blokům řádků nad ním a pod ním.

Hodnotou line-height může být konkrétní rozměr (např. 14pt), ale také ji lze zadat relativně vůči aktuálnímu stupni písma. Můžete to udělat procentem (např. 140%) nebo celým reálným číslem, které je chápáno jako násobek stupně písma (ekvivalentem 140% je tedy 1.4). Pokud má aktuální písmo stupeň 10pt, povedou všechny zmiňované hodnoty ke stejné výšce řádku: 14pt.

BODY { color: #000033 }

background-color analogickým způsobem určuje barvu pozadí. Chcete-li pod text umístit obrázek, použijte vlastnost background-image. Její hodnotou je lokátor souboru s obrázkem. Podle syntaktických pravidel CSS je vlastní lokátor obalen konstrukcí url(...). Vlastnost background-color se uplatní, pokud chybí background-image nebo ukazuje na obrázek, který se klientovi z nějakých důvodů nepodařilo získat. Jinak dostane přednost obrázek.

Několik dalších vlastností umožňuje řídit pozici a způsob opakování obrázku. Opět je k dispozici souhrnná vlastnost background, jejíž hodnotu můžete zkombinovat z ostatních. Například

BODY { background: url(/gifs/blok.gif) #CCFFFF }

Poznamenejme, že Microsoft Internet Explorer verze 3 nerozpoznává dílčí vlastnosti, ale pouze souhrnnou background. Navíc musí být definována přímo na stránce. Pokud je vložena z externího souboru, klient na ni nereaguje.