Tvorba webu » CSS » Boxy v CSS

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ů.

• margin-top - horní vnější okraj
• margin-bottom - dolní vnější okraj
• margin-left - levý vnější okraj
• margin-right - pravý vnější okraj
• margin - kompletní nastavení 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ů.

• padding-top - horní vnitřní okraj
• padding-bottom - dolní vnitřní okraj
• padding-left - levý vnitřní okraj
• padding-right - pravý vnitřní okraj
• padding - kompletní nastavení 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ů:

• border-top - nastavení horní části rámečku
• border-bottom - nastavení dolní části rámečku
• border-left - nastavení levé části rámečku
• border-right - nastavení pravé části rámečku
• border - kompletní nastavení rámečku

• border-color - kompletní nastavení barvy rámečku
• border-style - kompletní nastavení stylu rámečku
• border-width - kompletní nastavení šířky rámečku

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

Detailní popis:

• border-left-color - nastavení barvy
• border-left-style - nastavení stylu
• border-left-width - nastavení šířky

• border-right-color - nastavení barvy
• border-right-style - nastavení stylu
• border-right-width - nastavení šířky

• border-top-color - nastavení barvy
• border-top-style - nastavení stylu
• border-top-width - nastavení šířky

• border-bottom-color - nastavení barvy
• border-bottom-style - nastavení stylu
• border-bottom-width - nastavení šířky

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:

• left - zarovnání vlevo a obtékání textem z druhé strany
• right - zarovnání vpravo a obtékání textem z druhé strany
• none - neplave
• intherit - hodnota se zdědí po rodičovském prvku

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.

• left - Prvek se zobrazí až pod plovoucím prvkem s nastavenou vlastností float:left.
• right - Prvek se zobrazí až pod plovoucím prvkem s nastavenou vlastností float:right.
• both - Prvek se zobrazí až pod všemi plovoucími prvky.
• none - Výchozí hodnota prvek se zobrazí normálně.

div.pozor{
clear : both;
}


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

Reklama