Kiel CSS Heredaĵo Agas en Reteja Dokumentoj

Grava parto de stilo retejo kun CSS komprenas la koncepton de heredaĵo.

CSS- heredaĵo estas aŭtomate difinita per la stilo de la posedaĵo uzata. Kiam vi rigardos la stilon de fundo, vi vidos sekcion titolita "Heredaĵo". Se vi estas plej multaj retejaj diseñistoj, vi ignoris tiun sekcion, sed ĝi servas celon.

Kio estas CSS Heredaĵo?

Ĉiu elemento en HTML-dokumento estas parto de arbo kaj ĉiu elemento krom la komenca elemento havas gravan elementon kiu ligas ĝin. Kiaj ajn stiloj estas aplikitaj al tiu gepatra elemento, oni povas apliki al la elementoj enkadritaj en ĝi se la propraĵoj estas tiuj, kiuj povas esti hereditaj.

Ekzemple, ĉi tiu HTML-kodo sube havas H1-etikedon enmetantan EM-etikedon:

Ĉi tio estas Big Headline

La EM-elemento estas infano de la H1-ero, kaj ajnaj stiloj en la H1-a hereditaj ankaŭ estos transdonitaj al la EM-teksto. Ekzemple:

h1 {font-grandeco: 2em; }

Pro tio ke la tiparo-grandeco estas heredita, la teksto, kiu diras "Granda" (kio estas enmetita en la EM-etikedoj) estos la sama grandeco kiel la resto de la H1. Ĉi tio estas ĉar ĝi heredas la valoron aro en la CSS-posedaĵo.

Kiel Uzi CSS Heredecon

La plej facila maniero uzi ĝin estas konatiĝi kun la CSS-posedaĵoj, kiuj estas kaj ne estas hereditaj. Se la posedaĵo estas heredita, tiam vi scias, ke la valoro restos la sama por ĉiu infana elemento en la dokumento.

La plej bona maniero uzi ĉi tion estas agordi viajn bazajn stilojn sur tre alta nivelo, kiel la KOMPO. Se vi agordas vian tiparon-familion en la korpon, tiam danke al heredaĵo, la tuta dokumento konservos tiun saman tiparon-familion. Ĉi tio efektive faros pli malgrandajn stilojn, kiuj estas pli facilaj por administri, ĉar estas malpli da ĝeneralaj stiloj. Ekzemple:

korpo {font-familio: Arial, sans-serif; }

Uzu la Heredan Stilon-Valoron

Ĉiu CSS-posedaĵo inkluzivas la valoron "heredi" kiel eblon. Ĉi tio rakontas al la retumilo, ke eĉ se la propraĵo ne kutime estus heredita, ĝi devus havi la saman valoron kiel la gepatro. Se vi agordas stilon kiel randon, kiu ne heredas, vi povas uzi la hereda valoro en postaj posedaĵoj por doni al ili la saman randon kiel la gepatro. Ekzemple:

korpo {rando: 1em; } p {margin: heredi; }

Heredaĵo Uzas Komputitajn Valorojn

Ĉi tio gravas por heredaj valoroj kiel tiparaj grandecoj, kiuj uzas longojn. Komputita valoro estas valoro, kiu rilatas al iu alia valoro en la Retpaĝo.

Se vi agordas tiparon de 1em en via BODI-elemento, via tuta paĝo ne estos nur 1em en grandeco. Ĉi tio estas ĉar elementoj kiel rubrikoj (H1-H6) kaj aliaj elementoj (iuj foliumiloj komputas tablon propraĵoj malsame) havas relativan grandecon en la Retumilo. Malgraŭ aliaj fontaj informoj, la TTT-retumilo ĉiam faros H1-titolon la plej grandan tekston en la paĝo, sekvita de H2 kaj tiel plu. Kiam vi agordas vian BODI-elementon al specifa tipara grandeco, tiam tio estas uzata kiel la "mezuma" tiparo, kaj la titolaj elementoj estas komputitaj de tio.

Noto pri Heredaĵo kaj Fona Ekonomioj

Estas kelkaj stiloj, kiuj estas listigitaj, ne heredis en CSS 2 sur la W3C, sed la Retumiloj ankoraŭ heredas la valorojn. Ekzemple, se vi skribis la jenan HTML kaj CSS: