V CSS existujú dva rôzne typy rámčekov: border a outline. Zatiaľ čo border vždy označuje obdĺžnikový rámček, rámčeky outline zavedené v CSS2 sú určené pre oblasti s inými tvarmi. Existuje aj ďalší rozdiel: Pri outlajne je obrys umiestnený mimo rámčeka, čo znamená, že prvok môže mať pridelený rámček s border i obrys s outline
Definície rámcov predstavené v tomto tutoriáli sú najmä zaujímavé pre prvky tvoriace samostatné odseky. Zásadne však možno tieto definície samozrejme aplikovať aj na iné prvky.
Definície rámčeka
S border môže byť určený vzhľad celého rámčeka okolo prvku.
Všeobecná vlastnosť border je zhrnutím nasledujúcich hodnôt, na ktoré sa ešte podrobnejšie bude zaoberané:
• border-color
• border-style
• border-width
Hodnoty jednotlivých vlastností sú oddelené medzerami. Poradie, v ktorom sú vlastnosti uvedené, nie je dôležité. Pre border existujú štyri navyše podvlastnosti, kde možno definovať farbu rámu, hrúbku rámu a typ rámu pre jednotlivé strany prvku.
• border-top – rámček hore
• border-right – rámček vpravo
• border-bottom – rámček dole
• border-left – rámček vľavo
Nasledujúci príklad ukazuje použitie border. Touto definíciou sa vytvorí trojbodový, čierny a prerušovaný rámček.
<p style="border:3pt solid #000000;"> Srdnaté privítanie </p>
Výsledok v prehliadači:
Farba rámu
S border-color je určená farba rámu. Medzi povolené hodnoty patria:
• transparent – priesvitný rámček
• Farbná hodnota
Pokiaľ je uvedená iba jedna hodnota, tá platí pre všetky strany rámiku. Ak chcete pre jednotlivé strany definovať rôzne farby, uveďte viacero hodnôt oddelených medzerami.
• Dve hodnoty – prvá hodnota pre hornú a dolnú, druhá pre ľavú a pravú farbu rámu.
• Tri hodnoty – prvá hodnota pre hornú, druhá pre ľavú a pravú, tretia pre spodnú farbu rámu.
• Štyri hodnoty – prvá pre hore, druhá pre pravú, tretia pre dolnú a štvrtá pre ľavú farbu rámu.
Rovnako je možné použiť nasledujúce podvlastnosti border:
• border-top-color – farba rámu hore
• border-right-color – farba rámu vpravo
• border-bottom-color – farba rámu dole
• border-left-color – farba rámu vľavo
Príklad:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
A tu je výsledok v prehliadači:
Typ čiary
S border-style môžete určiť typ čiary rámu.
Nižšie nájdete zoznam možných variantov rámov:
• none – neviditeľný rámček
• dotted – bodkovaný
• dashed – prerušovaný
• solid – plný
• double – zdvojený
• groove – 3D linka
• ridge – 3D linka
• inset – 3D linka
• outset – 3D linka
Tu je príklad, ako táto elementov zobrazujú:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">none</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>
<p class="hidden">hidden</p>
</body>
</html>Výsledok v prehliadači:
Keď uvediete iba jednu hodnotu, platí táto pre všetky strany rámčeka. Ak chcete definovať rôzne typy rámu pre jednotlivé strany, uveďte viacero hodnôt oddelených medzerami.
• Dva hodnoty – prvá hodnota pre hornú a dolnú, druhá pre ľavú a pravú podobu rámu.
• Tri hodnoty – prvá hodnota pre hornú, druhá pre ľavú a pravú, tretia pre spodnú podobu rámu.
• Štyri hodnoty – prvá pre hore, druhá pre pravú, tretia pre dolnú a štvrtá pre ľavú podobu rámu.
Rovnako je možné použiť nasledujúce podvlastnosti border:
• border-top-style – typ rámu hore
• border-right-style – typ rámu vpravo
• border-bottom-style – typ rámu dole
• border-left-style – typ rámu vľavo
Aj k tomu uvediem príklad:
<p style="border-bottom-style: dashed;"> Prerušený rám </p>
A tak to vyzerá v prehliadači:
Nastavenie šírky rámu
Pomocou border-width sa určuje šírka rámu.
• Dĺžka
• tenký – tenký rám
• stredný – stredne silný rám
• hrubý – hrubý rám
Ak je uvedená len jedna hodnota, platí táto hodnota pre všetky strany prvku. Pre nastavenie rôznych hrúbok rámov pre jednotlivé strany existujú dva spôsoby. V prvej variante sa uvádzajú viaceré hodnoty oddelené medzerami.
• Dve hodnoty – prvá hodnota pre hornú a dolnú, druhá pre ľavú a pravú hrúbku rámu.
• Tri hodnoty – prvá pre hornú, druhá pre ľavú a pravú, tretia pre dolnú hrúbku rámu.
• Štyri hodnoty – prvá pre hornú, druhá pre pravú, tretia pre dolnú a štvrtá pre ľavú hrúbku rámu.
Tak isto môžete použiť aj nasledujúce podvlastnosti pre rám:
• border-top-width – hrúbka rámu hore
• border-right-width – hrúbka rámu napravo
• border-bottom-width – hrúbka rámu dole
• border-left-width – hrúbka rámu nalavo
Príklad:
<p style="border-width:2px;border-style: dotted;"> Srdečne vitajte </p>
Farba rámu pre obrys
Pomocou vlastnosti outline-color sa určuje farba rámu. Uvedenie je identické s border-color.
• inverzia – farba je invertovaná. Táto farba vzniká reverzáciou všetkých bitov hexadecimálnej hodnoty farby.
• Farba
Príklad:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Takto to vyzerá v prehliadači:
Typ rámu pre obrys
Uvedenie outline-style určuje druh kontúry. Povolené sú rovnaké hodnoty ako pri border-style.
• žiadny – neviditeľný rám
• bodkovaný – bodkovaný
• čiarkovaný – čiarkovaný
• plný – priame čiare
• dvojitý – zdvojený priamy rám
• žlábok – 3D čiara
• hrb – 3D čiara
• vnútro – 3D čiara
• vonkajší – 3D čiara
Príklad:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Šírka obrysu
Uvedenie outline-width je rovnaké ako border-width. Aj cez ňu sa určuje hrúbka rámu. Pre vytvorenie viditeľnej líniovanej rámovej línie sa vždy kombinuje outline-width s outline-style.
• stredný – stredne silný rám
• tenký – tenký rám
• hrubý – hrubý rám
• Dĺžka – určuje hrúbku rámu
Príklad:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Srdečne vitajte
</p>
Ako aj pri obrubách existuje pre rám outline aj všeobecná vlastnosť.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
p {
border:red solid thick;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Vitajte na PSD-Tutorials.de!</p>
</body>
</html>
Táto vlastnosť potom zahŕňa tieto vlastnosti:
• outline-width
• outline-style
• outline-color
Princíp je potom rovnaký ako pri všeobecnej vlastnosti border.
