Navigácia: Tvorba Webu > CSS - Vlastnosti boxov

CSS - Vlastnosti boxov

Do tejto kategórie patrí nastavenie okrajov, rámčekov, veľkosti a obtekania objektov.

Vonkajšie okraje

Názvy vlastností: margin-top, margin-right, margin-bottom, margin-left

Veľkosť prázdneho miesta okolo objektu z vonkajšej časti jeho rámčeka alebo pozadia. Samozrejme, že margin-top je hore, margin-right vpravo, margin-bottom dole a margin-left vľavo. Hodnota môže byť dĺžka alebo percento.

p {margin-left: 50px}

Toto je nejaký odstavec, ktorého ľavý vonkajší okraj má veľkosť 50px. Dosiahli sme to nastavením vlastnosti MARGIN-LEFT na príslušnú hodnotu.

Súhrn vonkajších okrajov

Názov vlastnosti: margin

Ak nechceme pracne nastavovať jednotlivé okraje, použijeme vlastnosť margin a určíme ich všetky jednou vlastnosťou. Jednotlivé dĺžkové hodnoty oddeľujeme medzerou.

Ak napíšeme jednu dĺžku, použije sa pre všetky strany. Pokiaľ uvedieme dve alebo tri, ostatné sa doplnia podľa protiľahlej strany. Pri použití štyroch hodnôt oddelených medzerami sa budú chápať v poradí: hore, vpravo, dole, vľavo.

div {margin: 7em}
 /* z kazdej strany okraj dlzky 7em */
p {margin: 5px 8px}
 /* zhora a zdola 5px,
 zlava a sprava 8px */
.text {margin: 1pt 2pt 3pt 4pt}
 /* hore 1pt, vpravo 2pt,
 dole 3pt a vlavo 4pt */

Vnútorné okraje

Názvy vlastností: padding-top, padding-right, padding-bottom, padding-left

Obdoba vlastností MARGIN-TOP, atď. Teraz však ide o vnútorný okraj - ak bude mať objekt rámček, zväčší sa i ten.

blockquote {padding-bottom: 20%}

Súhrn vnútorných okrajov

Názov vlastnosti: padding

Táto vlastnosť je podobná ako margin, ale reprezentuje vnútorný okraj miesto vonkajšieho.

#navigacia {padding: 10px}

Šírky rámčekov

Názvy vlastností: border-top-width, border-right-width, border-bottom-width, border-left-width

Každá z týchto vlastností určuje šírku vybranej strany rámčeka okolo objektu. Stále platí, že top je hore, right vpravo, bottom dole a left vľavo.

Hodnotou je thin (tenký), medium (stredne hrubý), thick (hrubý) alebo konkrétna dĺžka.

.vpravo {border-right-width: 2px}

Kým však neurčíte aj farbu a štýl rámčeka, nezobrazí sa.

Súhrn šírky rámčekov

Názov vlastnosti: border-width

Ako hodnotu použijeme jednu až štyri dĺžky oddelené medzerami. Určované sú v poradí: hore, vpravo, dole, vľavo (podobne ako pri margin a padding).

.ramcek {border-width: 1px}

Rámček sa v tomto prípade ešte nezobrazí, treba doplniť ďalšie atribúty.

Farba rámčeka

Názov vlastnosti: border-color

Obdoba border-width, ale určuje sa farba rámčekov.

p {border-color: blue}

Štýl rámčeka

Názov vlastnosti: border-color

Obdoba border-width, ale určuje sa štýl rámčekov. Možné hodnoty sú: none (žiaden), dotted (bodkovaný), dashed (čiarkovaný), solid (plný), double (dvojitý), groove (ryha), ridge (val), inset (znížený), outset (vyvýšený).

p {
 border-width: 3px;
 border-color: blue;
 border-style: dashed;
}

Teraz sa rámček konečne vykreslí.

Odstavec s rámčekom

Súhrn strán rámčekov

Názvy vlastností: border-top, border-right, border-bottom, border-left

Pre jednotlivé strany rámčekov môžete zadať naraz šírku, štýl a farbu (oddeľte ich medzerou).

#pata {border-top: 2px solid black}

Súhrn rámčekov

Názov vlastnosti: BORDER

Ak potrebujete určiť všetky štyri strany rámčeka naraz (sú rovnaké), použite jednoznačne border. Za hodnotu dosaďte šírku, štýl a farbu - samozrejme, všetko oddelené medzerou.

.ramcek {border: 1px inset #0155FF}

Šírka

Názov vlastnosti: width

CSS dokáže meniť šírku blokových elementov (niekedy aj riadkových). Slúži na to jednoduchá vlastnosť width s dĺžkovou alebo percentálnou hodnotou (vzhľadom k šírke nadradeného elementu). Predvolená hodnota je auto.

div.hlavny {width: 300px}
.vedla {width: 20%}

Výška

Názov vlastnosti: height

Blokovým objektom môžeme určiť aj výšku - buď dĺžkovou hodnotou alebo ju necháme prednastavenú (auto).

#hore {width: 20em; height: 5em}

Teraz je ten správny čas na tzv. Box Model. Je to obrázok znázorňujúci objekt na stránke s nastavenými vlastnosťami margin, border, padding a width. Vyzerá nasledovne:

Treba pripomenúť, že staršie verzie IE chybne rátajú width.

Obtekanie

Názov vlastnosti: float

Základnou vlastnosťou je float. Môže mať hodnotu left (objekt je vľavo) alebo right (vpravo). Prednastavená hodnota je none.

Obtekanie blokových elementov sa zvyčajne používa, ak chceme vytvoriť viacstĺpcový layout - napr. ľavý stĺpec s navigáciou a hlavný so samotným obsahom stránky.

<html>
 <head>
  <title>Stránka</title>
 </head>
 <body>
   <div style="float: left; width: 30%">
    Text vľavo.
   </div>
   <div style="float: left; width: 70%">
    Text vpravo.<br/>
    Tu pokračuje text vpravo.
   </div>
 </body>
</html>

Text vľavo.

Text vpravo.
Tu pokračuje text vpravo.

Ako vidíme, ak je odstavcov s float: left viac, prvý je vľavo a druhý vpravo od neho.

Čakanie na zrušenie obtekania

Názov vlastnosti: clear

Určuje, z ktorej strany element čaká na obtekanie, ktoré sa má ukončiť. Zvyčajne spôsobí, že sa prvok zobrazí na novom riadku. Hodnotou je none (prednastavené), left (zľava), right (sprava) alebo both (z obidvoch strán).

Hodnotenie

1 2 3 4 5 (ako v škole)
Priemerná známka: 2,65

na začiatok stránky ↑ | informácie | pridať k obľúbeným | RSS 2.0