In oersjoch fan CSS Inheritance

Hoe CSS Inheritance wurket yn websides

In wichtich part fan styl meitsje fan in webside mei CSS is it begryp fan erfskip.

CSS- ferhâlding wurdt automatysk definiearre troch de styl fan it eigendom. As jo ​​de styl fan eigendom eftergrûn sykje, sjogge jo in rubryk mei titel "Inheritance". As jo ​​binne as de measte webûntwerpers, hawwe jo dizze seksje negearre, mar it docht in doel.

Wat is CSS Inheritance?

Elke elemint yn in HTML dokumint is in diel fan in beam en elke elemint útsein it earste elemint hat in parentele elemint dat it bewarret. Hokker stylen tapast wurde foar dat âlder elemint kin tapast wurde foar de eleminten dy't ynklusyf binne as de eigenskippen binne ien dy't kinne fererven wurde.

Bygelyks dit HTML-koade hjirûnder hat in H1-tag dy't in EM taget:

Dit is in Grutte Headline

It EM-elemint is in bern fan it H1-elemint, en alle stilen op 'e H1 dy't ferrûn binne, wurde ek oerbrocht nei de EM-tekst. Bygelyks:

h1 {font-size: 2em; }

Sûnt de lettertype-grutte eigenskip is it erfgoed, de tekst dy't "Big" seit (as wat yn 'e EM tags is omsletten) sil de deselde grutte wêze as de rest fan' e H1. Dit is om't it de wearde ynset yn it CSS-eigenskip.

Hoe brûke CSS Inheritance

De maklikste manier om it te brûken is om te bekennen mei de CSS-eigenskippen dy't binne en net erfd. As it eigendom ynnimd is, dan witte jo dat de wearde itselde bliuwt foar elke elemint yn it dokumint.

De bêste manier om dit te brûken is om jo basisstilen op in hege nivo-elemint te setten, lykas it BODY. As jo ​​jo lettertypefamylje op it lichem eigendom sette, dan, troch it fertsjinjen, it hiele dokumint datselde lettertypefamylje hâldt. Dit sil werklik meitsje foar lytsere stylblêden dy't makliker binne om te beheinen omdat der minder allinich stilen binne. Bygelyks:

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

Brûk de Inherit Style Value

Elke CSS-eigenskip befettet de wearde "erben" as in mooglike opsje. Dit fertelt de webblêder, dat ek as it eigendom net normaal ferwidere soe, it itselde wearde hat as de âlder. As jo ​​in styl lykas in marzje ynstelle dy't net feroare is, kinne jo de erfaring wearde brûke op subsequente eigenskippen om se dezelfde marzje te jaan as de âlder. Bygelyks:

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

Inheritance brûkt gebrûkte wearden

Dit is belangryk foar herinneringen fan wearden lykas lettergrutte dy't lingte brûke. In bepaalde wearde is in wearde dy't relatyf is oan in oare wearde op 'e webside.

As jo ​​in lettertype fan 1em op jo BODY-elemint sette, dan sil jo hiele side net allinich mar 1em yn grutte wêze. Dit is om't eleminten lykas headings (H1-H6) en oare eleminten (guon browsers in oare tabel-eigenskippen fertsjinje) hawwe in relatyf grutte yn 'e webbrowser. As it gjin oare lettertypegrutteynformaasje falt, sil de webblêder altyd in H1 headline meitsje, de grutste tekst op 'e side, folge troch H2 en sa fierder. As jo ​​jo BODY-elemint sette oan in spesifike lettertypegrutte, dan wurdt dat brûkt as de "gemiddelde" lettertypegrutte, en de haadlinen eleminten wurde útjûn.

A Notysje oer feroare en eftergrûn eigenskippen

Der binne in oantal stilen dy't opnommen wurde hawwe net ynhierd yn CSS 2 op 'e W3C, mar de Webbrowsers hawwe de wearden noch altiten. As jo ​​bygelyks de folgjende HTML en CSS skreau: