Orámování prvků pomocí CSS

V několika mých předchozích článcích o HTML jsem popisoval, jak pomocí vnořených tabulek či neviditelného obrázku dosáhnout jednopixelového a také částečného orámování tabulky. Myslím, že je čas na to, abychom si řekli, jak orámovat prvky v HTML pomocí kaskádových stylů a vše kolem toho.

Používat při tvorbě webových stránek kaskádové styly je již dnes opravdu nutnost. Bez nich třeba nevytvoříte písmo o konkrétní velikosti třeba 12 pixelů, či nedokážete říci obrázku na pozadí stránky, aby byl zarovnán na střed, a opakoval se jenom 3x. Zastávám docela nepopulární názor, že prohlížeče, které nepodporují v dostateční míře kaskádové styly, anebo mají velké chyby v jejich implementaci, se dnes vůbec nevyplatí podporovat. Takových prohlížečů naštěstí není mnoho, Internet Explorer s dominantním podílem kolem 85 procent má od verze 5.0 velmi širokou podporu kaskádových stylů, stejně jako Netscape 6, Mozilla 0.9 anebo Opera 5. Co se týče Netscape 4.xx – nějaká podpora kaskádových stylů tu sice je, ale pokud tvoříte stránky i pro uživatele, kteří sveřepě používají tento zastaralý prohlížeč, raději ani CSS nepoužívejte, snad jenom na nějaké základní věci, jako definice písma, barev atd. Dost ale všeobecných řečí a přikročme raději k tématu článku.

Pokud už jste někdy vytvořili nějakou stránku, kde byly použity kaskádové styly, určitě jste se setkali s vlastností Border. Ta slouží k orámování různých elementů v HTML, třeba k orámování tabulek, obrázků, rámečků, prvků formuláře atd. Nejjednodušší možné použití Border v CSS je toto:

Ukázka:

Hodnota 1px označuje sílu orámování, v tomto případě je to jeden pixel. Hodnota solid; určuje typ čáry, v tomto případě je to spojité orámování a poslední, třetí hodnota black je pochopitelně barva orámování. V předchozí větě jsem zmínil typ čáry, je možné použít i jiný? Ano, je, na výběr je celkem 8 možností:

• none – zruší uplně orámování prvku. Tato hodnota je nadřazena síle a barvě orámování. Prvek nebude vůbec orámován.
• solid – spojité orámování prvku
• dotted – tečkované orámování prvku
• dashed – čárkované orámování prvku
• double – dvojité orámování, mezera mezi dvěmi čarami je stejně široká jako každá z čar
• ridge – vystouplý, prostorový žlábek
• groove – prostorový žlábek
• inset – osvětlení vystouplého (vlevo a nahoře) prostorového orámování
• outset – osvětlení zapuštěného (vpravo a dole) prostorového orámování

Z popisu typu čáry vám nemusí být hned jasné, jak vybraný typ čáry vypadá v praxi. Snad vám tedy pomůžou následující příklady, kde jsou jednotlivé typ čar znázorněny. V příkladech je použito pro demonstraci orámování o síle 5 pixelů. Všechny následující příklady jsou uvedeny jako obrázky, protože Internet Explorer 5.0 podporuje pouze hodnoty none, solid a double a převážná většina čtenářů by tak viděla pouze spojité orámování solid:

Problém v Mozille a Netscape 6?

První uvedený příklad ve článku (orámování solid) je zcela funkční v obou dvou zmiňovaných prohlížečích. Mnoho webmasterů ovšem definuje styl pro orámování takto:

Na první pohled se zdá, že je vše v pořádku, v Internet Exploreru 5.0 se prvek orámuje, ale v Mozille a Netscape 6 nikoli. Problém je ve špatně napsaném stylu – chybí totiž jednotky orámování – musíte zadat třeba pixely (px) anebo obrazové body (pt). Po jejich vložení bude vše v pořádku.

Barvy jsou potřeba

Výše dva uvedené styly orámování prvku jsou zadány ve zjednodušené formě – jednou definicí orámujeme celý prvek. Stejného výsledku se pochopitelně dá dosáhnout i jinou definicí stylu, kde definujete vlastnost levé (border-left), pravé (border-right), horní (border-top) a spodní (border-bottom) orámovací čáry. Je to sice pracnější způsob, ale na druhou stranu, jak jinak chcete definovat odlišnou barvu jednotlivých čar anebo nezobrazení třeba levé častí orámování, jak ukazuje následující příklad?

Ukázka:

A pokud chcete jednotlivé hodnoty pořadně zkombinovat, můžete mít klidně horní orámování prvku modrou barvou, 5 pixelů silnou a třeba čárkovanou a spodní část orámování červenou barvou, čáru silnou 2 pixely s tečkovaným orámováním:

Ukázka:

S kombinováním jednotlivých hodnot a vlastností to moc nepřehánějte – obvykle to na stránce nevypadá příliš dobře.

Konfliktní nastavení

Zajímá vás, co se stane s orámováním prvku v případě nějakého konfliktního nastavení? Představte si situaci, že definujete jednu vlastnost pro orámování celého prvku a pod ní hned vlastnost pro orámování spodní čáry, jak ukazuje následující zdrojový kód:

Ve stylu je definováno orámování o síle jednoho pixelu černou barvou, a hned pod tím je definováno orámování spodní části a to sílou pěti pixelů a červenou barvou. Prohlížeče se zachovají logicky (presneji podle W3C =) – první vykreslí celý prvek podle první definice (border: 1px solid black;) a ihned poté změní vlastnosti spodního orámování (border-bottom: 5px solid red;):

Pochopitelně záleží na pořadí jednotlivých vlastností. Kdybyste dali v našem příkladu vlastnost border-bottom nad vlastnost border, celý prvek by byl orámován černě a nastavení vlastnosti border-bottom by se tak vůbec neprojevilo. Je to prostě stejné jako z tabulek, definujete barvu tabulky <table> a poté tuto hodnotu „přebijete“ nastavením barvy v buňce <td>. Je ale dobré se v CSS vyhnout takovým konfliktním nastavením, třeba Internet Explorer 5.0 si narozdíl od Netscape 6 či Mozilly 0.9 s výše uvedeným stylem neporadil úplně dokonale. Ukazuje to následující zvětšený obrázek, kde černé orámování částečně zasahuje do červeného orámování:

V CSS existují ještě další vlastnosti pro práci s orámováním, např. Border-top-width, Border-bottom-width, Border-left-width, Border-right-width či zkráceně Border-width: nahoře vpravo dole vlevo, které slouží k určení síly anebo vlastnost Border-color pro určení barvy orámování, které se mi ale zdají docela zbytečné, protože všechno lze nastavit pomocí vlastnosti Border, kterou jsme si popisovali.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.