CSS referencia => Formázásmodell

CSS, 4. fejezet - Formázásmodell

A negyedik fejezet tartalma:

A CSS egy egyszerű, dobozszerű formázási modellt használ, ahol minden elemformázás eredménye egy, vagy több négyszögletes dobozként képzelhető el. Minden doboznak van egy 'magja', az őt körülvevő 'kitöltéssel' (padding), szegéllyel (border) és margóval (margin).

A margó, a szegély és a kitöltés mérete egyenkét meghatározható a margin (5.5.1 - 5.5.5), a border (5.5.11 - 5.5.22) és a padding (5.5.6 - 5.5.10) tulajdonságok értékeinek beállításával. A kitöltőterület hátérszíne megegyezik az elemével, amelyet a background tulajdonság (5.3.2 - 5.3.7) határoz meg. A szegély színe és stílusa szintén a border tulajdonság beállításával határozható meg, míg a margó mindig átlátszó, így a szülő elem állandóan látható marad.

A doboz szélessége az elem, a kitöltés, a szegély és a margó területének összege.

A formázások szempontjából két elemtípus különböztethető meg: a blokkszintű elem és a soron belüli elem.

Vissza a hivatkozó oldalra

4.1 Blokkszintű elemek

A következő példa bemutatja, hogyan formázható CSS használatával egy két gyermek-elemet tartalmazó UL elem. A példa egyszerűsítése okán szegélyeket nem definiálunk. Szintén ez okból használjuk értékekként az ABC kis- és nagybetűit, amelyek nem szabványos CSS meghatározások, de ebben az esetben használatuk megkönnyíti a táblázat és a példastílus összevetését.

<STYLE TYPE="text/css">
UL {background: red;
margin: A B C D;
padding: E F G H;
}
LI {color: white;
background: blue;     
margin: a b c d;
padding: e f g h;
}
</STYLE>
...
<UL>
  <LI>Első elem
  <LI>Második elem
</UL>
  Példa

Itt ténylegesen kipróbálható a fenti példa konkrét értékekkel.

Gyakorlatilag, a kitöltés és a margó tulajdonságai nem öröklődnek. De, ahogy a példa is mutatja, az elemek szülőkhöz és 'testvérekhez' (velük egyenrangúakhoz) viszonyított elhelyezkedése lényeges, mert ezeknek az elemeknek kitöltés- és margótulajdonságai hatást gyakorolnak a gyermek elemekre. Ha az előző példában lettek volna szegélyek is, azokat a kitöltés és a margó között kellett volna megjeleníteni.

A következő ábra a dobozmodell használatakor érvényes terminológiáról nyújt áttekintést:

A jelölések fordítása szándékosan maradt el, ugyanis ugyanezek a kifejezések szerepelnek a CSS nyelvtanában is. Azok kedvéért, akik számára az angol nyelv bizonyos nehézséget okoz, az alábbiakban rövid szószedetet teszünk közzé:

bottom - alsó
left - bal
top - felső
right - jobb
margin - margó
border - szegély
padding - kitöltés
inner - belső

E kis kitérő után térjünk vissza a dobozmodellhez:

A bal külső él a formázott elem bal széle; a hozzá tartozó kitöltéssel, szegéllyel és margóval. A bal belső él pedig magának a tartalomnak a szélét jelenti, kitöltés, szegély és margó nélkül. A jobb oldal ennek tükörképe. Ugyanez a szabály érvényes az elem csúcsára (top) és aljára (bottom).

Egy elem szélességén a tartalom szélességét értjük, vagyis a bal belső él és a jobb belső él közti távolságot. Az elem magasságán pedig a tartalom magasságát, azaz a rajzon inner top és inner bottom kifejezéssel jelölt magasságok közti távolságot.

Vissza a hivatkozó oldalra

4.1.1 Függőleges formázás

A nem 'lebegő' blokkszintű elemek margószélessége határozza meg az őt körülvevő doboz szélei közti minimális távolságot. Két, vagy több összevont szomszédos margó (értsd: nincs köztük szegély, kitöltés, vagy tartalom) közösen használja a stíluslapban meghatározott legnagyobb 'margin' értéket. A legtöbb esetben a függőleges margók összevonás után vizuálisan kellemesebb látványt nyújtanak, mint amit a tervező gondolt. Az előbbi példában a két LI elem közötti margó van összevonva, és közösen használják az első LI elem 'margin-bottom' és a második LI elem 'margin-top' tulajdonsága közül a nagyobbat. Hasonlóképpen; ha az UL elem és az első LI elem közti kitöltés (padding - az E jelű konstans) 0 értékű, az UL elem és az első LI elem közti margó összevonódik.

Vissza a hivatkozó oldalra

4.1.2 Vízszintes formázás

A nem 'lebegő' blokkszintű elemek vízszintes pozícióját és méretét hét tulajdonság határozza meg: a 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right', 'margin-right'. Ezen tulajdonságok értékeinek összege mindig megegyezik a szülő elem 'width' értékével.

Alapértelmezésben egy elem szélességének értéke 'auto'. Ha az elem nem helyettesített elem, a szélesség értékét a böngésző számolja ki, a fent említett hét tulajdonság értékének összegzésével. Ha az elem helyettesített elem, 'width' tulajdonságának 'auto' értéke automatikusan kicserélődik az elem saját szélesség-értékére.
A hét tulajdonság közül háromnak értéke állítható 'auto' -ra: 'margin-left', 'width', 'margin-right'.

A 'width' tulajdonságnak van egy nem negatív, böngésző által meghatározott minimum értéke (amely elemenként változik és mindig másik tulajdonságtól függ). Ha a 'width' értéke e határérték alá kerül, akár azért, mert így lett beállítva, vagy mert értéke 'auto' volt és az alábbi szabályok miatt vált értéke túl alacsonnyá, értéke kicserélődik a minimumként használható értékkel.

Ha pontosan egy 'margin-left', 'width', vagy 'margin-right' értéke 'auto'; a böngésző ennek értékét úgy állítja be, hogy kiadja a fentebb felsorolt hét tulajdonsághoz tartozó maradék értéket; amennyi szükséges a szülő elem szélességének eléréséhez.

Ha a tulajdonságok közül egyik sem 'auto'; a 'margin-right' tulajdoság értéke lesz 'auto'.

Ha a háromból egynél több 'auto' és közülük egyik a 'width'; a többi tulajdonság ('margin-left' és/vagy 'margin-right') értéke nullára lesz állítva, és a 'width' kapja meg azt az értéket, amennyi szükséges a szülő elem szélességének eléréséhez.

Abban az esetben, ha a 'margin-left', és 'margin-right' tulajdonságok vannak 'auto' -ra állítva, mindkettő egyenlő értéket kap. A függőleges margókkal ellentétben, a vízszintes margók nem összevonhatók.

Vissza a hivatkozó oldalra

4.1.3 Listaelemek

Azok az elemek, amelyek 'list-item' tulajdonságának értéke 'display', blokkszintű elemekként formázódnak, és listajelölő előzi meg őket. A jelölő típusát a list-style tulajdonság határozza meg. A list-style tulajdonság értéke szerint a jelölő elhelyezkedése az alábbi lehet:

A fenti példát a böngésző így jeleníti meg:

Jobbról-balra értelmezendő szövegek esetében értelemszerűen a listajelölő a doboz jobb oldalára kerül.

Vissza a hivatkozó oldalra

4.1.4 Lebegő elemek

A 'float' tulajdonság alkalmazásával egy elem elhelyezkedése meghatározható az elemek által általában elfoglalt helyek oldalsó vonalán kívül is; ez esetben formázásuk módja a blokkszintű elemekéhez hasonló. Példaként: ha egy kép 'float' tulajdonságát 'left' (bal) értékre állítjuk be, eredményképpen a kép addig tolódik balra, míg egy másik blokkszintű elem margóját, kitöltését, vagy szegélyét el nem éri. Jobb oldalán a lap többi tartalma fogja körbefutni. Az elem margói, szegélyei, kitöltései megmaradnak, de margói a szomszédos elem margóival sosem lesznek összevonva.

