Paano Gumagana ang CSS Inheritance sa Web Documents

Ang isang mahalagang bahagi ng estilo ng isang website na may CSS ay pag-unawa sa konsepto ng mana.

Ang pamana ng CSS ay awtomatikong tinutukoy ng estilo ng paggamit ng ari-arian. Kapag tiningnan mo ang estilo ng kulay ng estilo ng ari-arian, makikita mo ang isang seksyon na may pamagat na "Panunumpa". Kung ikaw ay tulad ng karamihan sa mga taga-disenyo ng web, iyong binabalewala ang bahaging iyon, ngunit ito ay naglilingkod sa isang layunin.

Ano ang Inheritance ng CSS?

Ang bawat elemento sa isang HTML na dokumento ay bahagi ng isang puno at bawat elemento maliban sa paunang elemento ng ay may elementong magulang na nakapaloob dito. Anuman ang mga estilo ay inilalapat sa elementong magulang na maaaring ilapat sa mga elemento na nakapaloob dito kung ang mga pag-aari ay maaaring pagmana.

Halimbawa, ang HTML code na ito sa ibaba ay may tag na H1 na may kalakip na isang EM tag:

Ito ay isang Big Headline

Ang elemento ng EM ay isang anak ng elementong H1, at ang anumang mga estilo sa H1 na minana ay ipapasa rin sa tekstong EM. Halimbawa:

h1 {font-size: 2em; }

Dahil ang pagmamay-ari ng laki ng font ay minana, ang teksto na nagsasabing "Big" (na kung saan ay nakapaloob sa loob ng mga tag ng EM) ay magkapareho ang laki ng iba pang H1. Ito ay dahil ito ay nagmamana ng halaga na itinakda sa ari-arian ng CSS.

Paano Gumamit ng CSS Inheritance

Ang pinakamadaling paraan upang magamit ito ay upang maging pamilyar sa mga katangian ng CSS na at hindi minana. Kung ang ari-arian ay minana, alam mo na ang halaga ay mananatiling pareho para sa bawat elemento ng bata sa dokumento.

Ang pinakamahusay na paraan upang magamit ito ay upang itakda ang iyong mga pangunahing estilo sa isang napakataas na antas na elemento, tulad ng BODY. Kung itinakda mo ang iyong font-family sa ari-arian ng katawan, pagkatapos, salamat sa mana, ang buong dokumento ay panatilihin ang parehong font-family. Talagang gagawin ito para sa mas maliliit na mga stylesheets na mas madaling pamahalaan dahil mayroong mas kaunting mga pangkalahatang estilo. Halimbawa:

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

Gamitin ang Halaga ng Estilo ng Inherit

Kasama sa bawat ari-arian ng CSS ang halaga na "magmana" bilang posibleng pagpipilian. Sinasabi nito sa Web browser, na kahit na ang ari-arian ay hindi normal na pagmamana, dapat itong magkaroon ng parehong halaga bilang magulang. Kung nagtatakda ka ng estilo tulad ng isang margin na hindi minana, maaari mong gamitin ang halaga ng magmana sa kasunod na mga katangian upang mabigyan sila ng parehong margin bilang magulang. Halimbawa:

katawan {margin: 1em; } p {margin: magmana; }

Ang Pandarobong Gumagamit ng Mga Binagong Mga Halaga

Mahalaga ito para sa mga minanang halaga tulad ng laki ng font na gumagamit ng mga haba. Ang isang computed value ay isang halaga na may kaugnayan sa ibang halaga sa pahina ng Web.

Kung nagtatakda ka ng laki ng font na 1em sa iyong elemento ng BODY, ang iyong buong pahina ay hindi lahat ay 1em ang laki. Ito ay dahil ang mga elemento tulad ng mga heading (H1-H6) at iba pang mga elemento (ang ilang mga browser ay nagpapainit ng mga katangian ng talahanayan nang iba) ay may kamag-anak na sukat sa Web browser. Sa kawalan ng iba pang impormasyon sa laki ng font, ang Web browser ay palaging gumawa ng H1 headline ang pinakamalaking teksto sa pahina, na sinusundan ng H2 at iba pa. Kapag itinakda mo ang iyong elemento ng BODY sa isang partikular na laki ng font, pagkatapos ay ginagamit ito bilang laki ng laki ng "average", at ang mga elemento ng headline ay kinikwenta mula rito.

Isang Paalala Tungkol sa Pagmamay-ari at Mga Katangian sa Likod

Mayroong ilang mga estilo na nakalista ay hindi minana sa CSS 2 sa W3C, ngunit ang mga Web browser ay nagmamana pa rin ng mga halaga. Halimbawa, kung isinulat mo ang sumusunod na HTML at CSS: