CSS - okraje, 5.diel

Zápisy okrajov v CSS sú omnoho lepšie ako by sme ich mali dekarovať priamo v HTML kóde. Presvedčíte sa určite, ak to sami vyskúšate.

Tento diel som sa rozhodol zamerať iba na okraje. Predstava, že okraje nájdeme na každej stránke a pri tom si to ani neuvedomujeme je skutočná. V CSS je pre definíciu okraju selektor border.
Okraj môžeme určovať takmer všetkému aj textu ale väčšinou sa jedná o elementy <div>.

CSS

.okraj {

border: 1px solid #000000;

width: 5em;

height: 5em;

}

XHTML

<div class="okraj">

Toto je element s okrajom.

</div>

Výsledok si môžete prezrieť tu.

Samozrejme zo zápisov borderu to nebolo všetko. Selektory nám pokračujú naďalej. Border si nemusíme určovať len na všetkých stranách elementu ale stačí nám využiť iba jednu stranu elementu. Na to nám budú slúžiť selektory border-top, border-bottom, border-left, border-right. Rovnako ako sme zapísali prvý okraj to môžeme urobiť aj tu.

CSS

.okraj {

border-right: 1px solid #000000;

width: 5em;

height: 5em;

}

XHTML

<div class="okraj">

Toto je element s okrajom.

</div>

Príkad si môžete prezrieť tu. Nič nám nebráni zapísať aj viac selektorov borderu resp. môžeme zapisovať aj takto:

.okraj {

border-right: 1px solid #000000;

border-bottom: 1px solid #000000;

width: 5em;

height: 5em;

}

Stačí to všetko len vyskúšať. Ešte stále ale pokračujeme. Selektory, ktoré sme si teraz zapisovali boli zapísané v skrátenom tvare. Ak by sme chceli zapísať okraj plným zápisom použijeme až 3 selektory a to:

• border-style:
• border-width:
• border-color:

Prvý selektor označuje štýl borderu, čiže napr. solid čo sme už raz použili. Štýlov je niekoľko. Sú to:

• none
• hidden
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset

Ďalší zo selektorov border-width: deklaruje šírku okraju. Ako deklarácie používame ľubovolné dĺžkové jednotky. Viac o dĺžkových jednotkách sme si povedali v 2. diele o CSS.

Ako samé o sebe hovorí border-color: jedná sa o zafarbenie okraju. Ako jeho deklaráciu použijeme farbu v ľubovolnom tvare. O farbách sa tiež viac dozviete v 2. diele o CSS.

Tak ako to bolo na začiatku selektory sa rozvíjali v podobe border->border-left. Od CSS2 môžete kľudne používať aj selektory ako border-top-width, border-bottom-color alebo border-left-style. To by bolo o okrajoch asi všetko. Nezabudnite si vyskúšať všetky deklarácie k selektoru border-style.

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 27.06.2005 16:15