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, obtékání a ukončení obtékání.

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

Margin

Vlastnost margin určuje velikost vnějších okrajů kolem 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ý, třetí spodní a č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ý, třetí spodní a č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 zkráceně */

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

Width

Vlastnost width určuje šířku elementu. Jako hodnoty 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 hodnoty 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 inherit. Při použití left nebo right bude prvek zarovnán vlevo či vpravo a z druhé strany bude obtékán textem. Při použití none prvek neplave. Inherit znamená, že se hodnota 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
• inherit - hodnota se zdědí po rodičovském prvku

img.doleva{
float : left;
}

/* obrázek odpluje doleva */

Clear

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

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

• 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