Boxy v CSS

Pomocí kaskádových stylů lze u boxů nastavit šířku, výšku, orámování, vnitřní a vnější okraj, plavání a čekání na skončení plovoucích objektů.

Popis všech vlastností boxů je shrnut v přehledných tabulkách.

Margin

Vlastnost margin určuje velikost vnějších okrajů okolo boxu jako hodnoty se uvádějí procenta, nebo délky.

Všechny vlastnosti vnějších okrajů.

Příklad

p.okraj {
margin-bottom : 10px;
margin-left : 10px;
margin-right : 10px;
margin-top : 10px;
}

/* nebo zkráceně */

p.okraj {
margin : 10px 10px 10px 10px;
}

/* nejkratší zápis */

p.okraj {
margin : 10px;
} /* ale pouze pokud jsou všechny okraje stejné */

Při zkráceném zápisu vlastnosti margin první číslo nastavuje horní okraj, druhé pravý okraj, třetí spodní okraj, čtvrté levý okraj.

Padding

Vlastnost padding určuje velikost vnitřních okrajů uvnitř boxu jako hodnoty se uvádějí procenta, nebo délky.

Všechny vlastnosti vnitřních okrajů.

Příklad

p.okraj {
padding-bottom : 50px;
padding-left : 50px;
padding-right : 50px;
padding-top : 50px;
}

/* nebo zkráceně */

p.okraj {
padding : 50px 50px 50px 50px;
}

/* ještě kratší zápis */

p.okraj {
padding : 50px;
} /* ale pouze pokud jsou všechny okraje stejné */

Při zkráceném zápisu vlastnosti padding první číslo nastavuje horní okraj, druhé pravý okraj, třetí spodní okraj, čtvrté levý okraj.

Border

Pomocí vlastností border lze nastavit šířku, barvu a styl rámečku ze všech stran boxu.

Všechny vlastnosti rámečků:

Hodnoty vlastnosti border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

Detailní popis:

div.pozor {
border-bottom : 1px dashed #FFA500;
border-left : 1px dashed #FFA500;
border-top : 1px dashed #FFA500;
border-right : 1px dashed #FFA500;
}

/* nebo zkáceně */

div.pozor {
border : 1px dashed #FFA500;
}

Width

Vlastnost width určuje šířku elementu jako hodnota se uvádějí délky a procenta.

p.okraj{
width : 200px;
}

/*element p s třídou okraj bude tedy široký 200 pixelů */

Height

Vlastnost height určuje výšku elementu jako hodnota se uvádějí délky a procenta.

p.okraj{
height : 500px;
}

/*element p s třídou okraj bude tedy vysoký 500 pixelů ! */

Float

Může nabývat hodnot: left, right, none a intherit, při použití left, nebo right bude prvek zarovnán vlevo, nebo vpravo a z druhé strany bude obtékán textem. Při použití none prvek neplave. Intherit znamená že hodnota se zdědí po rodičovském prvku.

Hodnoty vlastnosti float:

img.doleva{
float : left;
}

/* obrázek odpluje doleva */

Clear

Vlastnost clear určuje kde se má prvek zobrazit až pod plovoucím prvkem vlevo, vpravo, pod všemi plovoucími prvky nebo bez vlivu na polohu boxu.

Hodnoty: left, right, both, none a intherit.

div.pozor{
clear : both;
}


/* čekám na skončení všech plovoucích prvků */

Reklama

Webhosting C4



Copyright (c) 2004 Tvorba Webu - Kontakt - mapa webu - RSS