A lebegő elemek pozicionálása a következő szabályok szerint történik (a kifejezések magyarázatás lásd a 4.1 pontban)

  1. Egy balra igazított lebegő elem bal külső éle nem lehet balrább, mint szülő eleme bal belső éle. A jobbra igazított lebegő elemekre ugyanilyen szabály érvényes.
  2. Egy balra igazított lebegő elem bal külső élének jobbra kell esnie bármelyik (a HTML forrásban) korábban leírt balra igazított lebegő elemtől, vagy tetejének kell lejjebb lennie, mint az előbb leírt aljának. A jobbra igazított lebegő elemekre ugyanilyen szabály érvényes.
  3. Egy balra igazított lebegő elem jobb külső éle nem eshet jobbra bármely tőle jobbra eső, jobbra igazított lebegő elem bal külső élétől. A jobbra igazított lebegő elemekre ugyanilyen szabály érvényes.
  4. A lebegő elem teteje nem lehet magasabban, mint szülő elemének belső magassága (inner top).
  5. A lebegő elem teteje nem lehet magasabban, mint bármely korábbi lebegő, vagy blokkszintű elem teteje.
  6. Egy lebegő elem teteje nem lehet magasabban, mint bármely 'sordoboz' (4.4 pont), amelynek tartalma a HTML forrásban megelőzi a lebegő elemet.
  7. A lebegő elemet olyan magasra kell elhelyezni, amennyire csak lehet.
  8. A balra igazított lebegő elemet annyira balra kell elhelyezni, amennyire csak lehet; a jobbra igazított lebegő elemet pedig annyira jobbra kell elhelyezni, amennyire csak lehet. Ez az igazítási mód előnyben részesül a többi (más) balra / jobbra igazítási eljárással szemben.

A fenti példaszöveg formázása a következőképp alakul:

Megjegyzés: a lebegő IMG elemet a P elem tartalmazza, tehát jelen esetben az a szülő elem.

Van két olyan eset, amikor egy lebegő elemek margó-, szegély-, és kitöltő területei átfedhetik egymást:

  • Amikor a lebegő elemnek negatív értékű margója van: a lebegő elem negatív margója úgy lesz figyelembe véve, mint más blokkszintű elemé.
  • Amikor a lebegő elem szélesebb, vagy magasabb, mint az őt tartalmazó elem.

Vissza a hivatkozó oldalra

4.2 Soron belüli elemek

Azok az elemek, amelyek nem formázhatók blokkszintű elemként; a soron belüli elemek. Egy soron belül használható több soron belüli elem is. Figyeljük meg a példát:

<P>Néhány <EM>kiemelt</EM> szó jelenik meg a <STRONG>sorban</STRONG>

A P elem általánosan használt blokkszintű elem, míg az EM és a STRONG soron belüli elemek. Ha a P elem szélessége egy egész sort kitölt, akkor abban a sorban két soron belüli elem is található lesz.

Néhány kiemelt szó jelenik meg a sorban

Ha a P elem szélessége több, mint egy sort foglal el, a soron belüli elem 'doboza' felosztódik a két sor között:

<P>Néhány <EM>kiemelt szó jelenik</EM> meg; a sorban 
Néhány kiemelt szó
jelenik meg a sorban.

Ha egy soron belüli elemhez margó, szegély, kitöltés, vagy szövegdekoráció van rendelve, ezek nem lesznek hatással a sortörésre. A fenti példa 'doboza' valahogy így néz ki: 

           ------------
Néhány    | kiemelt szó
--------   ------------
jelenik | meg a sorban
--------

(Fenti "rajz" meglehetősen egyszerűsített és torzított; ennek oka, hogy egyszerű ASCII karaktereket lehessen használni az ábrázoláshoz. A sormagasságok kiszámításához lásd a 4.4 Fejezetet.)

Vissza a hivatkozó oldalra

4.3 Helyettesített elemek

A helyettesített elem olyan elem, amely megjelenítésekor avval a tartalommal van helyettesítve, amelyre hivatkozásként mutat. Például a egy HTML kódban szereplő IMG elem az SRC attribútumában szereplő képpel lesz megjelnésekor helyettesítve. Ilyenkor a helyettesített elemek magukkal hozzák saját méreteiket is. Ha a width értéke auto, az elem szélességét megjelenítésekor saját szélessége határozza meg. Ha stíluslapon keresztül más (nem auto) érték van meghatározva, a helyettesített elem azzal az értékkel kerül megjelenítésre. (A méretezési eljárás a média típusától függ.) A height tulajdonságra hasonló szabályok vonatkoznak.
Helyettesített elemek lehetnek soron belüli, vagy blokkszintű elemek is.

Vissza a hivatkozó oldalra

4.4 Sorok magassága

Minden elemnek van line-height, azaz sormagasság tulajdonsága, amely egy szövegsor teljes megasságát adja meg. A szövegsor teljes megasságát a szöveg és az alá-fölé elhelyezett üres helyek összessége adja meg. Példaként: ha egy szöveg 12pt magas, és a line-height értéke 14pt; két képpontnyi üres hely adódik hozzá a betűmérethez: egy képpont a sor fölé, egy képpont alá.

