Kaskádové styly – rámečky boxů

7. dubna 2000

•

V minulém díle jsem začal psát o boxech, a o různých okrajích boxu. Začal jsem psát o vlastnosti margin, která nastavuje šířku vnějšího okraje boxu. V tomto díle budu pokračovat v popisu dalších vlastností.

Asi nejviditelnější je nastavování různých rámečků kolem všeho možného. Mnoho lidí si myslí, že v jazyce HTML je možné prakticky nastavit rámeček pouze u tabulky, případně několika málo dalších prvků, jako jsou obrázky a objekty. Pokud ovšem použijeme kaskádové styly, potom je možné nakreslit rámeček téměř kolem všeho.

Kaskádové styly dovolují podle normy nakreslit rámeček kolem libovolného blokového prvku, to znamená kolem všeho, co je možné zobrazit jako obdélník (box). Je tedy možné kreslit rámečky kolem odstavců, tabulek, seznamů, obrázků, nadpisů, odkazů, a nebo třeba orámovat celou stránku bez pomoci tabulky. Možnosti kaskádových stylů jsou zde obrovské. Kromě toho je možné volit, zda bude rámeček tečkovaný, plný, či jinak (tzv. styl rámečku).

Začnu příkladem, ukáži zápis, pomocí kterého nastavím u všech odstavců zeleně orámování:

p {
  border-width: 3px;
  border-style: solid;
  border-color: lime;
}

A toto je výsledek:

Toto je pokusný odstavec, který je orámečkován pomocí kaskádových stylů. Pokud nevidíte kolem tohoto odstavce rámeček, pak váš prohlížeč tuto vlastnost kaskádových stylů CSS nepodporuje.

A teď vše vysvětlím podrobněji. Začnu stylem čáry použitité k orámování. K tomu se používá vlastnost border-style, která může mít následující hodnoty:

none – žádná čára není nakreslená
dotted – tečkovaná čára
dashed – čerchovaná čára
solid – plná, nepřerušovaná čára
double – dvojitá čára
groove – trojrozměrná čára zapuštěná
ridge – trojrozměrná čára vystouplá
inset – trojrozměrná čára
outset – trojrozměrná čára

V našem příkladě zeleného rámečku kolem odstavce byl použit styl solid, tedy plná, nepřerušovaná čára. Jak můžete zjistit ve výše uvedeném seznamu stylů, máte k dispozici dost stylů. Jako potěšující fakt musím napsat, že vlastnost border-style je podporována oběma hlavními prohlížeči, tedy jak Netscape Navigatorem, tak i Internet Explorerem. Takže vlastnost můžete celkem bez obav používat na svých stránkách. Oba prohlížeče ale nepodporují všechny styly, zde shodně oba dva umí pouze styly none, solid a double. Proto ve svých současných HTML stránkách radím používat pouze tyto tři styly.

Důležité je umět nastavit šířku rámečku. K tomu slouží zejména vlastnost border-width:

table, td { border-width: 2%; }
img { border-width: 1px; }

Šířku lze nastavovat ve všech jednotkách, které byly uvedeny v dílu o nastavování velikosti písma. Například hodnota 2% znamená rámeček, který má šířku 2% šířky celého boxu. Hodnota 1px zase značí rámeček o šířce 1 pixel.

Pomocí kaskádových stylů můžeme nastavit šířky jednotlivých stran rámečku zvlášť. To je možné, pokud uvedeme více hodnot v zápisu vlastnosti border-width. Pokud uvedeme dvě hodnoty, potom první z nich je výška horní a dolní části rámečku, a druhá je šířka levé a pravé strany rámečku:

p { border-width: 10px 1px; }

Pokud uvedeme tři hodnoty, potom první hodnota bude výška horní části rámečku, druhá bude šířka levé a pravé strany rámečku, a třetí hodnota se použije pro výšku dolní části rámečku. Pokud se uvedou čtyři hodnoty, potom první je výška horní části, druhá hodnota je šířka levé části, třetí je výška dolní části a čtvrtá hodnota je šířka pravé části rámečku.

Pokud nebudete chtít nastavit šířku všech stran rámečku, ale jenom některých, potom se vám hodí tyto vlastnosti:

border-top-width – výška horní části rámečku
border-bottom-width – výška dolní části rámečku
border-left-width – šířka levé části rámečku
border-right-width – šířka pravé části rámečku

Příklad, kdy se vám může hodit nastavování jenom některých částí rámečku:

h1, h2, h3, h4, h5, h6 {
  border-left-width: 2px;
  border-right-width: 2px;
  border-style: solid;
  border-color: black;
}
h1, h2 {
  border-top-width: 5px;
  border-bottom-width: 5px;
}
h3, h4, h5, h6 {
  border-top-width: 2px;
  border-bottom-width: 2px;
}

Tento příklad nastaví šířku rámečku 2 pixely pro všechny nadpisy. Navíc u nadpisů první a druhé úrovně nastaví výšku horní a dolní části rámečku větší, a to 5 pixelů.

Asi bych měl říci, že nastavování nestejných šířek pro jednotlivé části rámečku nepracuje v prohlížečích zatím spolehlivě. Netscape Navigator v případě, že mu zadáte různé šířky pro každou stranu rámečku se naštve, a pro jistotu rámeček nezobrazí vůbec. Internet Explorer zase rámeček zobrazí, ale všechny čtyři strany rámečku mají stejnou šířku, a to tu, která je uvedena jako poslední. Proto vám zatím doporučuji používat pouze rámečky, které mají všude stejnou šířku.

Nakonec je možné nastavovat barvu rámečku pomocí vlastnosti border-color:

table, td { border-color: red; }
img { border-color: rgb(90%,90%,90%); }

Pokud jste dočetli až sem, tak si na chvilinku vydechněte, vrhneme se ještě na to, jak všechny vlastnosti rámečku zapsat ve zkratce najednou. Používá se k tomu vlastnost border, kde se postupně uvede šířka rámečku, potom styl rámečku a nakonec barva:

ul { border: 5px double red; }

A to je pro dnešek opravdu všechno.