ARCHIV

CSS (21) - Orámování II.

Dnešní díl nás seznámí se sdruženými vlastnostmi pro nastavení orámování v kaskádových stylech.

12.7.2005 07:00 | Vasek | Články autora | přečteno 14518×

Styl orámování

Pro nastavení stylu orámování použijeme sdruženou vlastnost border-style. Jako její hodnota se používají klíčová slova.

Tato vlastnost umožňuje nastavit styl orámování celého objektu. CSS specifikace umožňuje, aby klienti interpretovali dotted, dashed, double, groove, ridge, inset, outset jako solid, této možnosti využívají hlavně starší verze.

Tato vlastnost může mít zadáno čtyři, tři, dvě nebo jednu hodnotu stylu orámování (jednotlivé hodnoty jsou odděleny mezerou). Pokud jsou použity čtyři, nastavujeme tím styl orámování pro všechny strany v tomto pořadí: horní, pravá, dolní a levá. Při zadání třech hodnot se použije první hodnota pro horní orámování, druhá pro pravé a levé orámování, a třetí pro dolní orámování. První z hodnot při zadání jen dvou hodnot vlastnosti border-style definuje styl horního a dolního orámování, druhá z hodnot udává styl pravého a levého orámování. Při definování pouze jedné hodnoty se daný styl orámování použije pro všechny strany najednou.

Příklad použití

Podpora v prohlížečích

NN4 nepodporuje dotted a dashed; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE podpora od verze 4 (verze 4 a 5 místo dotted a dashed použijí solid; verze 5,5 a 6 již podporují dashed a dotted, ale při tloušťce ohraničení 1 pixel použije místo dotted hodnotu dashed); Opera plná podpora od verze 4; IE 5/MAC plná podpora; Konqueror plná podpora.

Barva orámování

Pro nastavení barvy orámování použijeme sdruženou vlastnost border-color. Jako její hodnota se používají klíčová slova a čísla.

Tato vlastnost umožňuje nastavit barvu orámování objektu. Pokud není tato vlastnost definovaná, použije se pro orámování barva nadefinovaná pomocí vlastnosti color (viz díl č. 13) daného objektu. Tato vlastnost nemá sama o sobě žádný význam, je nutné ji používat spolu s vlastností border-style.

Tato vlastnost může mít zadáno čtyři, tři, dvě nebo jednu hodnotu barvy orámování (jednotlivé hodnoty jsou odděleny mezerou). Pokud jsou použity čtyři, nastavujeme tím barva orámování pro všechny strany v tomto pořadí: horní, pravá, dolní a levá. Při zadání třech hodnot se použije první hodnota pro horní orámování, druhá pro pravé a levé orámování, a třetí pro dolní orámování. První z hodnot při zadání jen dvou hodnot vlastnosti border-color definuje barvu horního a dolního orámování, druhá z hodnot udává barvu pravého a levého orámování. Při definování pouze jedné hodnoty se daná barva orámování použije pro všechny strany najednou.

Příklad použití

Jak již bylo napsáno výše, tato vlastnost se musí používat spolu s vlastností border-style, proto i v předchozích ukázkách bylo použito této vlastnosti.

Podpora v prohlížečích

NN4 s chybami (jedna z nich se projeví neschopností nastavit každou hranu jinou barvou); Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4 (nepodporuje hodnotu transparent); Opera plná podpora od verze 3; IE 5/MAC plná podpora; Konqueror plná podpora.

Šířka orámování

Pro nastavení šířky orámování použijeme sdruženou vlastnost border-width. Jako její hodnota se používají klíčová slova a číselné hodnoty s jednotkou.

Tato vlastnost umožňuje nastavit šířku orámování objektu. Tato vlastnost nemá sama o sobě žádný význam, je nutné ji používat spolu s vlastností border-style. Hodnota thin nastaví slabou šířku orámování, s hodnotou medium bude orámování středně široké, a pro tlusté orámování je možné použít thick. U orámování stylu double se jako šířka počítá tloušťka obou čar a mezery mezi nimi.

Tato vlastnost může mít zadáno čtyři, tři, dvě nebo jednu hodnotu tloušťky orámování (jednotlivé hodnoty jsou odděleny mezerou). Pokud jsou použity čtyři, nastavujeme tím tloušťku orámování pro všechny strany v tomto pořadí: horní, pravá, dolní a levá. Při zadání třech hodnot se použije první hodnota pro horní orámování druhá pro pravé a levé orámování a třetí pro dolní orámování. První z hodnot při zadání jen dvou hodnot vlastnosti border-width, definuje tloušťku horního a dolního orámování, druhá z hodnot udává loušťku pravého a levého orámování. Při definování pouze jedné hodnoty, se daná tloušťka orámování použije pro všechny strany najednou.

Příklad použití

Jak již bylo napsáno výše, tato vlastnost se musí používat spolu s vlastností border-style, proto i v předchozích ukázkách bylo použito této vlastnosti.

Podpora v prohlížečích

IE nesprávně započítává šířku orámování do šířky/výšky prvku. Tato nepřesnost je odstraněna v IE6 při práci ve striktním režimu.

NN4 s chybami; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE plná podpora od verze 4 (plná podpora ve verzi 6 ve striktním režimu); Opera plná podpora od verze 4; IE 5/MAC plná podpora; Konqueror plná podpora.

Spodní, horní, levé, pravé orámování

Pro nastavení orámování z jedné strany lze použít příslušnou souhrnnou vlastnost border-bottom, border-top, border-left, border-right .

V následujícím textu budu používat pro označení výše vyjmenovaných vlastností následující zápis border-direction

Jde o úsporný zápis všech vlastností pro orámování v kaskádových stylech. Všechny vlastnosti sdružené do vlastnosti border-direction a vlastnosti border-direction-width, border-direction-style a border-direction-color jsou nejdříve nastavené na výchozí hodnoty, a poté jsou všechny vlastnosti nastavené na hodnoty, které byly nadefinovány ve vlastnosti border-direction.

Příklad použití

Podpora v prohlížečích

Viz díl č. 20 popisující podporu jednotlivých vlastností.

Orámování

Pro nastavení orámování lze použít souhrnnou vlastnost border.

Tato vlastnost umožňuje nastavit všechny tři vlastnosti naráz. Pomocí této vlastnosti je možné nastavit stejně všechny čtyři strany stejně.

Podpora v prohlížečích

NN4 s řadou chyb; Mozilla (Netscape 6+) plná podpora všemi verzemi; IE podpora od verze 4 (verze 4 a 5 vykreslí orámování kolem řádkových prvků jen v případě nastavení rozměrů daného prvku, plná podpora ve verzi 6 ve striktním režimu); Opera plná podpora od verze 4; IE 5/MAC plná podpora; Konqueror plná podpora.

Závěr

Dnešním dílem jsme dokončili povídání o vlastnostech pro orámování prvků.

Verze pro tisk