Sut mae Etifeddu CSS yn Gweithio mewn Dogfennau Gwe
Rhan bwysig o arddull gwefan gyda CSS yw deall y cysyniad o etifeddiaeth.
Diffinir etifeddiaeth CSS yn awtomatig gan arddull yr eiddo sy'n cael ei ddefnyddio. Pan edrychwch chi ar yr eiddo arddull cefndir-liw, fe welwch adran o'r enw "Etifeddiaeth". Os ydych chi fel y rhan fwyaf o ddylunwyr gwe, rydych chi wedi anwybyddu'r adran honno, ond mae'n bwrpasol.
Beth yw Etifeddiaeth AG?
Mae pob elfen mewn dogfen HTML yn rhan o goeden ac mae gan bob elfen heblaw am yr elfen cychwynnol elfen rhiant sy'n ei amgáu. Pa bynnag arddull sy'n cael ei gymhwyso i'r elfen rhiant honno gellir ei gymhwyso i'r elfennau sydd ynghlwm ynddo os yw'r eiddo'n rhai y gellir eu hetifeddu.
Er enghraifft, mae gan y côd HTML isod tag H1 sy'n amgáu tag EM:
Mae hwn yn Big Mae'r elfen EM yn blentyn i'r elfen H1, a bydd unrhyw arddulliau ar yr H1 a etifeddir yn cael eu trosglwyddo i'r testun EM hefyd. Er enghraifft:
h1 {font-size: 2em; } Gan fod yr eiddo maint ffont wedi'i etifeddu, bydd y testun sy'n dweud "Big" (sef yr hyn sydd wedi'i hamgáu y tu mewn i'r tagiau EM) yr un maint â gweddill yr H1. Mae hyn oherwydd ei fod yn etifeddu y gwerth a osodwyd yn eiddo CSS.
Sut i Ddefnyddio Etifeddiaeth CSS
Y ffordd hawsaf i'w ddefnyddio yw dod yn gyfarwydd â'r eiddo CSS sydd heb etifeddiaeth. Os yw'r eiddo wedi'i etifeddu, yna gwyddoch y bydd y gwerth yn aros yr un peth ar gyfer pob elfen plentyn yn y ddogfen.
Y ffordd orau o ddefnyddio hyn yw gosod eich arddulliau sylfaenol ar elfen uchel iawn, fel y BODY. Os gosodwch eich ffont-deulu ar eiddo'r corff, yna diolch i etifeddiaeth, bydd y ddogfen gyfan yn cadw'r un teulu ffont. Fe fydd hyn yn ei wneud mewn gwirionedd ar gyfer dalennau arddull llai sy'n haws eu rheoli gan fod llai o arddulliau cyffredinol. Er enghraifft:
body {font-family: Arial, sans-serif; } Defnyddiwch y Gwerth Arddull Etifeddu
Mae pob eiddo CSS yn cynnwys y gwerth "etifeddu" fel opsiwn posibl. Mae hyn yn dweud wrth porwr y We, hyd yn oed os na fyddai'r eiddo fel arfer yn cael ei etifeddu, dylai fod yr un gwerth â'r rhiant. Os ydych chi'n gosod arddull fel ymyl nad yw'n cael ei etifeddu, gallwch ddefnyddio'r gwerth etifeddiaeth ar eiddo dilynol i roi'r un ffin iddyn nhw â'r rhiant. Er enghraifft:
corff {ymyl: 1em; } p {ymyl: etifeddu; } Defnyddiau Etifeddu Gwerthoedd Cyfrifiadurol
Mae hyn yn bwysig ar gyfer gwerthoedd etifeddedig fel maint y ffont sy'n defnyddio hyd. Mae gwerth cyfrifo yn werth sy'n gymharol â gwerth arall ar y We.
Os ydych chi'n gosod ffont-maint 1em ar eich elfen CORFF, ni fydd eich tudalen gyfan i gyd yn ddim ond 1m o faint. Mae hyn oherwydd bod elfennau fel penawdau (H1-H6) ac elfennau eraill (mae rhai porwyr yn cyfrifo eiddo bwrdd yn wahanol) â maint cymharol yn porwr y We. Yn absenoldeb gwybodaeth arall ar y ffont, bydd y porwr gwe bob amser yn gwneud pennawd H1 y testun mwyaf ar y dudalen, ac yna H2 ac yn y blaen. Pan osodwch eich elfen CORFF i faint ffont penodol, yna caiff hynny ei ddefnyddio fel maint ffont "cyfartalog", ac mae'r prif elfennau'n cael eu cyfrifo o hynny.
Nodyn Am Eiddo Etifeddu a Chefndir
Mae nifer o arddulliau sydd wedi eu rhestru heb etifeddu yn CSS 2 ar y W3C, ond mae'r porwyr Gwe yn dal i etifeddu y gwerthoedd. Er enghraifft, os ydych chi'n ysgrifennu'r HTML a CSS canlynol:
Mae'r elfen EM yn blentyn i'r elfen H1, a bydd unrhyw arddulliau ar yr H1 a etifeddir yn cael eu trosglwyddo i'r testun EM hefyd. Er enghraifft:
h1 {font-size: 2em; }Gan fod yr eiddo maint ffont wedi'i etifeddu, bydd y testun sy'n dweud "Big" (sef yr hyn sydd wedi'i hamgáu y tu mewn i'r tagiau EM) yr un maint â gweddill yr H1. Mae hyn oherwydd ei fod yn etifeddu y gwerth a osodwyd yn eiddo CSS.
Sut i Ddefnyddio Etifeddiaeth CSS
Y ffordd hawsaf i'w ddefnyddio yw dod yn gyfarwydd â'r eiddo CSS sydd heb etifeddiaeth. Os yw'r eiddo wedi'i etifeddu, yna gwyddoch y bydd y gwerth yn aros yr un peth ar gyfer pob elfen plentyn yn y ddogfen.
Y ffordd orau o ddefnyddio hyn yw gosod eich arddulliau sylfaenol ar elfen uchel iawn, fel y BODY. Os gosodwch eich ffont-deulu ar eiddo'r corff, yna diolch i etifeddiaeth, bydd y ddogfen gyfan yn cadw'r un teulu ffont. Fe fydd hyn yn ei wneud mewn gwirionedd ar gyfer dalennau arddull llai sy'n haws eu rheoli gan fod llai o arddulliau cyffredinol. Er enghraifft:
body {font-family: Arial, sans-serif; }Defnyddiwch y Gwerth Arddull Etifeddu
Mae pob eiddo CSS yn cynnwys y gwerth "etifeddu" fel opsiwn posibl. Mae hyn yn dweud wrth porwr y We, hyd yn oed os na fyddai'r eiddo fel arfer yn cael ei etifeddu, dylai fod yr un gwerth â'r rhiant. Os ydych chi'n gosod arddull fel ymyl nad yw'n cael ei etifeddu, gallwch ddefnyddio'r gwerth etifeddiaeth ar eiddo dilynol i roi'r un ffin iddyn nhw â'r rhiant. Er enghraifft:
corff {ymyl: 1em; } p {ymyl: etifeddu; }Defnyddiau Etifeddu Gwerthoedd Cyfrifiadurol
Mae hyn yn bwysig ar gyfer gwerthoedd etifeddedig fel maint y ffont sy'n defnyddio hyd. Mae gwerth cyfrifo yn werth sy'n gymharol â gwerth arall ar y We.
Os ydych chi'n gosod ffont-maint 1em ar eich elfen CORFF, ni fydd eich tudalen gyfan i gyd yn ddim ond 1m o faint. Mae hyn oherwydd bod elfennau fel penawdau (H1-H6) ac elfennau eraill (mae rhai porwyr yn cyfrifo eiddo bwrdd yn wahanol) â maint cymharol yn porwr y We. Yn absenoldeb gwybodaeth arall ar y ffont, bydd y porwr gwe bob amser yn gwneud pennawd H1 y testun mwyaf ar y dudalen, ac yna H2 ac yn y blaen. Pan osodwch eich elfen CORFF i faint ffont penodol, yna caiff hynny ei ddefnyddio fel maint ffont "cyfartalog", ac mae'r prif elfennau'n cael eu cyfrifo o hynny.
Nodyn Am Eiddo Etifeddu a Chefndir
Mae nifer o arddulliau sydd wedi eu rhestru heb etifeddu yn CSS 2 ar y W3C, ond mae'r porwyr Gwe yn dal i etifeddu y gwerthoedd. Er enghraifft, os ydych chi'n ysgrifennu'r HTML a CSS canlynol: