Carane CSS Inheritance dianggo ing Web Documents

Salah sawijining bagean penting kanggo nyusun situs web kanthi CSS yaiku ngerteni konsep warisan.

Warisan CSS otomatis ditetepake kanthi gaya properti sing digunakake. Nalika sampeyan ndeleng werna latar mburi gaya, sampeyan bakal weruh bagean kanthi judul "Warisan". Yen sampeyan kaya paling perancang web, sampeyan wis ora nglirwakake bagean kasebut, nanging ora nglakoni tujuane.

Apa CSS Pusaka?

Saben unsur ing sawijining dokumen HTML minangka bagéan saka wit lan saben unsur kajaba unsur dhasar nduweni unsur induk sing nyakup. Gaya apa wae sing dipigunakaké kanggo unsur induk bisa diterapake marang unsur-unsur sing dilebokake ing sajroning yen sifat-sifat kasebut bisa diwenehi warisan.

Contone, kode HTML ing ngisor iki duwe tag H1 sing mlebu tag EM:

Iki Big Headline

Unsur EM yaiku anak saka unsur H1, lan gaya ing H1 sing diwarisake bakal dikirim menyang teks EM. Tuladhane:

h1 {font-size: 2em; }

Wiwit sifat font-size diwenehi warisan, teks sing ngucapake "Big" (sing kalebu ing tag EM) bakal ukurane padha karo liyane H1. Iki amarga diwenehi nilai kasebut ing properti CSS.

Carane Gunakake CSS Pusaka

Cara sing paling gampang kanggo nggunakake iku yaiku supaya bisa diwenehi sifat CSS lan ora diwenehi warisan. Yen properti diwenehi warisan, sampeyan bakal ngerti manawa nilai kasebut tetep padha kanggo saben unsur bocah ing dokumen kasebut.

Cara sing paling apik kanggo nggunakake iki yaiku ngeset gaya dhasar ing unsur tingkat dhuwur, kayata BODY. Yen sampeyan ngatur font-family ing properti awak, banjur, thanks kanggo warisan, kabeh document bakal tetep padha-kulawarga font. Iki bakal nggawe gaya stylesheets luwih cilik sing luwih gampang dikelola amarga ana kurang sakabèhé gaya. Tuladhane:

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

Gunakake Value Gaya Pusaka

Saben property CSS kalebu nilai "warisan" minangka opsi sing bisa ditrapake. Iki ngandhani browser web, yen sanajan properti ora bakal diwenehi warisan, kudu duwe nilai sing padha karo indike. Yen sampeyan nyetel gaya kayata wates sing ora diwenehake, sampeyan bisa migunakake nilai warisan ing sifat-sifat sing sabanjure kanggo menehi wates sing padha karo wong tuwa. Tuladhane:

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

Pusaka Nggunakne Nilai Computed

Iki penting kanggo nilai warisan kaya ukuran font sing nggunakake tliti. Nilai sing diitung yaiku nilai sing relatif marang sawetara nilai liyane ing kaca Web.

Yen sampeyan nyetel ukuran font 1em ing elemen BODY, kabeh kaca bakal ora kabeh ukurane mung 1em. Iki amarga unsur-unsur kayata headings (H1-H6) lan unsur liyane (sawetara browser ngitung properti tabel beda) nduweni ukuran relatif ing browser Web. Yen ora ana informasi ukuran huruf liya, browser Web bakal nggawe headline H1 minangka teks paling gedhé ing kaca kasebut, diikuti H2 lan sateruse. Nalika sampeyan ngeset elemen BODY menyang ukuran font sing spesifik, sing digunakake minangka ukuran rata-rata "rata-rata", lan unsur judhul diitung saka kuwi.

Wigati babagan Warisan lan Properti Latar

Ana sawetara gaya sing didaftar ora diwenehi ing CSS 2 ing W3C, nanging browser Web isih oleh warisan. Contone, yen sampeyan nulis HTML lan CSS ing ngisor iki: