| Einstein.cz | O Životě.cz | All4web | Chat4U | Soldát.cz |
Tvorba WWW
 
Odběr emailů

Aktuality
Články
 
 
Partnerské weby
 JakNaWeb.com - vše pro tvorbu webu - HTML, PHP, MySQL, ASP, CSS,
XML, JavaScripty, PHP
 
Informace o serveru
šéfredaktor
Marek Soldát

hostujeme u
WEB4U

kontaktní email
marek@soldat.cz

ISSN 1214-0082
 
Hledání
 
 
 
Anketa
Jakého používáte mobilního operátora?

Eurotel (20%)


T-Mobile (21%)


Oskar (26%)


Jiný (12%)


Nemám mobil (21%)



Celkem hlasovalo 110 lidí.
 
Co s článkem ?
 
Už jste četli...?
 
Ikonka serveru
 

CSS - vlastnosti blokových elementů

vydáno : 17. 02. 2003, autor : Marek Soldát, kategorie : Tvorba WWW - CSS

V tomto díle si detailněji popíšeme vlastnosti blokových elementů, změnu jejich velikosti, vnitřních i vnějších okrajů a rámečků.

Velikost

Velikost blokových elementů určují vlastnosti width a height. width určuje šířku, height výšku elementu. Obojí lze určovat délkovými jednotkami, procentuálně (z maximální možné šířky/výšky) a obojí lze nastavit na auto (daná vlastnost se přizpůsobí okolnostem, nefunguje spolehlivě ve všech prohlížečích).

Box model

Další vlastnosti blokových elementů reprezentuje tzv. box model. Jeho náčrt vypadá asi takto:

Box model

Jednotlivé vlastnosti si níže detailněji popíšeme.

Vnější okraj (margin)

Vnějším okrajem myslíme místo vně blokového prvku, kde se nesmí nacházet nic jiného (žádný jiný prvek, ani rámeček prvku rodičovského). Následující příklad mluví sám za sebe:

 Ukázka vlastnosti margin

Jak jste už jistě vypozorovali, tato vlastnost má název margin a k definování tohoto kraje se používají délkové jednotky.

Vnější okraj, nebo-li margin můžeme nastavit buď pro všechny strany stejný:

div { margin:5px; }

Nebo pro každou stranu jiný:

div {
margin-top:1px; /* horní okraj */
margin-right:2px; /* pravý okraj */
margin-bottom:3px; /* dolní okraj */
margin-left:4px; /* levý okraj */
}

To samé lze vyjádřit i zkráceným zápisem:

div { margin: 1px 2px 3px 4px; }

Rámeček (border)

U rámečku můžeme definovat tři vlastnosti - tloušťku (border-width) pomocí délkových jednotek, styl (border-style) a barvu (border-color). Tabulka stylů je zde:

Název styluPopis
dotted?
dashed?
solidnormální čára
doubledvojitá čára
groovevystouplý 3D rámeček
ridgejiný 3d rámeček
insetklesající rámeček
outsetstoupající, vystupující rámeček
hiddenschovaný, neviditelný rámeček = bez rámečku

Příklad:

div {
border-width:1px;
border-style:solid;
border-color:#000000;
}

Příklad určuje, že rámeček tohoto objektu bude 1 pixel tlustý, bude tvořen jednoduchou čárou a jeho barva bude #000000, tedy černá. Podobně jako u vlastnosti margin i zde lze provést zkrácený zápis:

div { border:1px solid #000000; }

I rámeček můžeme definovat pro každou stranu jiný přidáním -top (nahoře), -right (vpravo), -bottom (dole), nebo -left (vlevo) hned za border. Výsledné konstrukce mohou vypadat nějak takto:

border-left (levý rámeček - všechny vlastnosti)
border-left-style (levý rámeček - styl)
border-bottom (dolní rámeček - všechny vlastnosti)
border-bottom-width (levý rámeček - šířka)
atd.

Vnitřní okraj (padding)

Vlastnost padding se podobá vlastnosti margin, definuje ale mezeru mezi rámečkem elementu a jeho obsahem. Stejně, jako u margin se k definování používají délkové jednotky a i tentokrát si ukážeme ilustrativní obrázek:

 Ukázka vlastnosti padding

Stejně, jako okraj vnější, můžeme i ten vnitřní nastavit pro všechny strany stejný,

div { padding:5px; }

pro každou stranu jiný,

div {
padding-top:1px; /* horní okraj */
padding-right:2px; /* pravý okraj */
padding-bottom:3px; /* dolní okraj */
padding-left:4px; /* levý okraj */
}

nebo použít zkrácený zápis:

div { margin: 1px 2px 3px 4px; }

Fotografie autora
Marek Soldát, marek@soldat.cz
Autor je šéfredaktorem serveru Einstein.cz.
 
Tento článek je součástí seriálu CSS
 
Komentáře
VěcAutorDatum a čas

K článku nejsou žádné komentáře.

Zobrazit Vše | Přidat nový