CSS - Rámečky

Ze součástí obalujících blok je rámeček nejpřizpůsobivější. Vedle šířky můžete řídit i jeho barvu a styl a vyřádit se na něm dosyta. S tím se samozřejmě pojí odpovídající množství CSS vlastností sloužících pro nastavení jednotlivých parametrů.

Šířka

Šířku (či tloušťku, chcete-li) rámečku na jednotlivých stranách nastavíte vlastnostmi

border-top-width
border-right-width
border-bottom-width
border-left-width

Jak uvidíte později, všechny rámečkové vlastnosti jsou pojmenovány ve stylu border-který-vlastnost.

Podle definice CSS 2.1 nelze šířku rámečku zadávat v procentech. Smíte použít jen konkrétní délkové jednotky. Navíc máte k dispozici klíčová slova thin (tenký), medium (středí) a thick (silný).

Výchozí hodnotou je medium, tedy středně silný rámeček (ovšem nezobrazený, jak se dočtete níže v části věnované stylu).

Pochopitelně existuje integrující vlastnost border-width, jež určuje šířku všech čtyř stran rámečku. Zadáte jí jeden až čtyři údaje, význam je stejný jako u vlastnosti margin.

Barva

Barvu určovat nemusíte – její výchozí hodnotou je barva prvku, jenž je rámečkem lemován. Pokud chcete zvolit jinou, lze tak opět učinit individuálně pro každou ze čtyř hran prostřednictvím vlastností

border-top-color
border-right-color
border-bottom-color
border-left-color

Hodnotou je definice barvy v obvyklé podobě. Lze použít i integrující vlastnost border-color s jednou až čtyřmi barevnými hodnotami, jež určí barvy pro celý rámeček.

Styl

Pod pojmem styl je míněn charakter (typ) čáry, kterou bude rámeček tvořen. Výchozí hodnotou stylu je none, což znemná, že rámeček není přítomen. V takovém případě se ignoruje jeho šířka i barva, rámeček prostě není.

Nabídka vlastností nastavujících styl vás jistě nepřekvapí:

border-top-style
border-right-style
border-bottom-style
border-left-style

a integrující

border-style

Tentokrát ale bude hodně zajímavá nabídka dostupných stylů:

none	žádný rámeček, prostě není
hidden	velmi podobné none, liší se jen chování uvnitř tabulek
solid	plná čára
dashed	čárkovaná čára
dotted	tečkovaná čára
double	dvojitá čára
groove	čára „vyrýpnutá“ do pozadí stránky
ridge	čára plasticky vystupující ze stránky
inset	zamáčknuté tlačítko
outset	vystupující tlačítko

Z ilustrační tabulky je zřejmé, že na pseudoplastické styly (groove, ridge, inset a outset) není příliš velké spolehnutí. Proto si řada designérů vytváří efekt plastických tlačítek sama – nastavením vhodných barev jednotlivým stranám. Podívejte se na ukázku.

Integrující vlastnosti

Těch je v souvislosti s rámečky celá přehršel. Patří mezi ně výše uvedené

border-width
border-color
border-style

jimiž můžete vybranou vlastnost nastavit pro všechny čtyři strany bloku. Na druhé straně máte k dispozici

border-top
border-right
border-bottom
border-left

které slouží k nastavení všech vlastností pro uvedený rámeček. Jejich hodnotou je libovolná kombinace hodnot pro šířku, barvu a styl. Například

border-bottom: solid 2px red;

zajistí, že spodní strana rámečku bude vyvedena červenou plnou čarou, 2 pixely silnou. Na pořadí hodnot nezáleží. Pokud některou vynecháte, použije se její výchozí hodnota.

A konečně je k dispozici i integrace všech integrací, vlastnost

border

Znamená, že všechny čtyři strany rámečku mají vypadat stejně. Její hodnota se konstruuje jako u integrujících vlastností pro jednotlivé strany. takže například 1 pixel silný černý tečkovaný rámeček kolem celého bloku vznikne deficicí

border: 1px black dotted;

Možnosti jsou pestré a při definování rámečků jde často především o nalezení jejich vhodné kombinace k dosažení kýženého výsledku. Obecný postup bývá definovat nejprve pomocí integrující vlastnosti společné prvky a poté je individuálně přizpůsobit podle potřeby – viz příklad.