Vlastnosti zobrazení
border-color
p {
border-bottom-color: #CC0033;
}
Nastaví barvu rámečku. Je zde možno použít tři hodnoty:
| hodnoty | barva rámečku |
|---|---|
| barva (viz. barvy) | nastavená barva |
| transparent | průhledný rámeček |
| inherit | zděděná barva rámečku |
border-color nastaví barvu celého rámečku. Pokud je potřeba obarvit pouze nějakou jeho část, použijí se další varianty této vlastnosti:
| varianta | popis |
|---|---|
| border-left-color | obarvení levého okraje rámečku |
| border-right-color | obarvení pravého okraje rámečku |
| border-top-color | obarvení horního okraje rámečku |
| border-bottom-color | obarvení dolního okraje rámečku |
border-width
p {
border-top-width: 3px;
}
Určuje šířku rámečku:
| hodnoty | šířka rámečku |
|---|---|
| pixely nebo jiný rozměr kromě procent | šířka rámečku v pixelech (nebo jiných jednotkách) |
| 0px | rámeček tam nebude |
| thin | slabý rámeček |
| medium | středně silný rámeček (výchozí nastavení) |
| thick | tlustý rámeček |
Tato vlastnost ovlivní celý rámeček. Pokud je potřeba změnit jen jeho část, použijí se opět další varianty vlastnosti:
| varianta | popis |
|---|---|
| border-left-width | ohraničení levého okraje rámečku |
| border-right- width | ohraničení pravého okraje rámečku |
| border-top- width | ohraničení horního okraje rámečku |
| border-bottom- width | ohraničení dolního okraje rámečku |
border-style
.popis {
border-style: dotted;
}
Vlastnost definuje styl rámečku:
| hodnoty | druh rámečku | příklad |
|---|---|---|
| solid | plný | border-style: solid |
| dotted | tečkovaný | border-style: dotted |
| dashed | čárkovaný | border-style: dashed |
| double | dvojitý | border-style: double |
| groove | příkop | border-style: groove |
| ridge | val | border-style: ridge |
| inset | dolík | border-style: inset |
| outset | návrší | border-style: outset |
| none | žádný | border-style: none |
I zde pro formátování části rámečku existují další varianty této vlastnosti:
| varianta | popis |
|---|---|
| border-left-style | styl ohraničení levého okraje rámečku |
| border-right-style | styl ohraničení pravého okraje rámečku |
| border-top-style | styl ohraničení horního okraje rámečku |
| border-bottom-style | styl ohraničení dolního okraje rámečku |
margin
.popis {
margin-left: 10px;
}
Tato vlastnost definuje vnější okraj prvku.
| hodnoty | vnější okraj |
|---|---|
| délka | vzdálenost mezi případným rámečkem a okolním dokumentem |
| procento | tatáž vzdálenost vypočítaná z rozměrů omezujícího nadřazeného prvku |
| auto | automatické nastavení okrajů tak, aby protilehlé byly stejné (nefunguje v IE v quirk módu) |
Pokud je potřeba nastavit margin jen u části prvku, použijí se opět modifikace:
| varianta | popis |
|---|---|
| margin-left | velikost levého okraje rámečku |
| margin-right | velikost pravého okraje rámečku |
| margin-top | velikost horního okraje rámečku |
| margin-bottom | velikost dolního okraje rámečku |
padding
.popis {
padding: 1em;
}
Je to prakticky totéž jako margin, jen namísto vnějšího určuje okraj vnitřní. Jeho hodnota je tedy velikost mezery mezi rámečkem (border) a obsahem prvku. Možnosti hodnot a zápisu jsou totožné jako u vlastnosti margin.
height
.popis {
height: 400px;
}
Určuje výšku prvku.
| hodnoty | výška prvku |
|---|---|
| délka | zadaná výška prvku |
| procento | procento z výšky nadřazeného prvku |
| auto | výška je přirozená |
width
Nastaví šířku prvku. Možnosti zápisu jsou stejné jako u vlastnosti height.
© 2006-2007 Petr Kuda - www.troska.cz