Predmetová komisia ELT a INF

Učebnica CSS - Okraje

CSS - Border

« Predchádzajúca Ďalšia kapitola »

CSS Border Properties

CSS vlastnosti okraja umožňujú zadať štýl a farbu elementu ohraničenia - okraja.

 

Štýl okraja

Border - style určuje, aké a ako sa ohraničenie bude zobrazovať.

none: Nie je definovaný žiadny okraj

bodkovaná čiara: Definuje bodkovaný okraj

prerušovaná čiara: Definuje čiarkovaný okraj

pevná: Definuje pevné ohraničenie

dvojitá čiara: Definuje dve hrance. Šírky obidvoch hranice sú rovnaké ako okraj - šírky

groove: Defines a 3D grooved border. The effect depends on the border-color value

ridge: Defines a 3D ridged border. The effect depends on the border-color value

inset: Defines a 3D inset border. The effect depends on the border-color value

outset: Defines a 3D outset border. The effect depends on the border-color value

Vyskúšajte si to sami: Nastavenie štýlu okraja

Šírka okraja

Border - šírka vlastnosť sa používa na nastavenie šírky okraja.

Šírka je nastavená v pixeloch, alebo pomocou jednej z troch vopred zadefinovaných hodnôt -: tenká, stredná alebo silná.

Poznámka: " border - šírka " vlastnosť nefunguje, ak je použitý sám. Použite " border - style " vlastnosť nastaviť hranice prvý.

Príklad

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Vyskúšajte si to »

Farba rámčeku

Border - color sa používa na nastavenie farby okraja. Farba môže byť stanovená:

  • meno - zadajte názov farby, rovnako ako "červený"
  • RGB - zadať hodnotu RGB, ako "rgb ( 255,0,0 )"
  • Hex - zadajte hexadecimálne hodnotu, ako "# FF0000"

Môžete tiež nastaviť farbu orámovania na "priehľadnú".

Poznámka: " border - color " vlastnosť nefunguje, ak je použitá sama. Použite "border - style" vlastnosť na nastavenie okraja prvku.

Príklad

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Vyskúšajte si to »

Okraje - Individuálne strany

V CSS je možné zadať rôzne obmedzenia pre rôzne strany:

Príklad

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Vyskúšajte si to »

Vyššie uvedený príklad môže byť tiež nastavený s jedinou vlastnosťou:

Príklad

border-style:dotted solid;

Vyskúšajte si to »

Border - style vlastnosť môže mať jednu až štyri hodnoty.

  • border - style: bodkovaného pevné dvojité čiarkovanej;
    • horná hranica je bodkovaná
    • pravý okraj je pevný
    • spodný okraj je dvojitý
    • ľavý okraj je prerušovaný
  • border - style: pevné dvojité bodkovanie;
    • horná hranica je bodkovaná
    • pravého a ľavého okraja sú pevné
    • spodný okraj je dvojitý
  • border - style: bodkované pevné;
    • Horné a spodné okraje sú bodkované
    • pravého a ľavého okraja sú pevné
  • border - style: bodkované;
    • všetky štyri okraje sú bodkované

Ohraničenia - Dedenie vlastností

Ako môžete vidieť z vyššie uvedených príkladoch, existuje mnoho vlastností, ktoré sa dajú použiť pri okrajoch.

Ak chcete skrátiť kód, to je tiež možné špecifikovať všetky hranice vlastností v jeden objekt. Toto sa nazýva dedenie vlastností.

Príklad

border:5px solid red;

Vyskúšajte si to »

Pri použití poradie prvkov je nasledovné:

  • border - šírka
  • border - style
  • border - color

Nezáleží na tom, ak jedna z vyššie uvedených hodnôt chýba (aj keď, treba border - style) pokiaľ je zvyšok v uvedenom poradí.

Ďalšie príklady

Všetky vlastností v jednej deklarácií
Tento príklad ukazuje možnosť pre nastavenie všetkých vlastností pre horné ohraničenie.

Nastavenie štýlu spodného ohraničenia
Tento príklad ukazuje, ako nastaviť štýl spodnej hranice.

Nastavte šírku ľavého okraja
Tento príklad ukazuje, ako nastaviť šírku ľavého okraja.

Nastavte farbu pre štyri okraje
Tento príklad ukazuje, ako nastaviť farbu pre štyri okraje.

Nastaviť farbu pravého okraja
Tento príklad ukazuje, ako nastaviť farbu pravého okraja.

« Predchádzajúca Ďalšia kapitola »