Dobozok megjelenése
A legtöbb HTML elem egy dobozba foglalható, és ezzel kapcsolatosan különböző tulajdonságai állíthatóak. Az alábbi ábra egy általános HTML elem megjelenését mutatja be.
Négy oldala van, a felső, az alsó, a bal oldali és a jobb oldali. Mindegyik oldalnak van margója (1), kerete (2) és kitöltése (3). A margó a befoglaló doboz legszéle és a keret közötti távolságot állítja be. A keret a margó és a kitöltés között található. Végül a kitöltés a keret és a tartalom között helyezkedik el. Mindegyik lehet akár 0 pixel szélességű is, ekkor egyszerűen nem jelennek meg. A tartalom és a kitöltés által meghatározott terület hátterének színe állítható, illetve képet is el lehet helyezni rajta.
Az elemeknek van magasság (4) és szélesség (5) tulajdonsága is. Ezek a szabvány szerint az adott keret külső részétől az átellenes keret külső részéig értendőek. Erről sajnos a jelenleg domináns böngésző valamiért nem tud (kivéve 6-os verziójának kompatibilis módját), és a teljes dobozszélességet, illetve dobozmagasságot érti ezen tulajdonságok alatt.
Egy soron belüli elemnek is megadhatjuk a fenti értékeket, viszont előfordulhat, hogy több sorban jelenik meg. Ekkor az alábbi jelenséget figyelhetjük meg:
Ahogy a képen látható, a piros keretű doboz középen (az elválasztásnál) kettétörik, és a keret (illetve a másik két tulajdonság) mindkét sorban hat, viszont a törésnél, azaz a sorok megfelelő szélénél nem. Ha több sorba kerül az elemünk aminek ezeket a tulajdonságokat megadtuk, akkor több helyen is kettétörik a doboz.
Háttér
A háttér színét vezérelhetjük segítségével, továbbá elhelyezhetünk képet háttérként, s annak tulajdonságait (elhelyezkedését, ismétlődését, mozgását) állíthatjuk be. A betűkhöz hasonlóan egy definícióban is, és külön-külön is szabályozhatjuk az tulajdonságokat.
body { background-color: white; }
Fehérre állítja a háttér színét. Természetesen a színt hexadecimális formában (#ffffff) is megadhatjuk.
body { background-image: url (hatter.gif); background-position: top left; background-attachment: scroll; background-repeat: repeat; }
A példa a háttérnek megadja a hatter.gif-et (lehetne még none is megadva, ekkor csak a színezés maradna), a bal felső sarokhoz igazítja, beállítja, hogy amikor görgetjük az oldalt, akkor a háttér is mozogjon, s végül még azt, hogy ismétlődjön a háttérkép. A background-position (elhelyezkedés) értékei lehetnek szövegesek: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, illetve százalékosak (pl. 12% 34%) és pixelben megadottak (pl. 12px 34px). A background-attachement (a rögzízettséget szabályozza) értéke lehet fixed és scroll, az előbbinél nem mozdul a háttér, az utóbbinál pedig a görgetéssel együtt mozog. Az ismétlődést befolyásoló background-repeat négy értéket vehet fel: repeat, repeat-x, repeat-y, no-repeat, melyekkel mindkét, csak az egyik, vagy egyik irányban sem történő ismétlődést érhetünk el.
A háttér paraméterek egy összevonó background paraméterrel:
body { background: white url (hatter.gif) no-repeat fixed center center; }
Ebben az esetben mivel a képnek no-repeat értéket adtunk ismétlésül, a fennmaradó területen a háttér fehér színű lesz.
Keretek
A stíluslapok segítségével lehetőségünk van különböző stílusú keretet adni a kiválasztott HTML elemeinknek.
p { border: 2px solid blue; }
A fenti példában 2 képpont széles, sima és kék keretet adtunk minden bekezdésnek. Az első fenti paraméter a keret szélességét, a második a keret stílusát (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), a harmadik pedig a színét adja meg. Az egyes paraméterek elhagyhatóak, de általában szükséges mind.
Lehetőségünk van a keretek mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:
p { border-left: 1px solid red; border-top: 3px double blue; border-right: 3px dotted green; border-bottom: 3px dashed black; }
Bal oldalt egy képpont széles piros, felül 3 képpontnyi két vonalas (vonalanként 1-1 képpontos) kék, jobb oldalt 3 képpontos pontozott zöld és végül alul 3 képpontos szaggatott vonalas fekete keretet kap minden bekezdés.
Körvonalak
A körvonalak a keretekhez nagyon hasonlóan működnek, ellenben az elem méretét nem befolyásolják, mindig körülötte és felette (előtte, azaz eltakarják mindenképpen a doboz tartalmát) jelennek meg, helyet nem foglalnak. A legegyszerűbb talán a fókusz példáját felhozni, mely ehhez nagyon hasonló: mikor egy beviteli elem (például gomb) aktív, akkor körülötte az operációs rendszer egy körvonallal jelzi, hogy fogadja a felhasználói bevitelt.
A körvonalak és a keretek további különbsége, hogy nem lehet a négy oldalon külön-külön megadni és hogy nem csak négyzetes alakú lehet.
De lássuk azokat a tulajdonságokat, melyekkel befolyásolni tudjuk a körvonal megjelenését!
p { outline-width: 2px; } p { outline-style: solid; } p { outline-color: #000000; }
Az outline-width tulajdonság segítségével a körvonal szélessége adható meg, az outline-style a stílust definiálja, míg az outline-color a körvonal színét állítja be. A stílusnál a kereteknél bemutatott stílusok használhatóak.
Lehetőség van egy tulajdonság segítségével beállítani a három tulajdonságot, ekkor opcionálisan és bármilyen sorrendben megadhatjuk az outline után ezeket:
p { outline: 2px solid #000000; }
Margók
Az egyes elemek a kereten (legyen az akár 0 képpontnyi) kívüli helyfoglalását szabályozhatjuk a margók segítségével.
p { margin: 0px 1px 2px 3px; }
A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi margót állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk:
body { margin: 0px; }
Ha csak két értéket adunk meg paraméterként, akkor az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú margókra fog vonatkozni:
body { margin: 10px 0px; }
Lehetőségünk van a margók mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:
p { margin-left: 3px; margin-top: 0px; margin-right: 1px; margin-bottom: 2px; }
Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső margós példánál bemutatottal.
Kitöltés
Az egyes elemek a kereten (legyen az akár 0 képpontnyi) belüli helyfoglalását szabályozhatjuk a kitöltések segítségével.
p { padding: 0px 1px 2px 3px; }
A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi kitöltést állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk:
body { padding: 5px; }
Ahogy a margóknál, itt is lehet csak két értéket megadni paraméterként, ahol az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú kitöltést szabályozza:
body { padding: 10px 0px; }
Lehetőségünk van a kitöltések mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:
p { padding-left: 3px; padding-top: 0px; padding-right: 1px; padding-bottom: 2px; }
Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső kitöltéses példánál bemutatottal.