Hogyan működik a CSS öröklés a webes dokumentumokban?

A CSS-tel kapcsolatos weboldal megtervezésének fontos része az örökség fogalmának megértése.

A CSS öröklést automatikusan meghatározza a használt tulajdonság stílusa. Ha megnézed a stílus tulajdonság háttérszínét, megjelenik egy "öröklés" című szakasz. Ha olyan, mint a legtöbb internetes tervező, akkor figyelmen kívül hagyta ezt a szakaszt, de célt szolgál.

Mi a CSS öröklés?

A HTML dokumentum minden egyes eleme egy fa része, és minden elem, kivéve a kezdeti elemet, tartalmaz egy szülőelemet, amely bezárja. Bármelyik stílust is alkalmazzuk az adott szülőelemre, a benne lévő elemekre alkalmazható, ha a tulajdonságok öröklődnek.

Az alábbi HTML kód például egy EM tagot tartalmazó H1 címkét tartalmaz:

Ez egy nagy fejléc

Az EM elem a H1 elem gyermeke, és az örökölt H1 minden stílusa átkerül az EM szövegre is. Például:

h1 {betűméret: 2em; }

Mivel a betűkészlet-méretű tulajdonság öröklődik, a "Big" (ami az EM-címkék közé záródik) szöveg, amely a H1 többi részével azonos méretű. Ez azért van, mert örökli a CSS tulajdonság értékeit.

A CSS öröklésének használata

A legegyszerűbb módja annak, hogy megismerkedjen azokkal a CSS tulajdonságokkal , amelyek nem öröklődnek. Ha a tulajdonjog öröklődik, akkor tudnia kell, hogy az érték a dokumentum minden egyes gyermekeleménél ugyanaz marad.

A legjobb módja annak, hogy az alapvető stílusokat egy nagyon magas szintű elemre állítsd be, mint például a testet. Ha a betűtípus-családot a testtárgyon állítja be, akkor az öröklésnek köszönhetően az egész dokumentum ugyanazt a betűtípus-családot tartja. Ez valójában a kisebb stíluslapok létrehozását teszi lehetővé, amelyek könnyebben kezelhetők, mivel kevesebb általános stílus létezik. Például:

test {font-family: Arial, sans-serif; }

Használja az Örökölési stílus értékét

Minden CSS tulajdonság magában foglalja az "öröklés" értéket, mint lehetséges opciót. Ez azt mondja a webböngészőnek, hogy még akkor is, ha az ingatlant általában nem örökli meg, ugyanolyan értékűnek kell lennie, mint a szülő. Ha egy olyan stílust állít be, mint például az örökölt margó, akkor az örökölt értéket a későbbi tulajdonságokra használhatja, hogy ugyanolyan távolságban legyenek, mint a szülő. Például:

test {margin: 1em; } p {margin: inherit; }

Öröklés Számított értékeket használ

Ez fontos az örökölt értékekhez, például a hosszúságú betűméretekhez . A számított érték olyan érték, amely a weboldal valamely más értékéhez viszonyítva.

Ha az 1em betűméretet állítja be a BODY elemre, az egész oldal nem lesz csak 1em méretű. Ez azért van így, mert az olyan elemek, mint a címek (H1-H6) és más elemek (egyes böngészők eltérően számolják az asztal tulajdonságait) relatív méretűek a webböngészőben. Egyéb betűméret-információk hiányában a webböngésző mindig a H1 főcímkét fogja az oldal legnagyobb szövegét, majd a H2-et és így tovább. Amikor a BODY elemet egy adott betűméretre állítja be, akkor ezt az "átlag" betűméretet használja, és a főelemelemeket kiszámítják.

Az örökségről és a háttér tulajdonságairól szóló megjegyzés

Számos felsorolt ​​stílust nem örökölt a CSS 2 a W3C-ben, de a webböngészők továbbra is örökölik az értékeket. Például, ha a következő HTML-t és CSS-t írta: