V CSS existují dva různé typy rámečků, border a outline. Zatímco border vždy označuje obdélníkový rámeček, v CSS2 zavedený rámeček outline je určen pro neobdélníkové oblasti. Dalším rozdílem je to, že při použití outline je ohraničení provedeno mimo rámec, čímž může být prvku přiřazeno jak rámeček pomocí border, tak ohraničení pomocí outline.
Definice rámečků představené v tomto tutoriálu jsou především zajímavé pro prvky, které tvoří vlastní odstavec. Zásadně lze tyto definice aplikovat i na jiné prvky.
Definice rámečku
S pomocí border lze určit vzhled celého rámečku kolem prvku.
Obecná vlastnost border je souhrnem následujících hodnot, na které se bude podrobněji zaměřeno:
• border-color
• border-style
• border-width
Hodnoty k jednotlivým vlastnostem se zapisují odděleně mezerou. Pořadí, ve kterém jsou vlastnosti uváděny, nehraje roli. Pro border existují také čtyři podvlastnosti, skrz které lze provést údaje o barvě rámu, tloušťce rámu a typu rámu pro jednotlivé strany prvku.
• border-top – rámec nahoře
• border-right – rámec vpravo
• border-bottom – rámec dole
• border-left – rámec vlevo
Následující příklad ukazuje použití border. Tímto nastavením se vytvoří rámec o tři body široký, černý a čárkovaný.
<p style="border:3pt solid #000000;"> Vítejte </p>
Výsledek v prohlížeči:
Barva rámečku
Pomocí border-color se určuje barva rámečku. Povolené jsou následující hodnoty:
• transparent – průhledný rámec
• Barva
Jestliže je udána pouze jedna hodnota, platí pro všechny strany rámu. Pro definování různých barev pro jednotlivé strany se udávají více hodnot oddělených mezerou.
• Dvě hodnoty – první hodnota pro horní a dolní stranu, druhá pro levou a pravou barvu rámu.
• Tři hodnoty – první hodnota pro horní, druhá pro levou a pravou, třetí pro dolní barvu rámu.
• Čtyři hodnoty – první hodnota pro horní, druhá pro pravou, třetí pro dolní a čtvrtá pro levou barvu rámu.
Stejně tak lze použít i následující podvlastnosti border:
• border-top-color – barva rámu nahoře
• border-right-color – barva rámu vpravo
• border-bottom-color – barva rámu dole
• border-left-color – barva rámu vlevo
Příklad:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
A zde je výsledek v prohlížeči:
Typ linie
Pomocí border-style lze nastavit typ linie rámu.
Níže najdete výčet možných variant rámečků:
• none – neviditelný rámec
• dotted – tečkovaný
• dashed – čárkovaný
• solid – plná linka
• double – dvojitá linka
• groove – 3D linka
• ridge – 3D linka
• inset – 3D linka
• outset – 3D linka
Zde je příklad, jak jednotlivé typy rámečků vypadají:
<!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ýsledek v prohlížeči:
Jestliže se zadá pouze jedna hodnota, platí to pro všechny strany rámu. Pro definování typů rámu pro jednotlivé strany se uvádí více hodnot oddělených mezerou.
• Dvě hodnoty – první hodnota pro horní a dolní, druhá pro levou a pravou stranu rámu.
• Tři hodnoty – první hodnota pro horní, druhá pro levou a pravou, třetí pro dolní stranu rámu.
• Čtyři hodnoty – první hodnota pro horní, druhá pro pravou, třetí pro dolní a čtvrtá pro levou stranu rámu.
Stejně tak lze použít i následující border-podvlastnosti:
• border-top-style – typ rámu nahoře
• border-right-style – typ rámu vpravo
• border-bottom-style – typ rámu dole
• border-left-style – typ rámu vlevo
Tady je příklad:
<p style="border-bottom-style: dashed;"> Přerušovaný rámeček </p>
A tak to vypadá v prohlížeči:
Nastavení šířky rámečku
Pomocí border-width se určuje šířka rámečku.
• Udání délky
• thin – tenký rámeček
• medium – středně silný rámeček
• thick – tlustý rámeček
Pokud je udána jen jedna hodnota, platí ta pro všechny strany prvku. Pro stanovení různé tloušťky rámečků pro jednotlivé strany existují dvě možnosti. V první variantě se uvádí více hodnot oddělených mezerami.
• Dvě hodnoty – první hodnota pro horní a dolní, druhá pro levou a pravou šířku rámečku.
• Tři hodnoty – první hodnota pro horní, druhá pro levou a pravou, třetí pro dolní šířku rámečku.
• Čtyři hodnoty – první hodnota pro horní, druhá pro pravou, třetí pro dolní a čtvrtá pro levou šířku rámečku.
Stejně jako u border můžete použít také následující podvlastnosti border:
• border-top-width – tloušťka rámečku nahoře
• border-right-width – tloušťka rámečku vpravo
• border-bottom-width – tloušťka rámečku dole
• border-left-width – tloušťka rámečku vlevo
Příklad:
<p style="border-width:2px;border-style: dotted;"> Srdečně vítejte </p>
Barva rámečku pro obrys
Pomocí vlastnosti outline-color se určuje barva rámečku. Údaj je identický s border-color.
• invert – barva je invertována. Tato barva vzniká obrácením všech bitů hexadecimální barvy.
• Barevné udání
Příklad:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Tak to vypadá v prohlížeči:
Typ rámečku pro obrys
Údaj outline-style určuje typ obrysu. Povolené jsou stejné hodnoty jako u border-style.
• none – neviditelný rámeček
• dotted – tečkovaný
• dashed – čárkovaný
• solid – plný
• double – dvojitý
• groove – 3D linka
• ridge – 3D linka
• inset – 3D linka
• outset – 3D linka
Příklad:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
Šířka rámečku pro obrys
Údaj outline-width je totožný s border-width. I tím se určuje tloušťka rámečku. Pro vytvoření viditelného rámečku vždy kombinujte outline-width s outline-style.
• medium – středně silný rámeček
• thin – tenký rámeček
• thick – tlustý rámeček
• Udání délky – určuje tloušťku rámečku
Příklad:
<p style="outline-width: thin;outline-style: solid; outline-color: red;">
Srdečně vítejte
</p>
A stejně jako u border existuje také pro rámečky outline obecná vlastnost.
<!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>Vítejte na PSD-Tutorials.de!</p>
</body>
</html>
Tímto se spojují následující vlastnosti:
• outline-width
• outline-style
• outline-color
Princip je zde shodný s obecnou vlastností border.
