b{}xm{}dels.toxin.hu

Mielőtt harcba indulnánk a hat ‘gonosz’ ellen, egy próba bejegyzés , ami érdekes is lehet. Kisebb dizájnbeli módosítások elvégzésekor, annak felderítése mely stílusok öröklődhetnek egy adott szülőelemről, sokszor fejtőrést okoz számomra. Ebben a bejegyzésben utána szaglászok melyek is lehetnek ezek. Mint kiderült a CSS-ben számos tulajdonság képezheti öröklés tárgyát. Ez annyi jelent, hogy egy ilyen tulajdonságot értékül adva egy elemnek, az összes benne lévő elem is rendelkezni fog az adott tulajdonsággal, egészen addig amíg a gyermekelemben felül nem írjuk. A legtöbb inline tulajdonság bír ilyen képességgel. A visibility és a cursor öröklődik, további inline elemeken öröklődő tulajdonságok még a:

• letter-spacing, word-spacing, white-space, line-height, color, font,
• font-family, font-size, font-style, font-variant, font-weight,
• text-decoration, text-transform, direction

Nézzünk akkor egymásba ágyazott inline elemeket:

 <em><span></span></em>

végignézve a tulajdonságokat valamint az elemeket, látható hogy nem célszerű az öröklési ágon lefelé megváltoztatni őket, hiszen nagyobb valószínűséggel maradnak állandóak mint nem. Következzenek a terminal block elemek (további blokk elemeket már nem tartalmaznak). Itt két öröklődő tulajdonságot találtam: text-indent és a text-align-ot, példa:

<div style="border: 1px solid red; text-indent:
10px">

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.

</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.

</p>

</div>

bemásolva a fenti kódot egy realtime html editorba, bólinthatunk is világos miért öröklődnek. Következzenek az öröklődő listaelem tulajdonságok: list-style, list-style-type, list-style-position, list-style-image, világos miért is kéne beállítanunk őket elemről elemre. Az egyetlen öröklődő táblaelem a border-collapse , ezen önmagában is nagyon érdekes tulajdonság későbbi blogbejegyzés tárgya is lesz… . Meg is vagyunk a többi tulajdonság :

• display, margin, border, padding, background, height, min-height,
• max-height, width, min-width, max-width, overflow, position, left,
• right, top, bottom, z-index, float, clear, table-layout, vertical-align,
• page-break-after, page-break-before, and unicode-bidi.

nem öröklődik, azaz várjunk csak, mi van az …

• inherited értékkel . Amikor ezt értékül adjuk egy tulajdonságnak, az érték amit felvesz öröklődni -kikényszerítetten- fog a szülő eleméről, azonban IE7 és korábbi verzió nem támogatják ezt az értéket , vagy mégis, a következő kifejezést használva SELECTOR * {tulajdonság : érték} (ami bármilyen CSS kiválasztó lehet) hasonló hatás érhető el.
• a background tulajdonsággal, láthatóan öröklődik, valójában azonban mégsem, annyi történik csak, hogy a background-color alapértéke átlátszó/transparent, a background-image -é pedig none, ebből már kitalálható mi történik ilyenkor.

A következő bejegyzésben már valóban a box modellek ellen vesszük fel a küzdelmet. Külön köszönet a Mike Oldfield – The Millennium Bell albumának. Hajrá CSS