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 | přečteno 13476×

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.

border-style
Hodnoty: solid | dotted | dashed | double | groove | ridge | inset | outset | none | hidden | inherit
Výchozí hodnota: none
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální
  solid pro orámování se použije plná čára
  dotted pro orámování se použije tečkovaná čára
  dashed pro orámování se použije čárkovaná čára
  double pro orámování se použije dvojitá plná čára
  groove pro orámování se použije čára vypadající jako vyrytá do pozadí
  ridge pro orámování se použije čára vystupující z pozadí
  inset použije se čára, která vytvoří efekt vytlačení prvku do plátna
  outset použije se čára, která vytvoří efekt vystoupení prvku z plátna
  none žádné orámování
  hidden totéž jako none vyjma tabulek
  inherit hodnota se dědí po rodičovském prvku

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í

h1{
border-bottom-style: double;
border-top-style: double;
border-right-style: double;
border-left-style: double;
}


lze nahradit
h1{
border-style: double double double double;
}


nebo
h1{
border-style: double double double;
}


či
h1{
border-style: double double;
}


nebo nejjednodušeji
h1{
border-style: double;
}




  border-style:solid       border-style:dotted       border-style:dashed       border-style:double  

  border-style:groove       border-style:ridge       border-style:inset       border-style:outset  

  border-style:none       border-style:hidden  

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.

border-color
Hodnoty: <barva> | <transparent> | inherit
Výchozí hodnota: hodnota vlastnosti color
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální
  <barva> viz díl č. 3
  <transparent> nastavení průhledný spodní rámeček
  inherit hodnota se dědí po rodičovském prvku

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í

h1{
border-bottom-color: red;
border-top-color: red;
border-right-color: red;
border-left-color: red;
}


lze nahradit
h1{
border-color: red red red red;
}


nebo
h1{
border-color: red red red;
}


či
h1{
border-color: red red;
}


nebo nejjednodušeji
h1{
border-color: red;
}




  border-color: red  

  border-color: red blue  

  border-color: red blue green  

  border-color: red blue green black  

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.

border-width
Hodnoty: <absolutní-velikost> | <velikost> | inherit
Výchozí hodnota: hodnota vlastnosti color
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální
  <absolutní-velikost> thin | medium | thick
  <velikost> číslo a jednotka viz díl č. 2
  inherit hodnota se dědí po rodičovském prvku

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í

h1{
border-bottom-width: thin;
border-top-width: thin;
border-right-width: thin;
border-left-width: thin;
}


lze nahradit
h1{
border-width: thin thin thin thin;
}


nebo
h1{
border-width: thin thin thin;
}


či
h1{
border-width: thin thin;
}


nebo nejjednodušeji
h1{
border-width: thin;
}




border-width:thin

border-width:medium

border-width:thick



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

border-direction
Hodnoty: <border-direction-width> | <border-direction-style> | <border-direction-color> | inherit
Výchozí hodnota: viz dílčí vlastnosti
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální
  <border-direction-width> viz díl č. 20
  <border-direction-style> viz díl č. 20
  <border-direction-color> viz díl č. 20
  inherit hodnota se dědí po rodičovském prvku

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í

h1{
border-bottom: thin solid red;
}

h1{
border-top: thin solid red;
}

h1{
border-left: thin solid red;
}

h1{
border-left: left solid red;
}

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.

border
Hodnoty: <border-width> | <border-style> | <border-color> | inherit
Výchozí hodnota: viz dílčí vlastnosti
Ovlivňuje: všechny prvky
Dědičná: ne
Procenta: nelze použít
Média: vizuální
  <border-width> viz dílčí vlastnost
  <border-style> viz dílčí vlastnost
  <border-color> viz dílčí vlastnost
  inherit hodnota se dědí po rodičovském prvku

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ě.

h1{
border-bottom-style: double;
border-bottom-width: thin;
border-bottom-color: #f26d0c;
border-top-style: double;
border-top-width: thin;
border-top-color: #f26d0c;
border-right-style: double;
border-right-width: thin;
border-right-color: #f26d0c;
border-left-style: double;
border-left-width: thin;
border-left-color: #f26d0c;
}


lze nahradit
h1{
border-bottom: thin double #f26d0c;
border-top: thin double #f26d0c;
border-left: thin double #f26d0c;
border-right: thin double #f26d0c;
}


nebo nejjednodušeji
h1{
border: thin double #f26d0c;
}

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ů.

Online verze článku: http://www.linuxsoft.cz/article.php?id_article=699