Border – css vlastnost pro rámečky
Vlastnost, jež vykreslí rámeček kolem prakticky jakéhokoli HTML elementu. Velice užitečný nástroj pro design webu v rukou dobrého kodéra. Naučte se s námi jej používat.
Funguje prakticky ve všech dnes používaných prohlížečích | není dědičná
Způsob zápisu
Ukázka zápisu červeného rámečku vytvořeného z jednolité čáry o šířce 1px:
selektor {
border: #ff0000 solid 1px;
}
Vysvětlení způsobu zápisu
Vlastnost border se musí skládat z celkem tří vlastností, pokud má být rámeček vidět:
- border-color – definuje, jakou barvou má být rámeček vykreslen, více o border-color zde,
- border-style – je nutný protože říká prohlížeči, jakým způsobem má rámeček vykreslit, více o hodnotách border-style zde,
- border-width – určuje, jak silný bude rámeček, více o border-width zde.
Poznámka: pokud zvolíte tento způsob zápisu, tak určíte všechny čtyři strany rámečku stejné.
Jak udělat BORDER, aby platil pouze pro určité strany
Někdy je potřeba stylovat každou stranu rámečku samostatně. Není to žádný problém, jen za pomlčku vložíte pozici strany, kterou budete stylovat, viz:
- border-top – vystyluje horní rámeček,
- border-bottom – vystyluje spodní rámeček,
- border-left – vystyluje levý rámeček,
- border-right – vystyluje pravý rámeček.
Vliv BORDER na ostatní elementy
Pozor! Rámeček se připočítává k rozměrům elementu. Co to v praxi znamená? Řekněme, že mát obrázek o rozměrech 100 × 100 pixelů. Kolem obrázku vytovříte rámeček o velikosti (border-width) 2px. V ten okamžik rozměr obrázku je 104 × 104 pixely. To se nemusí nijak negativně projevit. Ale ukažme si jiný, problematický příklad.
Možné problémy s BORDER
Potřebujete vytvořit dva sloupce a použijete CSS vlastnost FLOAT. Oběma elementům (např. DIV) definujete šířku 50%, tedy oba sloupce budou stejně široké. Jestliže použijete rámeček, tak se elementy vedle sebe nevejdou, protože v součtu překročí 100% a prohlížeč je umístí pod sebe, což není žádoucí.
Řešení problému
V tomto případě, kdy připočítávání rámečku vadí správnému chování rozložení prvků, použijeme další vnitřní element (např. DIV), na který aplikujeme rámeček, čímž vyřešíme problém a vyhneme se potížím v případě FLOAT.
Kam dál
Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla