Webszerkesztés

Dobozmodell

A dokumentum minden eleme egy dobozban helyezkedik el.

Minden doboznak van tartalma (content), ez maga az elem.

Az elemek köré szegély (border) rajzolható, mely vizuális tulajdonságokkal rendelkezik (szín, vastagság, vonaltípus...).

A tartalom és a szegély közötti távolság a kitöltés (padding). A kitöltésre a tartalom háttértulajdonságai jellemzőek, csak a méretét állíthatjuk.

A szegélyen kívül helyezkedik el a margó (margin), mely segítségével szabályozni lehet a szomszédos elemektől való távolságot. A margók mindig átlátszóak.

A doboz teljes méretét a tartalom, a kitöltés, a szegély és a margó méreteinek összege adja meg.

A kitöltés, a szegély és a margó vastagsága lehet nulla, ekkor a dobozméret a tartalom méretével lesz azonos.

Block, Inline

A CSS soron belüli (inline) és blokkszintű (block) elemeket különböztet meg.

Block: Vizuális formázása blokk formájában történik. (Pl.: bekezdés)

Inline: A soron belüli elemek nem hoznak létre új blokkot, tartalmuk a soron belül kerül megjlenítésre. (Pl.: kiemelet szöveg, soron belüli kép)

Dimenzió

A blokkszintű elemek szélességét a width tulajdonság, magasságát a height tulajdonság határozza meg.

Az elemek számára minimális és maximális szélességet ls magasságot is megadhatuk.

min-height - minimális magasság
max-height - maximális magasság
min-width - minimális szélesség
max-width - maximális szélesség

Div

A div (division - szakasz) általános tárolóelem, egy weblap logikailag összetartozó része. A benne elhelyezett tartalomra egységesen lehet hivatkozni.

megadása: <div>...</div>

Az általános tároló elemek formázását stíluslapok segítségével szokás megoldani. Ha több div (szakasz) is van egy oldalon, az egyes tárolóelemeket azonosítani kell, leggyakoribb az id (identifier - azonosító) megadása.

Az általános tárolóelemek egymásba ágyazhatók, és tartalmazhatnak a HTML oldalon megjeleníthető bármely elemet.

Span

A span szövegszintű/inline logikai szakaszt jelöl. A HTML oldal egy részét azonosítjuk vele. Stíluslap segítségével formázható szövegrészt jelölhetünk ki vele.

megadása: <span>...</span>