A betűméret és a sormagasság közti különbséget vezetésnek nevezzük. A vezetés-érték fele a fél-vezetés. Formázáskor minden szövegsor egy-egy sordobozként értelmezhető.

Ha a szövegsor egyes részei különböző magasság-értékeket tartalmaznak (több különböző soron belüli elem), akkor minden egyes résznek megvan a maga saját vezetés-értéke is. A sordoboz magasságát a legmagasabb rész tetejétől a legmélyebbre érő rész legaljáig mérjük. Megjegyzendő, hogy a 'legmagasabb' és a 'legmélyebb'értékek nem szükségszerűen tartoznak ugyanazon elemhez, mivel az elemek függőleges pozicionálása a vertical-align tulajdonság beállításával történik.
Egész bekezdés formázása esetén a minden sordoboz közvetlenül az előző alá kerül.
A nem helyettesített elemekhez tartozó alsó és fölső kitöltések, szegélyek és margók nem befolyásolják a sordoboz magasságát. Más szóval: ha a kiválasztott kitöltéshez, vagy szegélyhez tartozó line-height tulajdonság túl kicsi, a szomszédos sorok szövegei rá fognak takarni.

A sorban található helyettesített elemek (pl.: képek) megnövelhetik a sordoboz magasságát, ha a helyettesített elem teteje (beleétve a hozzá tartozó kitöltést, szegélyt, margót is) a legmagasabb szövegrész fölé, illetve alja a legalacsonyabbra érő szövegrész alá ér.

Általános esetben, amikor amikor az egész bekezdésnek egy line-height értéke van, és nincsenek nagyobb méretű képek, a fenti szabályleírás biztosan meghatározza, hogy a párhuzamos sorok alapvonalai pontosan a line-height tulajdonságban megadott értékre legyenek egymástól.

Vissza a hivatkozó oldalra

4.5 A Vászon

A fordítás során sokat gondolkodtam, miképp magyarítsam a 'Canvas' szót. A canvas ismerősen hangozhat a programozással foglalkozóknak; azt a felületet jelenti, amire egy program karaktereket, grafikonokat, stb... kirajzolhat, ugyanúgy, mint a festő a vásznára. Így végül maradtam a szó szerinti fordításnál: CANVAS - VÁSZON.

A Vászon (CANVAS) a böngészőfelület azon része, amelyre a dokumentum és beágyazott elemei kirajzolódnak. A vászon nem a dokumentum strukturáló elemeinek felel meg, és ez a dokumentum formázása során két fontos kérdést vet fel.

  • A beállítás során honnan számítjuk a vászon méreteit?
  • Amikor a dokumentum nem fedi le az egész vászont, az üres terület hogyan lesz kirajzolva?

Az első kérdésre adható válasz az, hogy a vászon kezdeti szélessége a böngészőablak méretén alapul, de a CSS a pontos méretbeállítást a böngészőre hagyja. Ésszerű a böngészőre hagyni a vászon méretének megváltoztatását az ablak átméretezésekor is, mert ez szintén kívül esik a CSS hatókörén.

A HTML kiterjesztései szolgáltatnak példát a második kérdés megválaszolásához: A BODY elem attribútumai állítják be a hátteret; az egész vászonra vonatkozóan. A laptervezők elvárásainak támogatására a CSS-ben bevezetésre került egy, a vászon hátterére vonatkozó szabály:

Ha a HTML elem background értéke nem transparent, akkor az kerül használatba, egyébként pedig a BODY elem background attribútuma.

Fenti szabály használat közben a következőképp jelenhet meg:

<HTML STYLE="background: url(http://style.com/hatter.jpg)">
<BODY STYLE="background: red">

A példában a vászont beteríti a 'hatter.jpg' nevű kép. A BODY elem háttérszíne pedig (amely nem biztos, hogy teljesen lefedi a vászont), vörös lesz.

Ajánlott a vászon tulajdonságait a 'BODY' elemen keresztül beállítani.

Vissza a hivatkozó oldalra

4.6 'BR' elemek

Az aktuális CSS tulajdonságok és értékek nem írják le a BR elemek viselkedését. A HTML-ben a BR elem két szó közötti sortörést határoz meg. A gyakorlatban az elem egy sortöréssel van helyettesítve. A CSS jövőbeni verzióiban ez várhatóan változni fog.

előző  tetejére  következő